CÁC LOẠI LAYOUT TRONG ANDROID – VIEW GROUP

I. View, Viewgroup, Layout trong Android

I.1 View, Viewgroup
Các thành phần giao diện xây dựng từ lớp cơ sở
(android.view.View) của Android, các thành phần này cung cấp
sẵn khá đa dạng như Button, TextView, CheckBox ... tất cả chúng
ta gọi nó là View. Sơ đồ các View được mộ tả theo sơ đồ như hình
dưới.
View biểu diễn một hình chữ nhật, trong đó nó hiện thị thông tin
nào đó cho người dùng, và người dùng có thể tương tác với View.
Những loại View cơ bản cần tìm hiểu trước tiên đó là: TextView,
ImageView, Button, ImageButton, EditText
 Các ViewGroup cũng như một phần tử chứa các View con, và
ViewGroup cũng được kế thừa trở thành phần gốc để xây dựng UI
gọi là layout.
I.2 Layout
Layout là thành phần định nghĩa cấu trúc giao diện người dùng hay
nói cách khác là thành phần quyết định đến giao diện của một màn
hình trong ứng dụng Android. Layout hỗ trợ việc căn chỉnh các
widget (Ví dụ: TextView, Button, hay EditText…) như chúng ta thấy
trong các ứng dụng Android.

II. Các loại layout

Android đang hỗ trợ chúng ta 6 loại layout:

 RelativeLayout

 LinearLayout

 GridLayout

 TableLayout

 FrameLayout

 ConstraintLayout.
1. RelativeLayout
RelativeLayout là loại Layout mà trong Layout vị trí của mỗi view
con sẽ được xác định so với view khác hoặc so với thành phần cha của
chúng thông qua ID. Bạn có thể sắp xếp 1 view ở bên trái, bên phải
view khác hoặc ở giữa màn hình.
 1.1 Thuộc tính Gravity

Các View con khi đã định vị xong trong RelativeLayout, giả sử coi
như tất cả các View con nằm vừa trong một đường biên chữ nhật, thì
cả khối các View con này có thể dịch chuyển tới những vị trí nhất
định trong RelativeLayout bằng thuộc tính: android:gravity, nó nhận
các giá trị (có thể tổ hợp lại với ký hiệu | )
Giá trị Ý nghĩa

center Căn ở giữa

top Ở phần trên

bottom Phần dưới

center_horizontal Ở giữa theo chiều ngang

center_vertical Ở giữa theo chiều đứng

left Theo cạnh trái

right Theo cạnh phải

bottom Cạnh dưới

1.2 Định vị view con bằng view cha

Vị trí của View con trong RelativeLayout có thể thiết lập bằng cách
chỉ ra mối liên hệ vị trí với view cha, như căn thẳng cạnh trái View
cha với View con, căn thẳng cạnh phải View cha với View con… Các
thuộc tính thực hiện chức năng này như sau:
Thuộc tính Ý nghĩa

android:layout_alignParentBottom true căn thẳng cạnh dưới view con với cạnh dưới View cha

android:layout_alignParentLeft true căn thẳng cạnh trái view con với cạnh trái View cha

android:layout_alignParentRight true căn thẳng cạnh phải view con với cạnh phải View cha

android:layout_alignParentTop true căn thẳng cạnh trên view con với cạnh trên View cha

android:layout_centerInParent true căn view con vào giữa View cha

android:layout_centerHorizontal true căn view con vào giữa View cha theo chiều ngang

android:layout_centerVertical true căn view con vào giữa View cha theo chiều đứng

1.3 Định vị các view con với nhau bằng thuộc tính liên hệ với nhau

Tất cả các thuộc tính dưới đây cần phải truyền vào một ID @+id/
• android:layout_alignTop – Chỉ định đỉnh của thành phần này
sẽ được canh theo đỉnh của thành phần gọi đến bằng ID.
• android:layout_alignBottom – Chỉ định đáy của thành phần
này sẽ được canh theo đáy của thành phần gọi đến bằng ID.
• android:layout_alignStart – Chỉ định cạnh start của thành
phần này sẽ được canh theo cạnh start của thành phần gọi đến bằng
ID.
• android:layout_alignEnd – Chỉ định cạnh end của thành phần
này sẽ được canh theo cạnh end của thành phần gọi đến bằng ID.
 • android:layout_alignBaseline – Chỉ định baseline của thành
