Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> Android

Cách làm GridLayout vừa màn hình (fit screen) trên Android

Ví dụ này minh họa cách tạo GridLayout động, tự động tính toán số hàng/cột để vừa màn hình.

Bước 1: Tạo dự án mới

Tạo dự án mới trong Android Studio.

Bước 2: Layout XML (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:id="@+id/tableGrid"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:columnCount="4"
    android:orientation="horizontal"
    tools:context=".MainActivity">
    <Button android:text="1" />
    <Button android:text="2" />
    <Button android:text="3" />
    <Button android:text="4" />
    <Button android:text="5" />
    <Button android:text="6" />
    <Button android:text="7" />
    <Button android:text="8" />
    <Button android:text="9" />
    <Button android:text="10" />
    <Button android:text="11" />
    <Button android:text="12" />
    <Button android:text="13" />
    <Button android:text="14" />
    <Button android:text="15" />
    <Button android:text="16" />
</GridLayout>

Bước 3: MainActivity.java - Tạo Grid động

package com.app.sample;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Gravity;
import android.widget.GridLayout;
import android.widget.ImageView;
import android.widget.TableLayout;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        GridLayout gridLayout = findViewById(R.id.tableGrid);
        gridLayout.removeAllViews(); // Xóa view XML
        
        int totalItems = 12;
        int columnCount = 5;
        int rowCount = (int) Math.ceil((double) totalItems / columnCount);
        
        gridLayout.setColumnCount(columnCount);
        gridLayout.setRowCount(rowCount);
        
        for (int i = 0, c = 0, r = 0; i < totalItems; i++, c++) {
            if (c == columnCount) {
                c = 0;
                r++;
            }
            
            ImageView imageView = new ImageView(this);
            imageView.setImageResource(R.drawable.ic_launcher_background);
            
            GridLayout.LayoutParams params = new GridLayout.LayoutParams();
            params.height = TableLayout.LayoutParams.WRAP_CONTENT;
            params.width = TableLayout.LayoutParams.WRAP_CONTENT;
            params.rightMargin = 8;
            params.topMargin = 8;
            params.setGravity(Gravity.CENTER);
            params.columnSpec = GridLayout.spec(c);
            params.rowSpec = GridLayout.spec(r);
            
            imageView.setLayoutParams(params);
            gridLayout.addView(imageView);
        }
    }
}

Mẹo: Để GridLayout tự co giãn vừa màn hình, có thể set android:layout_width="match_parent" và dùng layout_columnWeight="1" cho các child view (API 21+).

Bước 4: Manifest

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.app.sample">
    <application ...>
        <activity android:name=".MainActivity">...</activity>
    </application>
</manifest>

Chạy ứng dụng

Grid 5 cột, 3 hàng (12 item) hiển thị căn giữa màn hình.

Cách làm GridLayout vừa màn hình (fit screen) trên Android