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 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

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

2 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 đó

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

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

 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="http://schemas.android.com/apk/res/android" android:layout_width="match_parent "

android:layout_height="match_parent ” >

</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

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

 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í.

17

 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="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"

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

 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 đó.

 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

android:layout_alignLeft=“@id/button” android:layout_alignStart=“@id/button”

 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

used to display a single view.

layout, i.e., position children on top of

each other.

 Xem thêm:

http://developer.android.com/guide/topics/ui/declarin

g-layout.html

25

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 http://developer.android.com/guide/topics/ui/controls.html

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ách lấy button theo Id của Button

 Cách thiết lập sự kiện cho Button

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

2 TextView

3 EditText

Person name textPersonName

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.

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.

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

…

 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.

5 ListView

 Display a list of items in a vertically scrolling list

 Providing a list of data to display

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 <[Kiểu mảng]>[ Tên mảng adapter ];

 Đưa dữ liệu từ mảng vào ArrayAdapter

( this , android.R.layout.simple_list_item_1 ,[ tenMangDuLieu ]);

 Cách đổ dữ liệu lên ListView

lvTenLV.setAdapter(tenMangAdapter);