Ths. Lương Trần Hy Hiến Khoa Công Nghệ Thông Tin Trường ... · Sử dụng trong các...

Ths. Lương Trần Hy Hiến

Khoa Công Nghệ Thông Tin

Trường Đại học Sư phạm TP.HCM1

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

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

Code kết nối Layout vào Activity

4

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

FrameLayout

TableLinearLayout

Layout

RelativeLayout

AbsoluteLayout

6

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

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

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

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

Layout thường sử dụng:

RelativeLayout

LinearLayout

TableLayout

GridLayout

FrameLayout

11

12

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>

13

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

android:layout_width="match_parent"

android:layout_height="match_parent” >

</ViewFlipper>

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

▪setAutoStart

▪showNext

▪showPrevious

14

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

android:layout_width="match_parent"

android:layout_height="match_parent” >

</ScrollView>

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

▪scrollBy

▪scrollTo

▪smoothScrollBy

▪smoothScrollTo

15

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

android:layout_width="match_parent"

android:layout_height="match_parent”

android:orientation=“vertical” >

</LinearLayout>

16

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"

android:layout_height="match_parent” >

<Tablerow>

<Button/>

</Tablerow>

</TableLayout>

18

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

Ví dụ khai báo:

<RelativeLayout

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

android:layout_width="match_parent"

android:layout_height="match_parent”>

</RelativeLayout>

20

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”

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

<TextView ../> <TextView.../> <TextView…/> </TextVIew …/>

</GridLayout>

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

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

26

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

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

TextView: primarily for text output

EditText: text input and editing by the user using

(soft) keyboard

TextView

EditText

View

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

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

Text Field inputType Property Value

Plain text none

Person name textPersonName

Password textPassword

Password (Numeric) numberPassword

E-mail textEmailAddress

Phone phone

Postal address textPostalAddress

32

<EditText ...

androd:hint=“email address”

android:inputType=“textEmailAddress” />

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.

33

34

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.

35

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

…

36

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?

37

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.

38

ArrayAdapter

AdapterView <<interface>>Adapter

ListView array

Display a list of items in a vertically scrolling list Providing a list of data to displaysetAdaper(ListAdapter)

ListAdapter: subinterface of Adapter with many subclasses including: ArrayAdapter<T>

BaseAdapter (abstract)

CursorAdapter (abstract)

SimpleBaseAdapter

SimpleCursorAdapter

…

Listener: OnItemSelectedListener

39

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)

40

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.

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

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

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

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

lvTenLV.setAdapter(tenMangAdapter);

43