L!

P TRNH ANDROID BI 3: GIAO DI"N NG#$I DNG

Kha !o t"o L#p trnh di !$ng !a n%n t&ng HNPT 04/2013

Trung tm Tnh ton Hi'u n(ng cao, )H Bch Khoa H N$i

N%i dung
!!Giao di&n ng'(i dng !!View
"!Text, Button, List, Grid,

!!Layout
"!LinearLayout, AbsolutLayout, TableLayout,

!!Th)c hnh

N%i dung
!!Giao di&n ng'(i dng !!View
"!Text, Button, List, Grid,

!!Layout
"!LinearLayout, AbsolutLayout, TableLayout,

!!Th)c hnh

Giao di&n ng'(i dng

!!GUI trong Java: AWT, Swing, SWT, LWUIT, v Android GUI. !!M hnh: Model-View-Control
"!Model: database, contacts, etc. M$t model c th* !+,c s- d.ng cho nhi%u View-Control "!View: hnh &nh ha c/a Model. Android t0 ch1c View d+2i d"ng cy !* qu&n l3 "!Controller: !p l"i cc thao tc bn ngoi nh+ phm nh4n, ch"m vu5t, cu$c g6i !7n, v.v. )+,c bi*u di8n d+2i d"ng hng !,i s9 ki'n.
4

Giao di&n ng'(i dng

!!Vi&c l*y event t+ hng ,-i v g.i callback c/a Controller l ,0n lu1ng (single-threaded)
"!)&m b&o m:i event trong hng !,i !+,c x- l3 hon ton v theo !ng th1 t9 nh+ trong hng !,i "!Giao di'n s; b< !ng b(ng n7u qu trnh x- l3 lu, Android c th* s; !% ngh< !,i ho=c !ng 1ng d.ng.

Giao di&n ng'(i dng

!!Android s2 d3ng l4p View v ViewGroup
"!Widgets, k7 th>a t> View: thi7t k7 cc !5i t+,ng trn giao di'n. "!Layout, k7 th>a t> ViewGroup: ch1a cc layout v view khc.

!!M%t giao di&n cho Activity c c*u trc d5ng cy

N%i dung
!!Giao di&n ng'(i dng !!View
"!Text, Button, List, Grid,

!!Layout
"!LinearLayout, AbsolutLayout, TableLayout,

!!Th)c hnh

View
!!L4p View cung c*p cc kh6i c0 b7n cho cc thnh ph8n giao di&n ng'(i dng. !!M%t View l m%t vng ch9 nh:t trn mn hnh, c th; v< ln v t'0ng tc. !!View l l4p c0 b7n cho widgets ! t5o ra cc ,6i t'-ng giao di&n (text, button, etc.)

View > S2 d3ng View

!!Cc View trong 1 c2a s= ,'-c thi>t k> d'4i d5ng 1 cy duy nh*t, m t7 d'4i ,?nh d5ng XML. !!Kh@i t5o View:
"!Trong t'p tin Layout "!Trong code khi ch"y ch+?ng trnh.

!!Cc thao tc thng th'(ng trn View

"!Set properties: thi7t l#p thu$c tnh. V d.: text, ID, c(n ch@nh v.v "!Set focus: chuy*n t#p trung sang !5i t+,ng. "!Set up listeners: !=t listener cho !5i t+,ng v x- l3 khi c t+?ng tc. V d.: setOnFocusChangeListener(..) "!Set visibility: An hi'n !5i t+,ng View.

!!Ch A: Android ch?u trch nhi&m cBn chCnh, sDp x>p v v< cc ,6i t'-ng, ta khng c8n t) g.i cc method ny.
9

View > Widgets

!!L4p con c/a View
"!TextView "!EditText "!Button "!RadioButton "!etc

!!UI events
"!onSomethingListener
!OnClickListener !OnTouchListener !OnKeyListener !
10

View > V d3

setContentView(R.layout.hello_activity); //will load the XML UI file

11

View > ListView

!!T5o ra danh sch ,6i t'-ng c th; ko
"!Cc !5i t+,ng t9 !$ng thm vo list qua m$t ListAdapter. "!Danh sch c th* !=t tr+2c trong 1 m&ng.

12

View > M%t s6 View khc

TabView

GridView

FrameLayout

13

View > M%t s6 View khc

WebView

MapView

SurfaceView

14

N%i dung
!!Giao di&n ng'(i dng !!View
"!Text, Button, List, Grid,

!!Layout
"!LinearLayout, AbsolutLayout, TableLayout,

!!Th)c hnh

15

Layout
!!E?nh nghFa v? tr cc ph8n t2 quan h& v4i nhau
"!c"nh nhau "!trn, d+2i "!b&ng, l+2i, danh sch "!

