Android Layouts: Linear Layout, Relative Layout and Table Layout - CTW

Trong bài này tôi sẽ giới thiệu về những view layout khác nhau một ứng dụng android. Có 6 view layout khác nhau là:

Linear Layout
Relative Layout
Table Layout
GridView
Tab Layout
ListView

Android cho phép bạn tạo những view layout bằng các sử dụng những file XML đơn giản(Chúng ta vẫn có thể tạo những view layout bằng java code). Tất cả layout phải được đặt trong thư mục /res/layout

Ok, chúng ta sẽ bắt đầu với từng loại view layout cơ bản!

Tóm Tắt

1. Linear Layout

Ở trong một linear layout, như tên gọi của nó, tất cả các phần tử sẽ hiển thị trên một dòng(chiều từ trên xuống hoặc từ trái sang phải, bên dưới là một ví dụ về linear layout), thuộc tính theo chiều ngang(Horizontally) hay chiều dọc(Vertically) được định nghĩa trong thuộc tính (attribute) android:orientation của một LinearLayout.

Khai báo cho một Vertical layout:

<LinearLayout android:orientation="vertical"> .... </LinearLayout>

Khai báo cho một Horizontal layout:

<LinearLayout android:orientation="horizontal"> .... </LinearLayout>

Giờ chúng ta đã biết về 2 loại của LinearLayout, giờ cùng khởi tạo ví dụ:

Chúng ta sẽ tạo ra một màn hình giống như thế này:

Ở trong project bạn đã khởi tạo
Để project ở dạng android view. Click chuột phải vào thư mục res/layout tạo mới một file XML với tên mà bạn chọn. Ở đây mình đặt tên là “linear_layout.xml” với Root element là LinearLayout
res/layout -> Chuột phải -> New -> Layout resource file

Mở file XML vừa mới tạo(trong trường hợp của tôi là linear_layout.xml), chọn chế độ Text và viết code như bên dưới:

<?xml version="1.0" encoding="utf-8"?>
<!-- Layout cha là một LinearLayout theo chiều dọc -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="5dip"
        android:text="Email:"/>

    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dip"/>

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Login"/>

    <!-- Layout con là một LinearLayout ngang -->
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="25dip"
        android:background="#434343"
        android:orientation="horizontal">

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:padding="15dip"
            android:text="Home"
            android:textColor="#FFF"/>

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:padding="15dip"
            android:text="About"
            android:textColor="#FFF"/>

    </LinearLayout>
    
</LinearLayout>

Để thiết lập giao diện bạn mới tạo là giao diện cho ứng dụng khi app khởi chạy, mở file MainActivity.java. Bạn sẽ thấy một đoạn code viết hàm onCreate có đoạn setContentView(R.layout.main) hãy thay R.layout.main bằng tên file layout của bạn. Trong trường hợp của của chúng ta là R.layout.linear_layout
```
package io.codetheworld.androidsqlite;
import android.app.Activity;
import android.os.Bundle;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.linear_layout);
    }
}
```
Để khởi chạy ứng dụng, bạn cần đảm bảo Android Studio của bạn đã kết nói với device test hoặc máy ảo android. Các nhấn nút Run màu xanh hoặc nhấn Shift + F10.

2. Relative Layout

Trong một RelativeLayout vị trí của mọi phần tử đều phụ thuộc “tương đối” vào một phần tử khác hoặc phần tử cha.
Chúng ta xem xét ví dụ bên dưới: Nút vị trí của nút “Cancel” phụ thuộc tương đối vào vị trí của nút “Login” , cụ thể là “luôn ở bên phải”

In a relative layout every element arranges itself relative to other elements or a parent element.
As an example, lets consider the layout defined below. The “Cancel” button is placed relatively, to the right of the “Login” button parallely. Here is the code snippet that achieves the mentioned alignment (Right of Login button parallely)

Chúng ta sẽ viết code để thực hiện tạo layout trên!

Ở trong project bạn đã khởi tạo
Để project ở dạng android view. Click chuột phải vào thư mục res/layout tạo mới một file XML với tên mà bạn chọn. Ở đây mình đặt tên là “relative_layout.xml” với Root element là RelativeLayout
res/layout -> Chuột phải -> New -> Layout resource file

