Lập trình Android - Bài 4: Layout và các điều khiển cơ bản

2016 Bài 4: Layout và các điều khiển cơ bản 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 Nội dung 2 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 42. Kết nối layout vào Activity Code kết nối Layout vào Activity 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 4. Các kiểu Layout cơ bản  FrameLayout  TableLinearLayout  Layout  RelativeLayout  AbsoluteLayout 6 Các thuộc tính 7  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 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 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 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 Các loại Layout Layout thường sử dụng: RelativeLayout LinearLayout TableLayout GridLayout FrameLayout 11 12 13 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: <FrameLayout xmlns:android="" android:layout_width="match_parent" android:layout_height="match_parent” > 14 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: <ViewFlipper xmlns:android="" android:layout_width="match_parent" android:layout_height="match_parent” > Các phương thức sử dụng: startFlipping setAutoStart showNext showPrevious 15 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: <ScrollView xmlns:android="" android:layout_width="match_parent" android:layout_height="match_parent” > Các phương thức sử dụng: setFillViewPort scrollBy scrollTo smoothScrollBy smoothScrollTo 16 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: <LinearLayout xmlns:android="" android:layout_width="match_parent" android:layout_height="match_parent” android:orientation=“vertical” > LinearLayout 17 18 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: <TableLayout xmlns:android="" android:layout_width="match_parent" android:layout_height="match_parent” > TableLayout 19 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. 20 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: <RelativeLayout xmlns:android="" android:layout_width="match_parent" android:layout_height="match_parent”> 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 22 android:layout_alignParentTop=“true” android:layout_alignParentLeft=“true” android:layout_alignParentStart=“true” android:layout_below=“@id/text1” android:layout_alignLeft=“@id/text1” android:layout_alignStart=“@id/text1” android:layout_toRightOf=“@id/text2” android:layout_alignBottom=“@id/text2” android:layout_below=“@id/button” android:layout_alignLeft=“@id/button” android:layout_alignStart=“@id/button” 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 <GridLayout ... android:columnCount=“2” android:rowCount=“2” android:orientation=“horizontal”> 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 Xem thêm: g-layout.html 25 I. Layout II. Các điều khiển cơ bản 1. Button 2. TextView 3. EditText 4. RadioButton – RadioGroup 5. ListView Nội dung 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 Text Input and Output TextView: primarily for text output EditText: text input and editing by the user using (soft) keyboard TextView EditText View 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  Cách lấy button theo Id của Button  Cách thiết lập sự kiện cho Button 30 1. Button 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 32 2. TextView 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 <EditText ... androd:hint=“email address” android:inputType=“textEmailAddress” /> 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 35 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 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 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? 38 Array List Database 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. 39 ArrayAdapter AdapterView >Adapter ListView array 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 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 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. 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); 44