Cách tạo bố cục GridView trong ứng dụng Android

Giới thiệu

Ví dụ này minh họa cách tạo bố cục GridView hiển thị danh sách số kèm hình ảnh trong ứng dụng Android.

Các bước thực hiện

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

Mở Android Studio, chọn File → New Project và điền thông tin cần thiết.

Bước 2: Thiết kế giao diện chính (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <GridView
        android:id="@+id/gridView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="2"/>

</RelativeLayout>

Bước 3: Thêm dependency (build.gradle Module: app)

implementation 'com.android.support:gridlayout-v7:28.0.0'

Bước 4: Viết code MainActivity.java

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    GridView gridView;
    String[] numberInWords = {"One","Two","Three","Four","Five",
                              "Six","Seven","Eight","Nine","Ten"};
    int[] numberImage = {R.drawable.one, R.drawable.two, R.drawable.three,
                         R.drawable.four, R.drawable.five, R.drawable.six,
                         R.drawable.seven, R.drawable.eight, R.drawable.nine,
                         R.drawable.ten};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        gridView = findViewById(R.id.gridView);
        MainAdapter mainAdapter = new MainAdapter(this, numberInWords, numberImage);
        gridView.setAdapter(mainAdapter);

        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(getApplicationContext(), 
                    "Bạn đã nhấn: " + numberInWords[position], 
                    Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Bước 5: Tạo Adapter (MainAdapter.java)

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

class MainAdapter extends BaseAdapter {
    private Context context;
    private LayoutInflater layoutInflater;
    private String[] numbersInWords;
    private int[] numberImage;

    public MainAdapter(Context c, String[] numbersInWords, int[] numberImage) {
        context = c;
        this.numberImage = numberImage;
        this.numbersInWords = numbersInWords;
    }

    @Override
    public int getCount() {
        return numbersInWords.length;
    }

    @Override
    public Object getItem(int position) {
        return numbersInWords[position];
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (layoutInflater == null) {
            layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        }
        if (convertView == null) {
            convertView = layoutInflater.inflate(R.layout.rowitem, null);
        }
        
        ImageView imageView = convertView.findViewById(R.id.imageView);
        TextView textView = convertView.findViewById(R.id.textView);
        
        imageView.setImageResource(numberImage[position]);
        textView.setText(numbersInWords[position]);
        
        return convertView;
    }
}

Bước 6: Tạo layout item (res/layout/rowitem.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="24sp"
    android:gravity="center">

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:id="@+id/imageView" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView"
        android:text="Numbers"
        android:textSize="24sp"
        android:layout_marginTop="8dp" />

</LinearLayout>

Bước 7: Cấu hình AndroidManifest.xml

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>
</manifest>

Chạy ứng dụng

Chuẩn bị 10 hình ảnh (one.png đến ten.png) trong thư mục drawable. Kết nối thiết bị, nhấn Run.