Bài giảng Lập trình Android - Bài 4: Layout và các điều khiển cơ bản
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.24 MB, 44 trang )
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)
● 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
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=" />android:layout_width="match_parent"
android:layout_height="match_parent” >
</FrameLayout>
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:
android:layout_height="match_parent” >
</ViewFlipper>
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=" />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
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_height="match_parent”
android:orientation=“vertical” >
</LinearLayout>
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:
android:layout_height="match_parent” >
<Tablerow>
<Button/>
</Tablerow>
</TableLayout>
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:
android:layout_height="match_parent”>
</RelativeLayout>
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_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”
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:rowCount=“2”
android:orientation=“horizontal”>
<TextView ../> <TextView.../> <TextView…/> </TextVIew …/>
</GridLayout>
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:
/>g-layout.html
25