16

Layout > Layout v Activity

17

Layout > LinearLayout

!!SDp x>p cc ,6i t'-ng m%t cch tu8n t)
"!Hng ngang "!Hng d6c

18

Layout > Relative Layout

!!SDp x>p v? tr cc ,6i t'-ng m%t cch t'0ng ,6i
"!V d.: V% bn tri, pha d+2i c/a Layout. "!R4t hBu ch trong vi'c thi7t k7 cc Layout lCng

19

Layout > TableLayout

!!Hi;n th? cc ,6i t'-ng View con theo hng v c%t

20

Layout > XML file

C*u trc d5ng cy!

21

Layout > Kh@i t5o ,6i t'-ng trong code

22

N%i dung
!!Giao di&n ng'(i dng !!View
"!Text, Button, List, Grid,

!!Layout
"!LinearLayout, AbsolutLayout, TableLayout,

!!Th)c hnh

23

Th)c hnh > TabLayout

!!M%t activity / tab

24

Th)c hnh > TabLayout

!!T5o 3 activities
public class ArtistsActivity extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); TextView textview = new TextView(this); textview.setText("This is the Artists tab"); setContentView(textview); } }

Kh@i t5o t+ code!!!

T'0ng t) v4i AlbumsActivity v SongsActivity

25

Th)c hnh > TabLayout

ChuGn b? 3 icons, T5o ./res/drawable (n>u ch'a c) Copy icons vo ./res/ drawable

26

Th)c hnh > TabLayout

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- When selected, use grey --> <item android:drawable="@drawable/ic_tab_artists_grey" android:state_selected="true" /> <!-- When not selected, use white--> <item android:drawable="@drawable/ic_tab_artists_white" /> </selector>

T'0ng t) v4i ic_tab_albums.xml v ic_tab_songs.xml

27

Th)c hnh > TabLayout

#!

<?xml version="1.0" encoding="utf-8"?> <TabHost xmlns:android="http://schemas.android.com/ apk/res/android" android:id="@android:id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="5dp"> <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content" /> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="5dp" /> </LinearLayout> </TabHost>

28

Th)c hnh > TabLayout

public void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.main); Resources res = getResources(); // Resource object to get Drawables TabHost tabHost = getTabHost(); // The activity TabHost TabHost.TabSpec spec; // Resusable TabSpec for each tab Intent intent; // Reusable Intent for each tab // Create an Intent to launch an Activity for the tab (to be reused) intent = new Intent().setClass(this, ArtistsActivity.class); // Initialize a TabSpec for each tab and add it to the TabHost spec = tabHost.newTabSpec("artists").setIndicator("Artists", res.getDrawable(R.drawable.ic_tab_artists)) .setContent(intent); tabHost.addTab(spec); // Do the same for the other tabs [] tabHost.setCurrentTab(2);

TabActivity l activity chnh, c TabHost

nh x5 resource vo tab

Ch.n Tab 2

29

Th)c hnh > TabLayout

!!Ch5y ch'0ng trnh

30

Th)c hnh > ListView

!!Cho php cu%n items !!C th; th+a k> ListActivity! !!Item ,?nh nghFa trong ./res/ layout/list_item.xml

<?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="10dp" android:textSize="20sp" > </TextView>

31

Th)c hnh > ListView

!!OnCreate
public class HelloListView extends ListActivity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setListAdapter(new ArrayAdapter<String>(this, R.layout.list_item, COUNTRIES)); ListView lv = getListView(); lv.setTextFilterEnabled(true); lv.setOnItemClickListener(new OnItemClickListener() { public void onItemClick(AdapterView<?> parent, View view, int position, long id) { // When clicked, show a toast with the TextView text Toast.makeText(getApplicationContext(), ((TextView) view).getText(), Toast.LENGTH_SHORT).show(); } }); } } 32 HHng m7ng chIa tn cc n'4c

Hi;n th? 1 message khi 1 item ,'-c click

THANKS AND QUESTION ?

33

Bi t:p
1.! Th)c hi&n l5i 2 v d3 vJ tablayout v listview 2.! Vi>t ch'0ng trnh hi;n th? 1 cu hKi v 4 ,p n. Khi ng'(i dng nh*n nt tr7 l(i th hi&n thng bo ,ng hay sai (Dng RadioButton v RadioGroup) 3.! Vi>t ch'0ng trnh thu nh:p thng tin ng'(i dng (tn, tu=i, gi4i tnh, ngy thng nBm sinh), khi nh*n nt submit th hi;n th? l5i thng tin v+a nh:p (dng DatePicker cho ngy thng nBm sinh)

34