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

Bài 4:

Layout và các điều khiển cơ bản

2016

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

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

4

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

 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

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)

 sp: scale-independent pixel

● Same ratio on different devices; recommended

 pt: point

● 1 pt = 1/72" of physical screen size; not recommended

 px: pixel

● Similar to dp for specifying font size; recommended

● 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

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:

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent" android:layout_height="match_parent” >

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:

xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent” >

 Các phương thức sử dụng:

startFlipping setAutoStart showNext showPrevious

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:

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

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:

android:layout_width="match_parent" android:layout_height="match_parent”

xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation=“vertical” >

16

LinearLayout

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:

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent" android:layout_height="match_parent” >

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

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:

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent" android:layout_height="match_parent”>

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

android:layout_alignParentTop=“true” android:layout_alignParentLeft=“true” android:layout_alignParentStart=“true”

android:layout_toRightOf=“@id/text2” android:layout_alignBottom=“@id/text2”

android:layout_below=“@id/text1” android:layout_alignLeft=“@id/text1” android:layout_alignStart=“@id/text1”

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

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

android:columnCount=“2” android:rowCount=“2” android:orientation=“horizontal”>

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

Xem thêm: http://developer.android.com/guide/topics/ui/declarin

g-layout.html

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

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

 Ví dụ: Button, TextView,

từ người dùng cuối.

ImageView, EditText, CheckBox,

RadioButton, RadioGroup, ToggleButton, ProgressBar, …

http://developer.android.com/guide/topics/ui/controls.html

27

Text Input and Output

 TextView: primarily for text output  EditText: text input and editing by the user

using (soft) keyboard

View

TextView

EditText

1. Button

 Button được xây dựng từ TextView. Button cho phép nhận

 Các dạng Button:

• Button

• CompoundButton:

và phản hồi tương tác nhấn từ người dùng.

CheckBox, RadioButton,

ToggleButton, Switch.

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

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

32

3. EditText

Text Field

inputType Property Value

Plain text

none

Person name

textPersonName

Password

textPassword

Password (Numeric) E-mail

numberPassword textEmailAddress

Phone

phone

Postal address

textPostalAddress

androd:hint=“email address” android:inputType=“textEmailAddress” />

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

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

● GridView: items displayed in a two-dimensional scrolling grid.

● ListView: items displayed in a vertically scrolling list

● 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

and GridView

● Many different ways of displaying them, e.g., Spinner, ListView,

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

<>Adapter

AdapterView

ListView

ArrayAdapter

array

39

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

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

tượng,…).

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

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

ArrayAdapter<[Kiểu mảng]>[Tên mảng adapter];

[Tên mảng adapter] = new ArrayAdapter

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

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

lvTenLV.setAdapter(tenMangAdapter);

44