Các thành phần giao diện | Đại học Ngoại Ngữ - Tin Học Thành Phố Hồ Chí Minh

KHÓA LẬP TRÌNH ANDROID CƠ BẢN HOWKTEAM.COM 1 | 17 Bài 5: C ÁC THÀNH PHẦN GIAO DIỆN (UI) CƠ BẢN
Xem bài học trên website để ủng hộ Kteam: Các thành phần giao diện (UI) cơ bản
Mọi vấn đề về lỗi website làm ảnh hưởng đến bạn hoặc thắc mắc, mong muốn khóa học mới,
nhằm hỗ trợ cải thiện Website. Các bạn vui lòng phản hồi đến Fanpage How Kteam nhé! Dẫn nhập
Ở bài trước chúng ta đã được tìm hiểu về cách debug (gỡ lỗi) chương trình
Android bằng Android Studio. Thật ra là cũng chỉ sơ lược được về các lỗi
thường gặp và cách xử lý chung nhất mà thôi, còn trong quá trình làm việc sẽ
có vô số lỗi mà mình không thể tổng quát hết.
Mà thôi, lần này chúng ta sang bài học mới. Trước khi sang bài mới, đề nghị
các bạn chuẩn bị kiểm tra miệng. . à quên, kiểm tra mắt: Ở phần kết luận trong
bài HƯNG DN DEBUG CƠ BN mình có đề cập đến việc tại sao nút khai
báo ở ví dụ phần 2 (gỡ bug) lại không hiển thị.
Vậy thì hôm nay chúng ta sẽ giải quyết nó. Quẫy thôi! Nội dung
Để có thể thực hành bài này trôi chảy, các bạn cần phải nắm chắc: 
HƯNG DN DEBUG CƠ BN
Ngoài ra ở bài này các bạn sẽ được biết về:  Các loại "View". 
Phân biệt giữa "View" và "ViewGroup"  Drawable.  Themes. Copyright © Howkteam.com
KHÓA LẬP TRÌNH ANDROID CƠ BẢN HOWKTEAM.COM 2 | 17 
Cách lắp các View vào màn hình. View
View là gì? View đơn giản là một thành phần hiển thị trên màn hình.  M t ộ cái nút (Button) là m t ộ View. 
Một cái thanh kéo (SeekBar) cũng là một “View”: Copyright © Howkteam.com
KHÓA LẬP TRÌNH ANDROID CƠ BẢN HOWKTEAM.COM 3 | 17
Vậy chúng ta có thể phán chắc nịch luôn: Cái gì hiển thị trên màn hình thì nó là View.
Trong Android có rất nhiều loại View, phù hợp nhiều nhu cầu. Bản thân lập
trình viên cũng có thể tự tạo ra view của riêng mình bằng cách code các lớp
Java extends từ lớp View. Tí nữa ở cuối bài biết đâu sẽ có ví dụ, hí hí.
Một số loại View tiêu biểu là (mình lấy ví dụ ở bản Android 6.0 mới): 
TextView: Hiển thị chữ. Có thể thay đổi n i
ộ dung chữ, màu sắc, kích cỡ,
kiểu đậm/gạch chân,… 
Button: Nút. Có thể thay đổi độ r n
ộ g, cao, màu nền nút, kiểu viền, đổ bóng,… 
Switch: Công tắc. Có 2 chế độ gạt qua gạt lại như chơi điện tử, nhưng mà chỉ trái-phải thôi. 
EditText: Trường nhập văn bản. Là một ô nhập văn bản. Văn bản ở
EditText có thể là 1 hay nhiều dòng, có thể cài đặt đầu vào chỉ được
nhập số, nhập chữ hay nhập dạng mật khẩu. Copyright © Howkteam.com
KHÓA LẬP TRÌNH ANDROID CƠ BẢN HOWKTEAM.COM 4 | 17 
SeekBar: Thanh kéo. Sử dụng khi người dùng muốn thao tác gì đó về
biên độ / độ lớn bằng tay.
Các View có những thuộc tính khác nhau, gọi là các attributes.
Ví dụ như EditText thì có attributes là maxLength (số ký tự tối đa) và maxLines
(số dòng tối đa). TextView thì có fontSize (cỡ chữ) và inputType (kiểu nhập: số / chữ / email,…).
Tuy nhiên các View đều có một số attributes chung như: 
Layout_width: Độ dài chiều ngang của View. Có thể là con số cụ thể
hoặc là wrap_content (Bao đủ nội dung bên trong thì thôi), hay
match_parent (bằng với chiều ngang của View chứa nó). 
Layout_height: Độ dài chiều dọc của View. Có thể là con số cụ thể hoặc
là wrap_content (Bao đủ nội dung bên trong thì thôi), hay match_parent (bằng với chiều d c ọ của View chứa nó). 
ID: Cái này rất quan tr n ọ g, m i ỗ m t
ộ View trong một layout đều được
gắn với một định danh (id) này để gắn chức năng với code Java ở trong.
Sẽ được đề cập kỹ hơn ở phần sau. ViewGroup
Về bản chất, Viewgroup cũng là một View (Extends từ class View), nhưng cái
khác là nó có thể chứa được các View khác bên trong.
Các ViewGroup thường sử dụng: Copyright © Howkteam.com
KHÓA LẬP TRÌNH ANDROID CƠ BẢN HOWKTEAM.COM 5 | 17 LinearLayout
Quá nổi tiếng, được sử dụng rất nhiều. Các View con cấp 1 trong Layout này
sẽ được sắp xếp chỉ theo 1 hướng: Dọc hoặc ngang (Vertical / Horizontal), chỉ
định bằng thuộc tính android:orientation. Ví dụ:
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.howkteam.helloworld.MainActivity">
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello K-Team!"/>
style="@style/Widget.AppCompat.SeekBar.Discrete"
android:layout_width="match_parent"
android:layout_height="wrap_content" android:max="10" android:progress="3"
android:id="@+id/seekBar"/>
Ta sẽ được kết quả là một màn hình với một nút và một seekbar trên dưới: Copyright © Howkteam.com
KHÓA LẬP TRÌNH ANDROID CƠ BẢN HOWKTEAM.COM 6 | 17
Trong LinearLayout nhiều khả năng là bạn sẽ thấy có các thuộc tính sau hay được dùng: 
Android:gravity: Căn lề của nội dung của View (hướng nội, giống thuộc
tính text-align trong CSS). 
Android:layout_gravity: Căn lề hướng ngoại, so với ViewGroup chứa nó, giống thu c ộ tính float trong CSS. 
Android:layout_weight: Tỉ lệ của view đó so với view mẹ. Mặc đinh
view mẹ nếu không đặt thu c
ộ tính weight_sum thì sẽ là 1 và view con
sẽ có tỉ lệ nằm trong khoảng từ 0 đến 1 (chấp nhận số thập phân). RelativeLayout
Khác với LinearLayout, RelativeLayout và các Layout con của nó hiển thị bằng
các quan hệ với các layout trong cùng một layout mẹ, hoặc với chính layout mẹ. 
Vị trí dựa trên quan hệ: layout_above, layout_below, layout_toLeftOf, layout_toRightOf 
Vị trí dựa trên layout mẹ: android:layout_centerHorizontal, android:layout_centerVertical 
Căn chỉnh dựa trên quan hệ: layout_alignTop, layout_alignBottom,
layout_alignLeft, layout_alignRight, layout_alignBaseline 
Căn chỉnh dựa trên layout mẹ: layout_alignParentTop,
layout_alignParentBottom, layout_alignParentLeft, layout_alignParentRight Copyright © Howkteam.com
KHÓA LẬP TRÌNH ANDROID CƠ BẢN HOWKTEAM.COM 7 | 17 Ví dụ:
android:layout_width="match_parent"
android:layout_height="wrap_content"> android:id="@+id/label"
android:layout_width="match_parent"
android:layout_height="wrap_content" android:text="Email"/> android:id="@+id/inputEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/label"/> android:id="@+id/btnLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/inputEmail"
android:layout_alignParentLeft="true"
android:layout_marginRight="5dp" android:text="Login"/>
Với đoạn code trên, chúng ta sẽ có: 
EditText luôn nằm dưới TextView. 
Button luôn nằm dưới E
ditText có ID là inputEmail và căn bên trái so
với layout mẹ là RelativeLayout bao ngoài.
Tiếp theo, giả sử chúng ta có 2 button với kích cỡ khác nhau như sau do nội
dung bên trong hoàn toàn khác: Copyright © Howkteam.com
KHÓA LẬP TRÌNH ANDROID CƠ BẢN HOWKTEAM.COM 8 | 17 XML Code:
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity"> android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1245678901234567890"/> android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@id/button1"
android:layout_below="@id/button1"
android:text="CANCEL IT"/> Copyright © Howkteam.com
KHÓA LẬP TRÌNH ANDROID CƠ BẢN HOWKTEAM.COM 9 | 17
Để 2 nút này có độ dài ngang bằng nhau, chúng ta sẽ khiến cho nút thứ 2 căn
lề phải theo nút thứ nhất bằng cách thêm code vào attributes cho button thứ 2:
android:layout_alignRight="@id/button1" Kết quả là:
Bằng cách này, 2 thành phần sẽ được sắp xếp theo chiều dọc trên dưới, 2 lề
trái phải sẽ tự điều chỉnh chiều rộng của 2 Button. FrameLayout
FrameLayout là dạng layout rất đơn giản: Tất cả những view nằm trong đều
được nhồi nhét phía trong nó. Và nếu bạn cần một layout sắp xếp theo trục
tọa độ Z (giống z-index trong CSS) thì đây chính là lựa chọn phù hợp cho bạn. Ví dụ:
android:id="@+id/frame_layout"
android:layout_widt ="match_paren h t"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"> android:id="@+id/child1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="Image" Copyright © Howkteam.com
KHÓA LẬP TRÌNH ANDROID CƠ BẢN HOWKTEAM.COM 10 | 17
android:src="@mipmap/ic_launcher" /> android:id="@+id/child2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Child 2"
android:layout_gravity="top|left" /> android:id="@+id/child3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Child 3"
android:layout_gravity="top|right" />
Kết quả: Chúng ta sẽ có một ImageView với kích thước lấp đầy
FrameLayout, và 2 TextView đè lên ImageView đó. Và nếu 2 TextView ở trên
cùng một vị trí thì TextView có id child3 sẽ đè lên child2. Drawables là gì? Copyright © Howkteam.com