Mở file XML vừa mới tạo(trong trường hợp của tôi là relative_layout.xml), chọn chế độ Text và viết code như bên dưới:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content">

    <TextView
        android:id="@+id/label"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Email"/>

    <EditText
        android:id="@+id/inputEmail"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/label"/>

    <Button
        android:id="@+id/btnLogin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/inputEmail"
        android:layout_marginRight="10px"
        android:text="Login"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/btnLogin"
        android:layout_toRightOf="@id/btnLogin"
        android:text="Cancel"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="Register new Account"/>
</RelativeLayout>

Giống như ví dụ ở trên bạn thay nội dung trong file MainActivity.java để hiển thị giao diện bạn mới khởi tạo. Trong trường hợp của chúng ta là R.layout.relative_layout
```
setContentView(R.layout.relative_layout);
```
Để khởi chạy ứng dụng, bạn cần đảm bảo Android Studio của bạn đã kết nói với device test hoặc máy ảo android. Các nhấn nút Run màu xanh hoặc nhấn Shift + F10.

3. Table Layout

TableLayout trong Android có cách thức làm việc giống như table trong HTML. Bạn có thể định nghĩa layout bằng những dòng và cột. Nó tương đối dễ để hiểu. Ảnh bên dưới mô tả ý tưởng của TableLayout trong android

Chúng ta sẽ thực hành tạo một layout như hình này:

Ở trong project bạn đã khởi tạo
Để project ở dạng android view. Click chuột phải vào thư mục res/layout tạo mới một file XML với tên mà bạn chọn. Ở đây mình đặt tên là “table_layout.xml” với Root element là TableLayout
res/layout -> Chuột phải -> New -> Layout resource file

Mở file XML vừa mới tạo(trong trường hợp của tôi là relative_layout.xml), chọn chế độ Text và viết code như bên dưới:

<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:shrinkColumns="*"
    android:stretchColumns="*">
    <!-- Dòng một với một cột đơn -->
    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_span="3"
            android:background="#b0b0b0"
            android:padding="18dip"
            android:text="Row 1"
            android:textColor="#000"
            android:textSize="18dp"/>
    </TableRow>

    <!-- Dòng 2 với 3 cột -->
    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/TextView01"
            android:layout_weight="1"
            android:background="#dcdcdc"
            android:gravity="center"
            android:padding="20dip"
            android:text="Row 2 column 1"
            android:textColor="#000000"/>

        <TextView
            android:id="@+id/TextView02"
            android:layout_weight="1"
            android:background="#d3d3d3"
            android:gravity="center"
            android:padding="20dip"
            android:text="Row 2 column 2"
            android:textColor="#000000"/>

        <TextView
            android:id="@+id/TextView03"
            android:layout_weight="1"
            android:background="#cac9c9"
            android:gravity="center"
            android:padding="20dip"
            android:text="Row 2 column 3"
            android:textColor="#000000"/>
    </TableRow>

    <!-- Dòng 3 với 2 cột -->
    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal">

        <TextView
            android:id="@+id/TextView04"
            android:layout_weight="1"
            android:background="#b0b0b0"
            android:gravity="center"
            android:padding="20dip"
            android:text="Row 3 column 1"
            android:textColor="#000000"/>

        <TextView
            android:id="@+id/TextView05"
            android:layout_weight="1"
            android:background="#a09f9f"
            android:gravity="center"
            android:padding="20dip"
            android:text="Row 3 column 2"
            android:textColor="#000000"/>
    </TableRow>

</TableLayout>

Giống như ví dụ ở trên bạn thay nội dung trong file MainActivity.java để hiển thị giao diện bạn mới khởi tạo. Trong trường hợp của chúng ta là R.layout.table_layout
Để khởi chạy ứng dụng, bạn cần đảm bảo Android Studio của bạn đã kết nói với device test hoặc máy ảo android. Các nhấn nút Run màu xanh hoặc nhấn Shift + F10.

Chúng ta đã tìm hiểu về Linear Layout, Relative Layout và Table Layout trong bài viết này. Còn lại Grid View, Tab Layout và List View chúng ta sẽ tiếp tục tìm hiểu trong các bài viết tiếp theo!

Android Layouts: Linear Layout, Relative Layout and Table Layout – CTW

1. Linear Layout

2. Relative Layout

3. Table Layout

Bài viết liên quan:

mtoplist