Lập trình Android tiếng Việt - Chapter 7: Android Date - Time - Tabs

Bundle; import android.app.DatePickerDialog; import android.app.TimePickerDialog; import android.view.View; import android.widget.Button; import android.widget.DatePicker; import android.widget.TimePicker; import android.widget.TextView; import java.text.DateFormat; import java.util.Calendar; public class AndDemoUI extends Activity { DateFormat fmtDateAndTime = DateFormat.getDateTimeInstance(); TextView lblDateAndTime; Calendar myCalendar = Calendar.getInstance(); DatePickerDialog.OnDateSetListener d = new DatePickerDialog.OnDateSetListener() { public void onDateSet(DatePicker view, 	 int year, int monthOfYear, int dayOfMonth) { myCalendar.set(Calendar.YEAR, year); myCalendar.set(Calendar.MONTH, monthOfYear); myCalendar.set(Calendar.DAY_OF_MONTH, dayOfMonth); updateLabel(); } }; 7 7. Android – UI – Date Time Tabs Date/Time Selection Widgets 7 TimePickerDialog.OnTimeSetListener t = new TimePickerDialog.OnTimeSetListener() { public void onTimeSet(TimePicker view, int hourOfDay, int minute) { myCalendar.set(Calendar.HOUR_OF_DAY, hourOfDay); myCalendar.set(Calendar.MINUTE, minute); updateLabel(); } }; private void updateLabel() { lblDateAndTime.setText(fmtDateAndTime.format(myCalendar.getTime())); } 8 7. Android – UI – Date Time Tabs Date/Time Selection Widgets 8 @Override public void onCreate(Bundle icicle) { super.onCreate(icicle); setContentView(R.layout.main); lblDateAndTime = (TextView) findViewById(R.id.lblDateAndTime); Button btnDate = (Button) findViewById(R.id.btnDate); btnDate.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { new DatePickerDialog(AndDemoUI.this, d, 	myCalendar.get(Calendar.YEAR), 	myCalendar.get(Calendar.MONTH), 	myCalendar.get(Calendar.DAY_OF_MONTH)).show(); } }); Button btnTime = (Button) findViewById(R.id.btnTime); btnTime.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { new TimePickerDialog(AndDemoUI.this, t, 	myCalendar.get(Calendar.HOUR_OF_DAY), 	myCalendar.get(Calendar.MINUTE), true).show(); } }); updateLabel(); }// onCreate } //class 9 7. Android – UI – Date Time Tabs Date/Time Selection Widgets 9 Other Time Widgets Android provides a DigitalClock and AnalogClock widgets. Automatically update with the passage of time (no user intervention is required). 10 7. Android – UI – Date Time Tabs Tab Selection Widget 10 Tab Selector Android UIs should be kept simple at all costs. When many pieces of information must be displayed in a single app, the Tab Widget could be used to make the user aware of the pieces but show only a portion at the time. 11 7. Android – UI – Date Time Tabs Tab Selection Widget 11 Tabs – Components There are a few widgets and containers you need to use in order to set up a tabbed portion of a view: TabHost is the main container for the tab buttons and tab contents TabWidget implements the row of tab buttons, which contain text labels and optionally contain icons FrameLayout is the container for the tab contents 12 7. Android – UI – Date Time Tabs Tab Selection Widget 12 Components Tab1 Tab2 Tab3 FrameLayout1 Tab Widgets FrameLayouts TabHost 13 7. Android – UI – Date Time Tabs Tab Selection Widget 13 Example: Using Tabs 	 	 CAUTION (Jan 22, 2011)SDK 2.2 has an apparent bug on this issue. See link  Temporal solution is to create app for SDK 1.6. You may enter here the actual layout specification, or (better) use the tag to refer to an external layout assembled in a separated xml file. Details in next pages… 14 7. Android – UI – Date Time Tabs Tab Selection Widget 14 Example: Using Tabs This goes in place of FrameLayout1. It defines an analog clock (optionally surround with a tag using the clause android:id="@+id/tab1" In that case apply a different id to the clock) 15 7. Android – UI – Date Time Tabs Tab Selection Widget 15 Example: Using Tabs This is FrameLayout2. It defines a LinearLayout holding a label, a textBox, and a button. 16 7. Android – UI – Date Time Tabs Tab Selection Widget 16 Example: Using Tabs In order to keep the main.xml design as simple as possible ou may introduce clauses as illustrated below /res/layout/screen2.xml 17 7. Android – UI – Date Time Tabs Tab Selection Widget 17 Example: Using Tabs package cis493.selectionwidgets; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.EditText; import android.widget.TabHost; public class AndDemoUI1 extends Activity { 18 7. Android – UI – Date Time Tabs Tab Selection Widget 18 Example: Using Tabs @Override public void onCreate(Bundle icicle) { 	super.onCreate(icicle); 	setContentView(R.layout.main); 	TabHost tabs=(TabHost)findViewById(R.id.tabhost); 	 	tabs.setup(); 	 	TabHost.TabSpec spec; 	 	spec =tabs.newTabSpec("tag1");	 	spec.setContent(R.id.tab1); 	spec.setIndicator("1-Clock"); 	tabs.addTab(spec); 	 	spec=tabs.newTabSpec("tag2"); 	spec.setContent(R.id.tab2); 	spec.setIndicator("2-Login"); 	tabs.addTab(spec); 	 	tabs.setCurrentTab(0); Set Tab1 Set Tab2 19 7. Android – UI – Date Time Tabs Tab Selection Widget 19 HINT Example: Using Tabs 	 spec = tabs.newTabSpec("tag2"); spec.setContent(R.id.tab2); spec.setIndicator("2-Login", getResources().getDrawable(R.drawable.ic_menu_info_details)); tabs.addTab(spec);	 You may decorate the tab indicator Including text and image as shown below: Note: Many icons available at SDKfolder\docs\images\icon-design 20 7. Android – UI – Date Time Tabs Tab Selection Widget 20 Example: Using Tabs Button btnGo = (Button)findViewById(R.id.btnGo); btnGo.setOnClickListener(new OnClickListener() { 	@Override 	public void onClick(View arg0) { 	EditText txtPerson = 	 (EditText)findViewById(R.id.txtPerson); 	String theUser = txtPerson.getText().toString(); 	txtPerson.setText("Hola " + theUser);	 	}	 	}); } } 21 7. Android – UI – Date Time Tabs Tab Selection Widget 21 Example: Using Tabs You may want to add a listener to monitor the selecting of a particular tab. Add this fragment to the onCreate method. // tabs.setCurrentTab(0); // you may also use tabs.setCurrentTabByTag("tag1"); tabs.setOnTabChangedListener(new OnTabChangeListener() { @Override public void onTabChanged(String tagId) { // do something useful with the selected screen String text = "Im currently in: " + tagId + "\nindex: " + tabs.getCurrentTab(); 	Toast.makeText(getApplicationContext(), text, 1).show(); } }); This fragment returns: Im currently in: tag1 index: 0 22 7. Android – UI – Date Time Tabs SlidingDrawer Widget 22 SlidingDrawer hides content out of the screen and allows the user to drag a handle to bring the content on screen. SlidingDrawer can be used vertically or horizontally. SlidingDrawer should be used as an overlay inside layouts. This means SlidingDrawer should only be used inside of a FrameLayout or a RelativeLayout for instance. The size of the SlidingDrawer defines how much space the content will occupy once slid out so SlidingDrawer should usually use fill_parent for both its dimensions. Taken from:  23 7. Android – UI – Date Time Tabs SlidingDrawer Widget 23 Example: This SlidingDrawer is used by the Android’s interface to access applications installed in the device. handle content 24 7. Android – UI – Date Time Tabs SlidingDrawer Widget 24 Example1: Inside an XML layout, SlidingDrawer must define the id of the handle and the content: Taken from:  handle is just a small graphic to visually indicate the opening/closing control content is usually some type of container holding the desired UI held by the drawer 25 7. Android – UI – Date Time Tabs SlidingDrawer Widget 25 Example2. A more elaborated SlidingDrawer. The red TextView simulates the main UI, the SlidingDrawer is an overlay, tapping the handle opens the new view The background UI is overlapped by the contents of the drawer. Tapping the handle closes the drawer (but does not erase its data) 26 7. Android – UI – Date Time Tabs SlidingDrawer Widget 26 Example 2: SlidingDrawer XML layout (main UI) 27 7. Android – UI – Date Time Tabs SlidingDrawer Widget 27 Example 2: SlidingDrawer XML layout (Drawer ) 	 28 7. Android – UI – Date Time Tabs SlidingDrawer Widget 28 Example 2: SlidingDrawer XML layout (Drawer) 	 	 	 29 7. Android – UI – Date Time Tabs SlidingDrawer Widget 29 Example 2: SlidingDrawer XML layout (Drawer) 	 	 	 	 30 7. Android – UI – Date Time Tabs SlidingDrawer Widget 30 Example 2: SlidingDrawer XML layout (Drawer) 	 	 	 31 7. Android – UI – Date Time Tabs SlidingDrawer Widget 31 Example 2: SlidingDrawer. Android Activity package cis493.slidingdreawerdemo; import java.util.Date; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.*; public class SlidingDrawerDemo extends Activity { Button btn1; Button btn2; TextView label1; TextView label2; TextView label3; SlidingDrawer myDrawer; 32 7. Android – UI – Date Time Tabs SlidingDrawer Widget 32 Example 2: SlidingDrawer. Android Activity @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); myDrawer = (SlidingDrawer)findViewById(R.id.drawer); btn1 = (Button)findViewById(R.id.btn1); btn2 = (Button)findViewById(R.id.btn2); label1 = (TextView)findViewById(R.id.label1); label2 = (TextView)findViewById(R.id.label2); label3 = (TextView)findViewById(R.id.label3); 33 7. Android – UI – Date Time Tabs SlidingDrawer Widget 33 Example 2: SlidingDrawer. Android Activity btn1.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Date dt = new Date(); String now = dt.toLocaleString(); label1.setText("111 - Hola amigos " + now); label2.setText("222 - Hola amigos " + now) ; label3.setText("333 - Hola amigos " + now); } }); btn2.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { myDrawer.animateClose(); } }); } //onCreate } // class 34 	 7. Android – UI – Date Time Tabs UI Selection Widgets 34 Questions ?