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

Nội dung của bài giảng trình bày về cách tạo một Layout mới, kết nối layout vào Activity, HierarchyViewer, các thuộc tính của layout và các loại layout cơ bản, các phương thức sử dụng layout, các kiểu Layout cơ bản và các điều khiển cơ bản.

Bài 4: Layout điều khiển 2016 Nội dung I Layout Cách tạo Layout Kết nối layout vào Activity HierarchyViewer Các kiểu Layout II Các điều khiển Cách tạo Layout Chọn File  New  Android XML File Linear Layout (layout bạn muốn tạo – bạn chọn Relative Layout, Table Layout, …) Kết nối layout vào Activity Code kết nối Layout vào Activity HierarchyViewer  Một Layout phải kết nối vào Activity thơng qua hàm setContentView, Android có chế dịch XML thành Java code  HierarchyViewer dùng để hiển thị cấu trúc UI hình emulator thiết bị thật Các kiểu Layout  FrameLayout  TableLinearLayout  Layout  RelativeLayout  AbsoluteLayout 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 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 ● 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 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 ● pt = 1/72" of physical screen size; not recommended  px: pixel ● Actual pixel of screen; not recommended 10 Button  Cách lấy button theo Id Button  Cách thiết lập kiện cho Button 30 TextView TextView đối tượng cho phép hiển thị nội dung văn dạng:  Normal: dạng văn kích thước font chữ mặc đinh  SmallText: dạng văn kích thước font chữ nhỏ  MediumText: dạng văn kích thước font chữ vừa  LargeText: dạng văn kích thước font chữ to 31 TextView 32 EditText Text Field Plain text inputType Property Value none Person name Password Password (Numeric) E-mail textPersonName textPassword numberPassword textEmailAddress Phone Postal address phone textPostalAddress 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 35 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? Array List Database … 38 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 ListView Adapter ArrayAdapter array 39 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 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 để sử dụng ListView  Bước 1: Đưa liệu cần hiển thị lên ListView vào mảng danh sách (ArrayList, mảng thông thường, mảng đối tượng,…)  Bước 2: Tạo ListView giao diện  Bước 3: Tạo đối tượng ArrayAdapter để liên kết giữ ListView mảng danh sách liệu ArrayAdapter gì? ArrayAdapter hiểu modem mạng Nó giúp ListView “đọc hiểu” liệu từ mảng liệu để lên giao diện Các xử lý ListView  Lấy ListView thông qua Id ListView ListView lvTenLV = (ListView) findViewById(R.id.idcuaListView);  Tạo ArrayAdapter ArrayAdapter[Tên mảng adapter];  Đưa 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 đổ liệu lên ListView lvTenLV.setAdapter(tenMangAdapter); 44 ...Nội dung I Layout Cách tạo Layout Kết nối layout vào Activity HierarchyViewer Các kiểu Layout II Các điều khiển Cách tạo Layout Chọn File  New  Android XML File Linear Layout (layout bạn muốn... http://developer .android. com/guide/topics/ui/declarin g -layout. html 25 Nội dung I Layout II Các điều khiển Button TextView EditText RadioButton – RadioGroup ListView 26 II Các điều khiển  Các điều khiển. .. 21 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”