Bài giảng Phát triển ứng dụng trên thiết bị di động - Chương 4: Layout và các điều khiển cơ bản - Lương Trần Hy Hiến

Nội dung text: Bài giảng Phát triển ứng dụng trên thiết bị di động - Chương 4: Layout và các điều khiển cơ bản - Lương Trần Hy Hiến

1. Bài 4: Layout và các điều khiển cơ bản 2016
2. Nội dung I. Layout 1. Cách tạo một Layout mới. 2. Kết nối layout vào Activity 3. HierarchyViewer. 4. Các kiểu Layout cơ bản. II. Các điều khiển cơ bản 2
3. 1. Cách tạo một Layout mới Chọn File New Android XML File Linear Layout (layout bạn muốn tạo – bạn có thể chọn Relative Layout, Table Layout, ). 3
4. 2. Kết nối layout vào Activity Code kết nối Layout vào Activity 4
5. 3. HierarchyViewer  Một Layout phải được kết nối vào Activity nào đó thông qua hàm setContentView, Android sẽ có cơ chế dịch XML thành Java code.  HierarchyViewer dùng để hiển thị cấu trúc UI của màn hình hiện tại trên emulator hoặc thiết bị thật. 5
6. 4. Các kiểu Layout cơ bản  FrameLayout  TableLinearLayout  Layout  RelativeLayout  AbsoluteLayout 6
7. Các thuộc tính  Required attributes ● layout_width ● layout_height => layout knows how to size a view android:layout_height="wrap_content" android:layout_width="match_parent" (previously "fill_parent“) *can be specified in a measurement unit 7
8. Các thuộc tính (tt)  Other common attributes ● Id (e.g., android:id=“@+id/startButton”) ● layout_marginTop ● layout_marginBottom ● layout_marginLeft ● layout_marginRight ● layout_gravity (alignment: i.e., left, center, right) ● layout_weight ● 8
9. Unit of Measurements  Concern: devices with different densities (dpi, dot per inch)  Screen densities for Android ● Low density (ldpi): 120 dpi ● Medium density (mdpi): 160 dpi ● High density (hdpi): 240 dpi ● Extra high density (xhdpi): 320 dpi ● Extra extra high density (xxhdpi): 480 dpi ● Extra extra extra high density (xxxhdpi): 640 dpi 9
10. Different Units  dp: density-independent pixel ● 160dp = 1" of physical screen size ● dp to screen pixels (px): px = dp x (dpi / 160) ● Same ratio on different devices; recommended  sp: scale-independent pixel ● Similar to dp for specifying font size; recommended  pt: point ● 1 pt = 1/72" of physical screen size; not recommended  px: pixel ● Actual pixel of screen; not recommended 10
11. Các loại Layout Layout thường sử dụng:  RelativeLayout  LinearLayout  TableLayout  GridLayout  FrameLayout 11
12. FrameLayout  Sử dụng trong các trường hợp xây dựng bố cục tổ chức hiển thị một đối tượng duy nhất.  Đối tượng mặc định vị trí top-left trên FrameLayout, có thể sử dụng thuộc tính Gravity để thiết lập lại vị trí.  Ví dụ khai báo: 13
13. FrameLayout  Các đối tượng kế thừa phổ biến: ● ViewFlipper: đối tượng cho phép thực hiện hiển thị các đối tượng ở chế độ phân trang, chỉ hiển thị một đối tượng ở một thời điểm. . Ví dụ khai báo: . Các phương thức sử dụng: .startFlipping .setAutoStart .showNext .showPrevious 14
14. FrameLayout  Các đối tượng kế thừa phổ biến: ● ScrollView: đối tượng cho phép thực hiện hiển thị các đối tượng ở chế độ cuộn màn hình, chỉ cho phép chứa một đối tượng ở một thời điểm. . Ví dụ khai báo: . Các phương thức sử dụng: .setFillViewPort .scrollBy .scrollTo .smoothScrollBy .smoothScrollTo 15
15. LinearLayout  Sử dụng trong các trường hợp xây dựng bố cục tổ chức hiển thị các đối tượng theo một chiều duy nhất (chiều dọc hoặc ngang) (android:orientation="horizontal" or "vertical")  Đối tượng mặc định vị trí top left trên LinearLayout, có thể sử dụng thuộc tính Gravity để thiết lập lại vị trí.  Ví dụ khai báo: 16
16. LinearLayout 17
17. TableLayout  TableLayout: đối tượng layout kế thừa từ LinearLayout, cho phép hiển thị các đối tượng theo nhiều dòng (TableRow).  Mỗi dòng có thể chứa nhiều View, mỗi View được xem là một cột.  Ví dụ khai báo: 18
18. TableLayout TableRow sẽ tự động được tạo ra (nếu dòng đó chưa có) khi bạn kéo thả các View con vào các ô của bảng. 19
19. RelativeLayout  Sử dụng trong các trường hợp xây dựng bố cục tổ chức hiển thị các đối tượng theo mối quan hệ vị trí.  Đối tượng được đặt vào RelativeLayout đầu tiên sẽ xác định vị trí cho các đối tượng sau đó.  Ví dụ khai báo: 20
20. RelativeLayout  Types of relationships: ● To the left, right, above or below the specified element (layout_toLeftOf, layout_toRightOf, layout_above, layout_below) ● Aligned by the left, right, top or bottom edge of the specified element (layout_alignLeft, layout_alignRight, layout_alignTop, layout_alignBottom) ● Aligned by the left, right, top or bottom edge of a parent (layout_alignParentLeft, layout_alignParentRight, layout_alignParentTop, layout_alignParentBottom) ● Centered vertically, centered horizontally, centered vertically and horizontally relative to its parent (layout_centerVertical, layout_centerHorizontal, layout_centerInParent) 21
21. android:layout_alignParentTop=“true” android:layout_alignParentLeft=“true” android:layout_toRightOf=“@id/text2” android:layout_alignParentStart=“true” android:layout_alignBottom=“@id/text2” android:layout_below=“@id/text1” android:layout_below=“@id/button” android:layout_alignLeft=“@id/text1” android:layout_alignLeft=“@id/button” android:layout_alignStart=“@id/text1” android:layout_alignStart=“@id/button” 22
22. GridLayout  Places its children in a rectangular grid  Can place children quickly without requiring a table  Can place children in a controlled way by specifying a row-and-column location or using layout_row and layout_column attribute  Horizontal vs vertical orientation 23
23. FrameLayout Placeholder on screen that can be used to display a single view. Multiple views stacked in a frame layout, i.e., position children on top of each other. 24
24. Xem thêm: g-layout.html 25
25. Nội dung I. Layout II. Các điều khiển cơ bản 1. Button 2. TextView 3. EditText 4. RadioButton – RadioGroup 5. ListView 26
26. II. Các điều khiển cơ bản  Các điều khiển là các thành phần giao diện của ứng dụng.  Làm nhiệm vụ chuyển tải thông tin hoặc tiếp nhận thông tin từ người dùng cuối.  Ví dụ: Button, TextView, ImageView, EditText, CheckBox, RadioButton, RadioGroup, ToggleButton, ProgressBar, 27
27. Text Input and Output  TextView: primarily for text output  EditText: text input and editing by the user using (soft) keyboard View TextView EditText
28. 1. Button  Button được xây dựng từ TextView. Button cho phép nhận và phản hồi tương tác nhấn từ người dùng.  Các dạng Button: • Button • CompoundButton: CheckBox, RadioButton, ToggleButton, Switch. 29
29. 1. Button  Cách lấy button theo Id của Button  Cách thiết lập sự kiện cho Button 30
30. 2. TextView TextView là đối tượng cho phép hiển thị các nội dung văn bản ở 4 dạng:  Normal: dạng văn bản kích thước font chữ mặc đinh.  SmallText: dạng văn bản kích thước font chữ nhỏ.  MediumText: dạng văn bản kích thước font chữ vừa.  LargeText: dạng văn bản kích thước font chữ to. 31
31. 2. TextView 32
32. 3. EditText Text Field inputType Property Value Plain text none Person name textPersonName Password textPassword Password (Numeric) numberPassword E-mail textEmailAddress Phone phone Postal address textPostalAddress 33
33. Views and Widgets Many different views and widgets  Basic views: simple, commonly used views, e.g., TextView, EditText, and Button  Picker views: views for selecting from a list, e.g., TimePicker and DatePicker  List views: views for displaying a long list of items, e.g., Spinner and ListView  Container views: views containing other views, e.g., RadioGroup, GridView, ScrollView, and VideoView. 34
34. 4. RadioGroup and RadioButton  A radio button is specifically used when a single item from a collection of items must be made.  If a radio button is already selected, it will be de-selected when another radio button in the collection is selected. 36
35. Container Views  Containers (view group) for other views, e.g., ● ListView: items displayed in a vertically scrolling list ● GridView: items displayed in a two-dimensional scrolling grid. ● ExpandableListView: extension of a ListView to support two levels ● 37
36. Providing Data to Container Views  Challenge ● Many different data sources, e.g., arrays, collections, and database ● Many different ways of displaying them, e.g., Spinner, ListView, and GridView ● Q: How to bind them together? ● Q: Any design pattern for this? Array List Database 38
37. Adapter  Bind a data source to an container view (AdapterView)  Provides a common interface to the data model behind an AdapterView such as ListView  Responsible for accessing the data to be supplied to a container widget and converting the individual elements of data into a specific view  Behaves as a middleman between the data source and the adapterView. AdapterView >Adapter ListView ArrayAdapter array 39
38. 5. ListView  Display a list of items in a vertically scrolling list  Providing a list of data to display setAdaper(ListAdapter)  ListAdapter: subinterface of Adapter with many subclasses including: ● ArrayAdapter ● BaseAdapter (abstract) ● CursorAdapter (abstract) ● SimpleBaseAdapter ● SimpleCursorAdapter ●  Listener: OnItemSelectedListener 40
39. 5. ListView (Cont.)  Customization ● setChoiceMode(int): none (ListView.CHOICE_MODE_NONE), single, multiple ● setTextFilterEnabled(boolean): let the view filter to match what is typed on the keypad ● setItemChecked(int, boolean)  Storing and retrieving items from strings.xml getResources().getStringArray(R.array.my_array) 41
40. Các bước thực hiện để sử dụng ListView  Bước 1: Đưa dữ liệu cần hiển thị lên ListView vào một mảng hoặc danh sách (ArrayList, mảng thông thường, mảng đối tượng, ).  Bước 2: Tạo một ListView trên giao diện.  Bước 3: Tạo một đối tượng ArrayAdapter để liên kết giữ ListView và mảng hoặc danh sách dữ liệu. ArrayAdapter là gì? ArrayAdapter được hiểu như cái modem mạng. Nó giúp ListView có thể “đọc và hiểu” dữ liệu từ mảng dữ liệu để hiện lên giao diện.
41. Các xử lý trên ListView  Lấy ListView thông qua Id của ListView ListView lvTenLV = (ListView) findViewById(R.id.idcuaListView);  Tạo ArrayAdapter ArrayAdapter [Tên mảng adapter];  Đưa dữ liệu từ mảng vào ArrayAdapter [Tên mảng adapter] = new ArrayAdapter (this,android.R.layout.simple_list_item_1,[tenMangDuLieu]);  Cách đổ dữ liệu lên ListView lvTenLV.setAdapter(tenMangAdapter);