Hướng dẫn Table Layout trong android

Hướng dẫn Table Layout trong android

Rate this post

Trong Android, table layout được sử dụng để sắp xếp nhóm View thành các hàng và cột. Các vùng chứa Bố trí Bảng không hiển thị đường viền cho các cột, hàng hoặc ô của chúng. Một Bảng sẽ có bao nhiêu cột cũng như hàng có nhiều ô nhất.

Hướng dẫn Table Layout trong android

Hàng và Cột trong table layout Android

Một bảng cũng có thể để trống các ô nhưng các ô không thể kéo dài các cột như chúng có thể trong HTML (ngôn ngữ đánh dấu siêu văn bản).

Những điểm quan trọng về table layout trong Android:

  • Để tạo một hàng trong bảng, chúng ta sẽ sử dụng phần tử <TableRow>. Các đối tượng hàng trong bảng là dạng xem con của table layout.
  • Mỗi hàng của bảng có không hoặc nhiều ô và mỗi ô chỉ có thể chứa một đối tượng dạng xem như ImageView, TextView hoặc bất kỳ dạng xem nào khác.
  • Tổng chiều rộng của một bảng được xác định bởi vùng chứa mẹ của nó
  • Cột có thể co dãn và co lại được. Nếu có thể thu nhỏ thì chiều rộng của cột có thể được thu hẹp để phù hợp với bảng vào đối tượng mẹ của nó và nếu có thể co giãn thì nó có thể mở rộng theo chiều rộng để phù hợp với bất kỳ không gian thừa nào có sẵn.

Lưu ý quan trọng: Chúng tôi không thể chỉ định chiều rộng của bố cục con của bảng. Ở đây, chiều rộng luôn khớp với chiều rộng mẹ. Tuy nhiên, thuộc tính chiều cao có thể được xác định bởi một đứa trẻ; giá trị mặc định của thuộc tính chiều cao là nội dung bọc.

Mã bố trí bảng cơ bản trong XML:

<TableLayout xmlns:android=”http://schemas.android.com/apk/res/android”

    android:layout_width=”match_parent”

    android:layout_height=”match_parent”

    android:collapseColumns=”0″> <!– collapse the first column of the table row–>

    <!– first row of the table layout–>

    <TableRow

        android:id=”@+id/row1″

        android:layout_width=”fill_parent”

        android:layout_height=”wrap_content”>

        <!– Add elements/columns in the first row–>

    </TableRow>

</TableLayout>

Các thuộc tính của TableLayout trong Android:

Bây giờ chúng ta hãy thảo luận về một số thuộc tính quan trọng giúp chúng ta định cấu hình table layout trong tệp XML (bố cục).

1. Thuộc tính id: 

id được sử dụng để xác định duy nhất một table layout.

<TableLayout

android: id = “@ + id / simpleTableLayout”

android: layout_width = “match_parent”

android: layout_height = “match_parent />

2. stretchColumns: 

Thuộc tính Stretch column được sử dụng trong Table Layout để thay đổi chiều rộng mặc định của cột được đặt bằng chiều rộng của cột rộng nhất nhưng chúng ta cũng có thể kéo giãn các cột để chiếm không gian trống có sẵn bằng cách sử dụng thuộc tính này. Giá trị được gán cho thuộc tính này có thể là một số cột hoặc danh sách các số cột được phân tách bằng dấu phẩy (1, 2, 3… n).

Nếu giá trị là 1 thì cột thứ hai được kéo dài để chiếm bất kỳ khoảng trống nào có sẵn trong hàng, vì số cột được bắt đầu từ 0.

Nếu giá trị là 0,1 thì cả cột đầu tiên và cột thứ hai của bảng đều được kéo dài để chiếm không gian có sẵn trong hàng.

Nếu giá trị là ‘*’ thì tất cả các cột sẽ được kéo dài để chiếm không gian có sẵn.

Dưới đây là mã ví dụ về thuộc tính cột kéo dài của table layout với giải thích bao gồm trong đó chúng tôi kéo dài cột đầu tiên của bố cục.