phần này sẽ được canh theo baseline của thành phần gọi đến bằng ID.
Baseline này bạn không nhìn thấy được, dùng để canh chỉnh cho text
hiển thị bên trong widget, do đó sẽ hữu dụng khi canh chỉnh các
TextView với nhau).
• android:layout_above – Chỉ định thành phần này sẽ nằm ở
trên so với thành phần gọi đến bằng ID.
• android:layout_below – Chỉ định thành phần này sẽ nằm dưới
so với thành phần gọi đến bằng ID.
• android:layout_toStartOf – Chỉ định thành phần này sẽ nằm
bên phía start so với thành phần gọi đến bằng ID.
• android:layout_toEndOf – Chỉ định thành phần này sẽ nằm
bên phía end so với thành phần gọi đến bằng ID.
• android:layout_toLeftOf – Chỉ định thành phần này sẽ nằm
bên phía trái so với thành phần gọi đến bằng ID.
• android:layout_toRightOf – Chỉ định thành phần này sẽ nằm
bên phía phải so với thành phần gọi đến bằng ID.

2. LinearLayout

LinearLayout là loại layout sẽ sắp xếp các view theo chiều dọc hoặc
ngang theo thứ tự của các view.

II.1 Thuộc Tính Lực Hấp Dẫn (Gravity)

Mặc định thì các thành phần con bên trong LinearLayout sẽ được
“hút” về start-top theo “lực hấp dẫn” mặc định Thuộc tính
 android:gravity để căn chỉnh các View nằm ở vị trí nào trong
LinearLayout, nó nhận các giá trị (có thể tổ hợp lại với ký hiệu |)

center Căn ở giữa

top Ở phần trên

bottom Phần dưới

center_horizontal Ở giữa theo chiều ngang

center_vertical Ở giữa theo chiều đứng

left Theo cạnh trái

right Theo cạnh phải

bottom Cạnh dưới

Ví dụ android:gravity=”right|center”

II.2 Thuộc Tính Trọng Số (Weight)

Các View con trong LinearLayout có thể gán cho nó một giá trị trọng
số bằng thuộc tính android:layout weight ví dụ như:
android:layout_weight="2"; android:layout_weight="1.5" ... Nếu
View không gán giá trị này coi như nó có trọng số bằng không.
 Trường hợp LinearLayout không sử dụng đến thuộc tính
android:weightSum.

Khi chúng ta muốn các view tự động full màn hình thì sử dụng
android:weightSum.

3. GridLayout

GridLayout của Android đơn giản chỉ là 1 layout dạng lưới và ta có thể
chia các cột và dòng cho cái lưới đó, các view sẽ được dặt vào các ô
trong cái lưới này.
Không giống như hầu hết các lưới ở các bộ công cụ khác, Android
GridLayout không liên kết dữ liệu với các hàng hoặc cột. Thay vào
đó, tất cả mọi thứ được làm với Aligment (căn chỉnh) và sự linh hoạt
được liên kết với các thành phần tự thân của nó. Sự linh hoạt của các
cột được suy ra từ thuộc tính gravity (trọng lực) của các thành phần
bên trong các cột. Nếu mọi thành phần định nghĩa một gravity, cột
được coi là linh hoạt, nếu không cột được coi là không linh hoạt

GridLayouts trong tập tin XML Resource

Một GridLayout được khai báo bên trong thẻ <GridLayout>.

Số dòng và cột trong lưới có thể được khai báo bằng cách sử dụng
thuộc tính android: rowCount và android: columnCount.
Tương tự, hướng hiển thị của GridLayout có thể tùy ý được xác định
thông qua thuộc tính android: orientation.
 Các Views có thể được thêm vào GridLayout bằng cách khai báo các
phần tử bên trong cấu trúc <GridLayout> trong tập tin XML. Nếu
không có giá trị hàng và cột nào được khai báo cho một View thì nó
được định vị tự động bởi lớp GridLayout dựa trên cấu hình của
Layout và vị trí của khung nhìn trong tập tin XML. XML sau đây đặt
bốn nút trong GridLayout, với mỗi View được đặt từ góc trái của ô.
4. TableLayout

