Tìm hiểu GridView trong Android

Tiếp theo chuyên mục UI Layout là phần tìm hiểu GridView trong Android. Vậy GridView là gì? Có mấy cách khai báo GridView? Sử dụng GridView như thế nào?

Để tìm hiểu GridView trong Android chúng ta sẽ lần lượt trả lời các câu hỏi. 

1. GridView là gì?

GridView trong Android là một view group, hiển thị các item theo dạng hình lưới và có thể cuộn được theo chiều ngang và chiều dọc.

2. Cú pháp khái báo GridView trong Android

Trong Android GridView được khai báo như sau.

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

3. Các thuộc tính của GridView trong Android

Một số thuộc tính quan trọng của GridView tôi đã liệt kê ở dưới.

Đễ hiểu rõ hơn GridView chúng ta cùng nhau đến với ví dụ sử dụng GirdView trong Android.

4. Ví dụ sử dụng GridView trong Android

Đến với ví dụ sử dụng GridView tôi sẽ cho hiển thị danh sách các ngôn ngữ lập trình. Tôi chia GridView thành 2 cột dựa vào thộc tính android:numColumns. Các bạn có thể download source code ngay bên dưới đây.

Sau đây là 5 bước chuẩn để thực hiện quá trình tạo Project sử dụng GridView trong Android.

Bước 1: Khởi tạo project với tên GridViewExample.

Chọn File >> New >> New Project. Xuất hiện form và đặt tên project GridViewExample sau đó click Finish.

Cấu trúc project GridViewExample như sau.

Bước 2: Vào res >> layout >> grid_view_activity.xml và thêm vào đoạn code dưới đây. Trong ví dụ sử dụng GridView tôi sẽ lấy danh sách ngôn ngữ lập trình đổ vào trong GridView.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.teamvietdev.gridviewexample.GridViewActivity">
    <GridView
        android:id="@+id/gridview"
        android:numColumns="2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </GridView>
</LinearLayout>

Bước 3: Mở file GridViewActivity.java và thêm đoạn code sau đây vào.

package com.teamvietdev.gridviewexample;

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

import java.util.ArrayList;
import java.util.List;

public class GridViewActivity extends AppCompatActivity {

    private GridView gridView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.grid_view_activity);
        gridView = (GridView) findViewById(R.id.gridview);

        final List<String> list = new ArrayList<>();
        list.add("Lập Trình Android");
        list.add("Lập Trình Java");
        list.add("Lập Trình JavaFX");
        list.add("Lập Trình Web");
        list.add("Lập Trình Ruby");
        list.add("Lập Trình C++");
        list.add("Lập Trình PHP");
        list.add("Lập Trình WordPress");

        ArrayAdapter adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, list);
        gridView.setAdapter(adapter);

    }
}

Bước 4: Mở file AndroidManifest.xml và dán đoạn code sau đây vào.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.teamvietdev.gridviewexample">

    <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=".GridViewActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Bước 5: Sau cùng vào res >> values >> strings.xml và dán đoạn code sau đây vào.

<resources>
    <string name="app_name">Grid View Example</string>
</resources>

Kết quả chạy ví dụ sử dụng GridView trong Android như sau.

Lời kết: Như vậy là các bạn đã tìm hiểu GridView trong Android. Tuy nhiên đây chỉ là phần cơ bản về GridView, bởi vậy các item trong GridView nhìn khá đơn điệu và không bắt mắt. Vì lý do đó các bạn cần phải biết Custom GridView trong Android. Ngoài ra các bạn có thể theo dõi thêm các chuyên mục khác tại Team Việt Dev.

Xem thêm các layout khác tại đây.

Sử dụng Linear Layout trong Android

Sử dụng Relative Layout trong Android

Sử dụng Table Layout trong Android

Đang cập nhật…

(Tác giả: Team Việt Dev)