<?xml version=”1.0″ encoding=”utf-8″?>

    <TableLayout xmlns:android=”http://schemas.android.com/apk/res/android”

        android:id=”@+id/simpleTableLayout”

        android:layout_width=”match_parent”

        android:layout_height=”match_parent”

        android:stretchColumns=”1″> <!– stretch the second column of the layout–>

        <!– first row of the table layout–>

        <TableRow

            android:id=”@+id/firstRow”

            android:layout_width=”fill_parent”

            android:layout_height=”wrap_content”>

            <!– first element of the row–>

            <TextView

                android:id=”@+id/simpleTextView”

                android:layout_width=”wrap_content”

                android:layout_height=”wrap_content”

                android:background=”#b0b0b0″

                android:padding=”18dip”

                android:text=”Text 1″

                android:textColor=”#000″

                android:textSize=”12dp” />

            <TextView

                android:id=”@+id/simpleTextView”

                android:layout_width=”wrap_content”

                android:layout_height=”wrap_content”

                android:background=”#FF0000″

                android:padding=”18dip”

                android:text=”Text 2″

                android:textColor=”#000″

                android:textSize=”14dp” />

        </TableRow>

    </TableLayout>

Hướng dẫn Table Layout trong android

3. shrinkColumns

Thuộc tính cột thu nhỏ được sử dụng để thu nhỏ hoặc giảm chiều rộng của cột. Chúng tôi có thể chỉ định một cột đơn hoặc một danh sách số cột được phân tách bằng dấu phẩy cho thuộc tính này. Nội dung trong các cột được chỉ định bao bọc từ để giảm chiều rộng của chúng.

Nếu giá trị bằng 0 thì chiều rộng của cột đầu tiên sẽ thu hẹp hoặc giảm đi bằng cách gói nội dung của nó.

Nếu giá trị là 0,1 thì cả cột đầu tiên và cột thứ hai đều được thu nhỏ hoặc giảm đi bằng cách gói nội dung của nó.

Nếu giá trị là ‘*’ thì nội dung của tất cả các cột là từ bao bọc pped để thu nhỏ chiều rộng của chúng.

Dưới đây là mã ví dụ về thuộc tính cột thu nhỏ của table layout có kèm theo giải thích trong đó chúng tôi thu nhỏ cột đầu tiên của bố cục.

<? xml version = “1.0” encoding = “utf-8”?>

<TableLayout xmlns: android = “http://schemas.android.com/apk/res/android”

    android: layout_width = “match_parent”

    android: layout_height = “match_parent”

    android: coColumns = “0”> <! – thu nhỏ cột đầu tiên của bố cục ->

    <! – hàng đầu tiên của table layout ->

    <TableRow

        android: id = “@ + id / firstRow”

        android: layout_width = “fill_parent”

        android: layout_height = “wrap_content”>

             <TextView

            android: layout_width = “wrap_content”

            android: layout_height = “wrap_content”

            android: background = “# b0b0b0”

            android: padding = “18dip”

            android: text = “Ví dụ về Thu nhỏ Cột”

            android: textColor = “# 000”

            android: textSize = “18dp” />

    </TableRow>

</TableLayout>

Hướng dẫn Table Layout trong android

4. collapseColumns

Thuộc tính thu gọn cột được sử dụng để thu gọn hoặc ẩn cột của table layout. Các cột này là một phần của thông tin bảng nhưng vô hình.

Nếu các giá trị là 0 thì cột đầu tiên xuất hiện thu gọn, tức là nó là một phần của bảng nhưng nó ẩn.

Dưới đây là mã ví dụ về thu gọn cột với giải thích bao gồm trong đó chúng tôi thu gọn cột đầu tiên của bảng có nghĩa là cột đầu tiên là một phần của bảng nhưng nó ẩn nên bạn chỉ có thể nhìn thấy cột thứ hai trong ảnh chụp màn hình.

<?xml version=”1.0″ encoding=”utf-8″?>

<TableLayout xmlns:android=”http://schemas.android.com/apk/res/android”

    android:layout_width=”match_parent”

    android:layout_height=”match_parent”

    android:collapseColumns=”0″> <!– collapse the first column of the table row–>

    <!– first row of the table layout–>

    <TableRow

        android:id=”@+id/simpleTableLayout”

        android:layout_width=”fill_parent”

        android:layout_height=”wrap_content”>

        <!– first element of the row that is the part of table but it is invisible–>

        <TextView

            android:layout_width=”wrap_content”

            android:layout_height=”wrap_content”

            android:background=”#b0b0b0″

            android:padding=”18dip”

            android:text=”Columns 1″

            android:textColor=”#000″

            android:textSize=”18dp” />

        <!– second element of the row that is shown in the screenshot–>

        <TextView

            android:layout_width=”wrap_content”

            android:layout_height=”wrap_content”

            android:background=”#b0b0b0″

            android:padding=”18dip”

            android:text=”Columns 2″

            android:textColor=”#000″

            android:textSize=”18dp” />

    </TableRow>

</TableLayout>

Hướng dẫn Table Layout trong android

Ví dụ về TableLayout trong Android Studio:

Dưới đây là ví dụ về table layout trong Android, nơi chúng tôi hiển thị biểu mẫu đăng nhập với hai trường tên người dùng và mật khẩu và một nút đăng nhập và bất cứ khi nào người dùng nhấp vào nút đó, thông báo sẽ được hiển thị bằng cách sử dụng Bánh mì nướng.

Dưới đây, bạn có thể tải xuống mã dự án, xem kết quả cuối cùng và giải thích từng bước về ví dụ:

Hướng dẫn Table Layout trong android

Bước 1: Tạo một dự án mới và đặt tên là TableLayoutExample

Bước 2: res -> layout ->activity_main.xml (or) main.xml và thêm mã sau:

Trong bước này, chúng tôi mở một tệp xml (activity_main.xml) và thêm mã để hiển thị các trường tên người dùng và mật khẩu bằng cách sử dụng textview và edittext với một nút đăng nhập.

<TableLayout xmlns:android=”http://schemas.android.com/apk/res/android”

    android:layout_width=”match_parent”

    android:layout_height=”match_parent”

    android:background=”#000″

    android:orientation=”vertical”

    android:stretchColumns=”1″>

    <TableRow android:padding=”5dip”>

        <TextView

            android:layout_height=”wrap_content”

            android:layout_marginBottom=”20dp”

            android:layout_span=”2″

            android:gravity=”center_horizontal”

            android:text=”@string/loginForm”

            android:textColor=”#0ff”

            android:textSize=”25sp”

            android:textStyle=”bold” />

    </TableRow>

    <TableRow>

        <TextView

            android:layout_height=”wrap_content”

            android:layout_column=”0″

            android:layout_marginLeft=”10dp”

            android:text=”@string/userName”

            android:textColor=”#fff”

            android:textSize=”16sp” />

        <EditText

            android:id=”@+id/userName”

            android:layout_height=”wrap_content”

            android:layout_column=”1″

            android:layout_marginLeft=”10dp”

            android:background=”#fff”

            android:hint=”@string/userName”

            android:padding=”5dp”

            android:textColor=”#000″ />

    </TableRow>

    <TableRow>

        <TextView

            android:layout_height=”wrap_content”

            android:layout_column=”0″

            android:layout_marginLeft=”10dp”

            android:layout_marginTop=”20dp”

            android:text=”@string/password”

            android:textColor=”#fff”

            android:textSize=”16sp” />

        <EditText

            android:id=”@+id/password”

            android:layout_height=”wrap_content”

            android:layout_column=”1″

            android:layout_marginLeft=”10dp”

            android:layout_marginTop=”20dp”

            android:background=”#fff”

            android:hint=”@string/password”

            android:padding=”5dp”

            android:textColor=”#000″ />

    </TableRow>

    <TableRow android:layout_marginTop=”20dp”>

        <Button

            android:id=”@+id/loginBtn”

            android:layout_height=”wrap_content”

            android:layout_gravity=”center”

            android:layout_span=”2″

            android:background=”#0ff”

            android:text=”@string/login”

            android:textColor=”#000″

            android:textSize=”20sp”

            android:textStyle=”bold” />

    </TableRow>

</TableLayout>

Bước 3: Open src -> package -> MainActivity.java

Trong bước này, chúng tôi mở MainActivity và thêm mã để bắt đầu văn bản chỉnh sửa và nút, sau đó thực hiện sự kiện nhấp vào nút và hiển thị thông báo bằng cách sử dụng Bánh mì nướng.

package example.abhiandriod.tablelayoutexample;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.Menu;

import android.view.MenuItem;

import android.view.View;

import android.widget.Button;

import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        // initiate a button

        Button loginButton = (Button) findViewById(R.id.loginBtn);

        // perform click event on the button

        loginButton.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

                Toast.makeText(getApplicationContext(), “Hello AbhiAndroid..!!!”, Toast.LENGTH_LONG).show();  // display a toast message

            }

        });

    }

}

Bước 4: Mở res -> values -> strings.xml

Trong bước này, chúng tôi mở tệp chuỗi được sử dụng để lưu trữ dữ liệu chuỗi của ứng dụng.

<resources>

    <string name=”app_name”>TableLayoutExample</string>

    <string name=”hello_world”>Hello world!</string>

    <string name=”action_settings”>Settings</string>

    <string name=”loginForm”>Login Form</string>

    <string name=”userName”>UserName</string>

    <string name=”password”>Password</string>

    <string name=”login”>LogIn</string>

</resources>

Đầu ra:

Bây giờ hãy chạy Ứng dụng và bạn sẽ thấy Giao diện người dùng của biểu mẫu Đăng nhập mà chúng tôi đã thiết kế trong table layout.

Leave a Reply