Ch ng CÁC IT NG H A TRÊN ANDROID Lê V n H nh levanhanhvn@gmail.com N I DUNG 1.Gi i thi u 2.Basic View 3.Picker View 4.Display View 5.Additional View GI I THI U • View đ n v c n b n c a giao di n đ ho Android M t View đ i di n cho m t widget • View thành ph n xây d ng nên ng d ng, view h tr vi c xây d ng t ng tác gi a ng i dùng ng d ng c n xây d ng • M t View đ c android.view.View d n su t t class: • M i View đ c xác đ nh b i id Id c a View ph i có đ nh d ng “@+id/tenView” VD: android:id="@+id/textView1" GI I THI U • Phân lo i View: o Basic View: nh ng đ i t ng View th ng xuyên s d ng nh TextView, EditText, Button, … o Picker View: t o view cho phép ng i dùng l a ch n m t option, ngày tháng hay th i gian o Display View: hi n th hình ImageSwitcher nh nh Gallery o Menu: dùng đ t o giao di n menu l a ch n o Additional View: nh ng đ i t AnalogClock DigitalClock ng View nh GI I THI U • M t s thu c tính dung chung (cho đa s view): – Style: n u không s d ng, hình th c c a view s theo d ng m c đ nh Ng c l i s đ nh d ng hình th c khác l cho view VD: GI I THI U • Ph ng th c findViewById(R.id.id c a view): – Dùng đ tìm đ i t ng view có id đ c ch file xml – Ph ng th c findViewById(R.id.id c a view) s tr v m t đ i t ng ki u View nên ta c n ép ki u đ i t ng đ c tr v thành ki u c n dung (Button, EditText, …) Nh v y, t ta có th g i ph ng th c khác đ thay đ i thu c tính c a đ i t ng view c n dùng – VD: Button btnOpen = (Button) findViewById(R.id.btnOpen); btnOpen.setOnClickListener(new View.OnClickListener() { publicvoid onClick(View v) { displayToast("You have clicked the Open button"); } GI I THI U • Tham kh o v giá tr c a màu s c (trong Android dùng hex color): t i v t i http://www.mediafire.com/?ujj2pyppdwemx69 Giao di n nh sau: BASIC VIEW G m view – TextView: hi n th n i dung v n b n – EditText: m t class c a TextView, b sung thêm kh n ng cho phép ch nh s a đo n text hi n th – Button: Nút nh n – ImageButton: Nút nh n có h tr hi n th hình nh BASIC VIEW – CheckBox: cho phép ch n l a Có hai tr ng thái: Checked ho c Unchecked – RadioButton: c ng lo i ch n l a (nên c ng có hai tr ng thái: Checked Unchecked – RadioGroup: đ c s d ng đ nhóm m t ho c nhi u đ i t ng RadioButton Cho phép ch đ c check ch n m t RadioButton m t group – ToggleButton: Th hi n hai tr ng thái: Check ho c Uncheck có s d ng đèn báo (light indicator) BASIC VIEW 2.1 Button: java.lang.Object android.view.View android.widget.TextView android.widget.Button • Ph ng th c btnOpen.setOnClickListener(): đ gán cho đ i t ng btnOpen m t đ i t ng d ng đ l ng nghe s ki n ng i nh n click lên đ i t ng btnOpen • Interface OnClickListener: M t button mu n x lý đ c s ki n ng i dùng click lên Button đ i t ng ph i cài đ t (implement) l i interface OnClickListener Interface ch có nh t m t ph ng th c public void onClick(View v) • Thu c tính Style: thay đ i d ng th c khác cho Button VD: PICKER VIEW 3.3 ListView: • List m t danh sách view thơng th ng có d ng layout đ t li n • R t hay dùng Android c bi t ng d ng c n l u tr hi n th nhi u d li u PICKER VIEW 3.4 SpinnerView: • Spinner View lo i View đ c dùng đ hi n th m t danh m c cho phép ng i dùng l a ch n • Thay hi n th m c d i d ng m t danh sách đ n, ta có th chuy n d ng hi n th chúng b ng cách s d ng RadioButton • Tham kh o http://developer.android.com/guide/topics/ui/controls/spinner.html DISPLAY VIEW 4.1 Gallery: java.lang.Object android.view.View android.view.ViewGroup android.widget.AdapterView android.widget.AbsSpinner android.widget.Gallery • Gallery m t lo i View hi n th m c d i d ng m t danh sách cu n ngang xác đ nh ph n t trung tâm • M i image s có m t border bao quanh • Tham kh o http://developer.android.com/reference/android/widget/Gallery.html DISPLAY VIEW 4.1 Gallery: (tt) • Hàm c n b n Gallery: – public int getCount(): Tr v s l ng ImageView có Gallery – public View getView(int position, View convertView, ViewGroup parent): Tr v đ i t ng ImageView s hi n th t i m t v trí xác đ nh • Ph ng th c setOnItemClickListener: đ gán đ i t ng l ng nghe s ki n ng i dùng nh n lên m i ImageView Gallery • Khi ng i dùng nh n lên m t ImageView Gallery h th ng s g i ph ng th c public void onItemClick(AdapterView parent, View v, int position, long id) • Tham kh o http://developer.android.com/guide/topics/ui/controls/spinner.html DISPLAY VIEW 4.2 ImageSwitcher: java.lang.Object android.view.View android.view.ViewGroup android.widget.FrameLayout android.widget.ViewAnimator android.widget.ViewSwitcher android.widget.ImageSwitcher • Cho phép hi n th hình nh d i d ng thu nh , ng i dùng nh n lên m t ImageView s hi n th lên ImageView bên d i • Tham kh o http://developer.android.com/reference/android/widget/ImageSwitcher.html DISPLAY VIEW 4.3 GridView: java.lang.Object android.view.View android.view.ViewGroup android.widget.AdapterView android.widget.AbsListView android.widget.GridView • GridView có d ng b ng chi u (g m nhi u ơ) Có th s d ng k t h p Gridview v i ImageView đ hi n th lo t hình nh • Tham kh o http://developer.android.com/reference/android/widget/GridView.html DISPLAY VIEW 4.3 GridView (tt): • Thay đ i giá tr Adapter cho GridView o Code hi n t i: Khai báo adapter cho GridView, gán adapter cho GridView thông qua câu l nh: ImageAdapter tên_bi n_adapter = new tên_class_adapter(this); GridView.setadapter(tên_bi n_adapter); Yêu c u: class_adapter c n ph i khai báo m ng hinh[] ch a image đ ho t đ ng Nh c m: khó thay đ i giá tr t ng ph n t m ng hinh[] đ c p nh t giá tr cho adapter DISPLAY VIEW 4.3 GridView (tt): • Thay đ i giá tr Adapter cho GridView o Code có th thay đ i giá tr adapter: Khai báo thêm m ng img[] ch a image Main_activity ch a giá tr hình ban đ u cho h th ng ho t đ ng Khi khai báo adapter cho GridView, truy n theo m ng img[] sang class_adapter ImageAdapter tên_bi n_adapter =new tên_class_adapter(this,img); GridView.setadapter(tên_bi n_adapter);  class_adapter t o m t m ng image[] nh n giá tr img[] đ c truy n t Main_activity sang Sau t o adapter d a m ng image v a t o nh code hi n t i Khi c n thay đ i giá tr adapter, s c p nh t l i giá tr cho m ng img[] Main_activity dùng câu l nh sau đ c p nh t l i adapter: Tên_bi n_adapter.notifyDataSetChanged(); DISPLAY VIEW 4.4 Menus: • Menus m t l a ch n r t h u d ng đ hi n th thêm tùy ch n mà khơng tr c ti p hi n th giao di n c a ng d ng • Có hai lo i menu Android: – Context Menu: o Hi n th nh ng thông tin liên quan đ n m t đ i t ng View c th o Trên Android, đ kích ho t ContextMenu ng i dùng c n nh n gi m t đ i t ng View (Button, ImageView…) • Tham kh o http://developer.android.com/guide/topics/ui/menus.html DISPLAY VIEW 4.4 Menus: • Có hai lo i menu Android: – Options Menu: Hi n th nh ng thông tin liên quan đ n Activity hi n t i Trong Android, đ kích ho t Options Menu ng i dùng c n nh n nút Menu thi t b • Ph ng th c createMenu(): tác d ng t o m t danh sách menu item • Ph ng th c publicMenuItemadd(int groupId, int itemId, int order, CharSequence title): thêm m t menu item menu hi n t i v i thông s xác đ nh thu c tính c a menu item đ c thêm vào • Ph ng th c public MenuItemsetAlphabeticShortcut (char alphaChar): gán phím t t bàn phím đ m nhanh m t menu item • Ph ng th c public MenuItemsetIcon(int iconRes) s gán m t hình nh dùng làm bi u t ng cho menu item m i thêm vào DISPLAY VIEW 4.4 Menus: • Có hai lo i menu Android: – Options Menu: Hi n th nh ng thông tin liên quan đ n Activity hi n t i Trong Android, đ kích ho t Options Menu ng i dùng c n nh n nút Menu thi t b • Ph ng th c createMenu(): tác d ng t o m t danh sách menu item • Ph ng th c publicMenuItemadd(int groupId, int itemId, int order, CharSequence title): thêm m t menu item menu hi n t i v i thơng s xác đ nh thu c tính c a menu item đ c thêm vào • Ph ng th c public MenuItemsetAlphabeticShortcut (char alphaChar): gán phím t t bàn phím đ m nhanh m t menu item • Ph ng th c public MenuItemsetIcon(int iconRes): gán m t hình nh dùng làm bi u t ng cho menu item m i thêm vào DISPLAY VIEW 4.4 OptionMenu: • Ph ng th c onCreateOptionsMenu() đ c g i ng i dùng nh n lên phím Menu thi t b • Ph ng th c onOptionsItemSelected() s đ c g i ng i dùng nh n ch n m t menu item Option menu • hi n th Option menu Activity, ta c n orverride hai ph ng th c OnCreateOptionsMenu onOptionsItemSelected • Tham kh o http://developer.android.com/guide/topics/ui/menus.html DISPLAY VIEW 4.5 Context menu: • N u mu n g n m t Menu lên m t đ i t ng View ta c n g i ph ng th c setOnCreateContextMenuListener() đ g n đ i t ng nh n nhi m v t o ContextMenu ADDITIONAL VIEW 5.1 AnalogClock DigitalClock: java.lang.Object android.view.View android.widget.AnalogClock • T o đ ng h đ hi n th Activity • Tham kh o http://developer.android.com/reference/android/widget/AnalogClock.html Ho c http://developer.android.com/reference/android/widget/DigitalClock.html ADDITIONAL VIEW 5.2 WebView: java.lang.Object android.view.View android.view.ViewGroup android.widget.AbsoluteLayout android.webkit.WebView • Cho phép nhúng m t ng d ng web (ho c trang web) vào ng d ng c n d ng (m c đ nh WebView cho hi n th trang web) • Tuy nhiên WebView khơng bao g m đ y đ tính n ng nh trình t web (web browser) nh khơng có u n navigation, address bar • Tham kh o http://developer.android.com/reference/android/webkit/WebView.html http://developer.android.com/guide/webapps/webview.html