Android: Các Layout cơ bản thông dụng

Trong Android có 6 loại Layout cơ bản, nhưng trong đó 4 loại được dùng nhiều nhất, cùng tìm hiểu các loại Layout đó nhé!

1. ConstraintLayout

Một ví dụ cơ bản về sự ràng buộc (phụ thuộc) của các View (Component)

ConstraintLayout là một layout mạnh, khuyến khích bạn dùng nếu có thể vì nó giúp tạo ra các giao diện phức tạp, mềm dẻo (hạn chế tối đa sử dụng các layout lồng nhau). Nó giúp định vị, sắp xếp các View con dựa trên sự ràng buộc liên hệ của các View con với View cha và sự liên hệ ràng buộc giữa các View con với nhau, với cơ chế tạo xích các View, gán trọng số hay sử dụng trợ giúp giao diện với Guideline.

Sự ràng buộc

Mỗi view (hoặc element) trong ConstraintLayout để định vị được chính xác cần tối thiếu 2 ràng buộc, một theo phương ngang (X) và một theo phương đứng (Y)

Phần tử Guideline

Ta có thể một đường kẻ ẩn trong ConstraintLayout nằm ngang hoặc đứng nó như là một View con để các View khác ràng buộc đến nếu muốn. Thêm vào bằng cách:

<android.support.constraint.Guideline
    android:id="@+id/glVertical0.3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.3" />

Trong đó 0.3 là tỉ lệ mà đường kẻ đó sẽ đứng, ở đây là 30% màn hình, theo chiều dọc.

Thiết lập đó là được kẻ ngang bằng thuộc tính: android:orientation="horizontal" đường kẻ đứng android:orientation="vertical

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

<FrameLayout
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“
tools:context=“.MainActivity“ >

<TextView
android:id=“@+id/tvFirst“
android:layout_width=“300dp“
android:layout_height=“300dp“
android:background=“@color/colorAccent“
android:text=“TextView“ />

<TextView
android:id=“@+id/tvSecond“
android:layout_width=“220dp“
android:layout_height=“220dp“
android:background=“@color/colorPrimaryDark“ />

</FrameLayout>

Kết quả thu được cho thấy các TextView luôn ở góc trái màn hình

3. LinearLayout

Linear (Tuyến tính) Layout, gần giống như FrameLayout nhưng cải tiến hơn, có lẽ là loại layout hay được sử dụng nhất vì tính đơn giản của nó. LinearLayout sẽ bố trí các view theo dạng khối và không đè lên nhau. Linear Layout có hai chiều bố trí bố cục là:

• Vertical Orientation – các view bên trong sẽ được sắp xếp theo chiều dọc
• Horizontal Orientation – Tương tự nhưng theo chiều ngang

<LinearLayout
xmlns:android1="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >

<TextView
android:layout_width="80dp"
android:layout_height="80dp"
android:text="1"
android:textColor="#fff"
android:textSize="15pt"
android:textAlignment="center"
android:textStyle="bold"
android:background="@color/colorAccent" />

<TextView
android:layout_width="80dp"
android:layout_height="80dp"
android:text="1"
android:textColor="#fff"
android:textSize="15pt"
android:textAlignment="center"
android:textStyle="bold"
android:background="@color/colorPrimary" />

<TextView
android:layout_width="80dp"
android:layout_height="80dp"
android:text="3"
android:textColor="#fff"
android1:textSize="15pt"
android:textAlignment="center"
android:textStyle="bold"
android:background="#8c0520" />

<TextView
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#efcd21"
android:text="4"
android:textAlignment="center"
android:textColor="#fff"
android:textSize="15pt"
android:textStyle="bold" />
</LinearLayout>

Các TextView được xếp tuyến tính từ trái qua phải theo chiều ngang (android:orientation=”horizontal”)

4. Realative Layout

RelativeLayout là loại Layout mà trong đó 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.

<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”match_parent”
android:layout_height=”match_parent”>

<TextView
android:layout_width=”150dp”
android:layout_height=”50dp”
android:text=”1″
android:textColor=”#fff”
android:id=”@+id/tvBox1″
android:textSize=”10pt”
android:textAlignment=”center”
android:background=”@color/colorAccent” />

<TextView
android:layout_width=”150dp”
android:layout_height=”50dp”
android:text=”2″
android:textColor=”#fff”
android:id=”@+id/tvBox2″
android:textSize=”10pt”
android:textAlignment=”center”
android:layout_toRightOf=”@+id/tvBox1″
android:background=”@color/colorPrimary” />

<TextView
android:layout_width=”150dp”
android:layout_height=”50dp”
android:text=”3″
android:textColor=”#fff”
android:id=”@+id/tvBox3″
android:background=”#8e0917″
android:textSize=”10pt”
android:textAlignment=”center”
android:layout_below=”@+id/tvBox1″ />

<TextView
android:layout_width=”150dp”
android:layout_height=”50dp”
android:text=”4″
android:textColor=”#fff”
android:id=”@+id/tvBox4″
android:textSize=”10pt”
android:textAlignment=”center”
android:background=”#edcb25″
android:layout_below=”@+id/tvBox2″
android:layout_toRightOf=”@+id/tvBox3″ />
</RelativeLayout>

Các View được set vị trí thông qua các thuộc tính (below, RightOf…)

Còn 2 loại Layout khác là TableLayout và GridLayout, nhưng 2 loại này không được sử dụng rộng rãi nên mình sẽ không nêu ở đây. Xin cám ơn mọi người đã đọc hết bài!

Author: CongNPX