Với TableLayout nó sẽ sắp xếp các View con bên trong thành dạng
bảng. Mỗi hàng là một đối tượng view TableRow bên trong
TableRow chứa các View con, mỗi View con này nằm ở vị trí một ô
bảng (cell). Cột / hàng trong bảng bắt đầu từ số 0.
TableLayout 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. Đặc biệt TableLayout lấy dòng có số
lượng View nhiều nhất làm số cột, tức là nếu TableLayout có 3 dòng:
dòng đầu tiên có 2 View, dòng thứ hai có 5 View và dòng cuối cùng
có 4 View thì cột được xác định cho TableLayout này là 5.
 TableLayout cho phép ta Meger(trộn) các ô trong TableRow bằng
cách thiết lập thuộc tính layout_span cho View trong TableRow:

Hay layout_column để di chuyển vị trí của View tới một cột nào đó
trong TableRow:

5. FrameLayout
Framelayout là dạng layout cơ bản nhất khi gắn các view lên layout
này thì nó sẽ luôn giữ các view này ở phía góc trái màn hình và không
cho chúng ta thay đồi vị trí của chúng, các view đưa vào sau sẽ đè lên
view ở trước trừ khi bạn thiết lập transparent cho view sau đó.
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, View khai báo sau sẽ chồng nên View khai báo trước,
có thể sử dụng thuộc tính Gravity để thiết lập lại vị trí.
 1 <FrameLayout android:id="@+id/activity_main"
2 android:layout_width="match_parent"
3 android:layout_height="match_parent>
4     <ImageView
5      android:layout_width="wrap_content"
6      android:layout_height="wrap_content"
7      app:srcCompat="@drawable/h0"
8      android:id="@+id/imageView3"/>
9     <ImageView
10      android:layout_width="wrap_content"
11      android:layout_height="wrap_content"
12      app:srcCompat="@drawable/h1"
13      android:id="@+id/imageView4" />
14 </FrameLayout>

6. ConstrainLayout
Đây là dạng layout mà các view nằm trong đó sẽ được xác định vị trí
tương đối với các view khác. Đây là dạng layout mà Google mới công
bố và được thiết kế để sử dụng hoàn toàn trên công cụ Design của
Android Studio.
Constraint layout dùng để định vị trí tương đối của Một control/View
trên màn hình với các phần tử khác trong layout:
Ta có thể xác định một constraint cho một hay nhiều mặt của một
view bằng chế độ kết nối bất kỳ sau đây:
 Điểm neo nằm trên một View khác.
 Một cạnh của layout.
 Một guideline.
Android cung cấp các loại Constraint sau: Relative positioning,
Margins,Centering positioning,Visibility behavior,Dimension
constraints,Chains. Layout này được áp dụng để thiết kế các màn hình
Responsive không lệ thuộc vào độ phân giải.
Cấu trúc XML của ConstraintLayout được mô tả như sau:
1 <?xml version="1.0" encoding="utf-8"?>
2 <androidx.constraintlayout.widget.ConstraintLayout
3 xmlns:android="http://schemas.android.com/apk/res/android"
4 xmlns:app="http://schemas.android.com/apk/res-auto"
5 xmlns:tools="http://schemas.android.com/tools"
6 android:layout_width="match_parent"
7 android:layout_height="match_parent"
8 tools:context=".MainActivity">
9  
10     <TextView
11      android:layout_width="wrap_content"
12      android:layout_height="wrap_content"
13      android:text="Hello World!"
14      app:layout_constraintBottom_toBottomOf="parent"
15      app:layout_constraintLeft_toLeftOf="parent"
16      app:layout_constraintRight_toRightOf="parent"
17      app:layout_constraintTop_toTopOf="parent"/>
18  
19 </androidx.constraintlayout.widget.ConstraintLayout>

Android Studio còn cung cấp chức năng chuyển đổi từ

ConstraintLayout qua các layout khác (và ngược lại), bằng cách bấm
chuột phải vào Layout bất kỳ/chọn Convert View ==>Chọn layout
đích mà ta muốn chuyển đổi: