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 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.
Các bài viết liên quan:
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″>
<TableRow
android:id=”@+id/row1″
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”>
</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″>
<TableRow
android:id=”@+id/firstRow”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”>
<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>
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>
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″>
<TableRow
android:id=”@+id/simpleTableLayout”
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=”Columns 1″
android:textColor=”#000″
android:textSize=”18dp” />
<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>
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ụ:
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.
