Layout là nơi để tổ chức sắp xếp control/View trên giao diện và thường được sử dụng đầu tiên khi ta thiết kế giao diện. Các Layout này được Android Studio bố trí trong Palette/Layouts:
Trong bài này Tui sẽ trình bày về các layout:
10.1. ConstraintLayout
10.2. Frame Layout
10.3. Linear Layout
10.4. Table Layout
10.5. Relative layout
Dưới đây là các kiến thức chi tiết:
10.1. ConstraintLayout
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:
[code language=”xml”]
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
[/code]
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:
Với Sinh Viên mới học thì nên chọn LinearLayout, sau khi chọn LinearLayout:
LineLayout lại vừa có Horizontal và Vertical, ta có thể bấm chuột phải vào nó để đổi tiếp:
10.2. Frame Layout
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í.
[code language=”xml”]
<FrameLayout android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/h0"
android:id="@+id/imageView3"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/h1"
android:id="@+id/imageView4" />
</FrameLayout>
[/code]
Ta thấy hình h1 khai báo sau nên h1 sẽ chồng nên h0, cả hai hình này đều được neo ở góc top-left của màn hình: 
FrameLayout được sử dụng rất nhiều trong Tabhost
10.3. Linear Layout
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-vertical hoặc ngang-horizontal).
Đố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í.
[code language=”xml”]
<LinearLayout
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/linearLayout1"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
[/code]
Ta thay đổi chiều dọc (android:orientation= “vertical”), chiều ngang (android:orientation= “horizontal”) các View sẽ tự động sắp xếp:
LinearLayout hỗ trợ thuộc tính text android:gravity để căn chỉnh chữ trong View, android:layout_gravity để căn chỉnh vị trí tương đối của View trong layout.
Ngoài ra LinearLayout còn hỗ trợ nhiều thuộc tính khác như android:padding để tăng độ dày của View, android:layout_margin để tăng/giảm khoảng cách giữa các View.
10.4. Table Layout
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:
Dùng stretchColumns để dãn đều các control, các cell (ta thường dùng dấu “*” để cấu hình cho toàn bộ các cột, hoặc nhập số để cấu hình cho cột được chỉ định):
[code language=”xml”]
<TableLayout
android:stretchColumns="*"
android:layout_width="match_parent"
android:layout_height="match_parent">
[/code]
10.5. Relative layout
RelativeLayout cho phép sắp xếp các View theo vị trí tương đối giữa các View khác trên giao diện (kể cả View chứa nó). Thường nó dựa vào Id của các View khác để sắp xếp theo vị trí tương đối. Do đó khi làm RelativeLayout ta phải chú ý là đặt Id của View cho chuẩn xác, nếu sau khi Layout xong mà ta lại đổi Id của các View thì giao diện sẽ bị xáo trộn (do đó nếu đổi ID thì phải đổi luôn các tham chiếu khác sao cho khớp với Id mà ta mới đổi).
Trên giao diện lúc kéo thả các View trên RelativeLayout ta tự căn chỉnh, lúc này các View sẽ tự động sắp xếp theo cách ta kéo thả trên màn hình.
Như vậy là Tui đã trình bày xong một số layout thường dùng trong Android. Việc nắm rõ cách thức hoạt động của layout rất quan trọng, trước khi thiết kế một giao diện, điều đầu tiên là phải nghĩ tới layout trước. Nó giống như khi chúng ta xây dựng một căn nhà, thì phải có bản vẽ kỹ thuật trước vậy.
Các bạn nhớ đọc kỹ lại nhé để hiểu rõ các layout
Bài học sau Tui sẽ trình bày về findViewById và ViewBinding. Một trong những kỹ thuật để truy suất tới các control trên giao diện. Nó rất quan trọng, các bạn chú ý theo dõi nhé
Chúc các bạn thành công!
