Custom GridView trong Android

Cũng tương tự như Custom ListView, Custom GridView trong Android là để cải thiện các item trong GirdView. Các item mặc định trong GridView mà Android cung cấp khá đơn điệu và không bắt mắt.

Custom GridView trong Android

Để giải quyết vấn đề trên ta sử dụng Custom GridView. Vậy làm thế nào để Custom GridView trong Android?

1. Custom GridView trong Android là gì?

Custom GridView là thực hiện thiết kế các item cho GridView chứ không sử dụng các item mặc định mà Android cung cấp. Mục đích thiết kế item cho GridView là để giao diện GridView thêm sống động và đẹp mắt.

Sử dụng GridView trong Android với item mặc định tôi đã hướng dẫn ở bài trước. Sau khi đã tìm hiểu khái niệm Custom GridView chúng ta sẽ đi chi tiết hơn qua ví dụ sử dụng Custom GridView trong Android.

2. Ví dụ sử dụng Custom GridView trong Android

Đến với ví dụ sử dụng Custom GridView trong Android tôi có một danh sách các ngôn ngữ lập trình cần hiển thị lên GridView. Tương ứng với mỗi ngôn ngữ là một item trong GridView với Item này tôi không sử dụng item mặc định mà Android cung cấp mà tự thiết kế item theo ý muốn. Và đây là source code ví dụ Custom GridView trong Android.

Link tải: https://mshares.co/file/UyH9lj

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 CustomGridViewExample.

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

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

Custom GridView trong Android

Bước 2: Vào res >> layout >> custom_grid_view_example_activity.xml và thêm vào đoạn code dưới đây. Trong ví dụ sử dụng custom 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"?>
<android.support.constraint.ConstraintLayout 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=".view.CustomGridViewExampleActivity">

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

</android.support.constraint.ConstraintLayout>

Và đây là nội dụng item mà tôi đã custom: res >> layout >> item_custom_grid_view.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:id="@+id/idLinearLayout"
    android:layout_height="80dp"
    android:layout_marginTop="1dp"
    android:background="#FFFFFF"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="120dp"
        android:layout_height="match_parent"
        android:layout_weight="1.0"
        android:gravity="center"
        android:orientation="vertical"
        android:weightSum="1">

        <ImageView
            android:id="@+id/logo"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:contentDescription="@null"
            android:gravity="center"
            android:src="@drawable/icon_java"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1.0"
        android:orientation="vertical"
        android:weightSum="1">
        <TextView
            android:id="@+id/tvLanguageName"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="left|center"
            android:text="ITEM EXAMPLE"
            android:textSize="20dp"
            android:textStyle="bold"/>
    </LinearLayout>

</LinearLayout>

Bước 3: Tạo package com.teamvietdev.customgridviewexample >> model

Tạo lớp Language.java và thêm đoạn code sau đây vào.

package com.teamvietdev.customgridviewexample.model;

public class Language {
    private int id;
    private String name;

    public Language(int id, String name) {
        this.id = id;
        this.name = name;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

Tạo package com.teamvietdev.customgridviewexample >> adapter

Tạo lớp LanguageAdapter.java và thêm đoạn code sau đây vào.

package com.teamvietdev.customgridviewexample.adapter;

import android.content.Context;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

import com.teamvietdev.customgridviewexample.model.Language;
import com.teamvietdev.customgridviewexample.R;

import java.util.List;

public class LanguageAdapter extends BaseAdapter  {
    private Context context;
    private int idLayout;
    private List<Language> listLanguage;
    private int positionSelect = -1;

    public LanguageAdapter(Context context, int idLayout, List<Language> listLanguage) {
        this.context = context;
        this.idLayout = idLayout;
        this.listLanguage = listLanguage;
    }

    @Override
    public int getCount() {
        if (listLanguage.size() != 0 && !listLanguage.isEmpty()) {
            return listLanguage.size();
        }
        return 0;
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

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

    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        if (convertView == null) {
            convertView = LayoutInflater.from(parent.getContext()).inflate(idLayout, parent, false);
        }

        TextView tvLanguageName = (TextView) convertView.findViewById(R.id.tvLanguageName);
        ImageView imageView = (ImageView) convertView.findViewById(R.id.logo);
        final LinearLayout linearLayout = (LinearLayout) convertView.findViewById(R.id.idLinearLayout);
        final Language language = listLanguage.get(position);

        if (listLanguage != null && !listLanguage.isEmpty()) {
            tvLanguageName.setText(language.getName());
           int idLanguage = language.getId();
            switch (idLanguage) {
                case 1:
                    imageView.setImageResource(R.drawable.icon_java);
                    break;
                case 2:
                    imageView.setImageResource(R.drawable.icon_android);
                    break;
                case 3:
                    imageView.setImageResource(R.drawable.icon_javafx);
                    break;
                case 4:
                    imageView.setImageResource(R.drawable.icon_web);
                    break;
                case 5:
                    imageView.setImageResource(R.drawable.icon_ruby);
                    break;
                case 6:
                    imageView.setImageResource(R.drawable.icon_c);
                    break;
                case 7:
                    imageView.setImageResource(R.drawable.icon_php);
                    break;
                case 8:
                    imageView.setImageResource(R.drawable.icon_wordpress);
                    break;
                default:
                    break;
            }
        }
        convertView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(context, language.getName(), Toast.LENGTH_LONG).show();
                positionSelect = position;
                notifyDataSetChanged();
            }
        });

        if (positionSelect == position) {
            linearLayout.setBackgroundColor(Color.BLUE);
        } else {
            linearLayout.setBackgroundColor(Color.WHITE);
        }
        return convertView;
    }

}

Tạo package com.teamvietdev.customgridviewexample >> view

Tạo CustomGridViewExampleActivity.java và thêm đoạn code sau đây vào.

package com.teamvietdev.customgridviewexample.view;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.GridView;

import com.teamvietdev.customgridviewexample.R;
import com.teamvietdev.customgridviewexample.adapter.LanguageAdapter;
import com.teamvietdev.customgridviewexample.model.Language;

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

public class CustomGridViewExampleActivity extends AppCompatActivity {
    private GridView gridView;
    private List<Language> listLanguage;

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

        gridView = (GridView) findViewById(R.id.gridview);

        listLanguage = new ArrayList<>();
        listLanguage.add(new Language(1, "Lập Trình Java"));
        listLanguage.add(new Language(2, "Lập Trình Android"));
        listLanguage.add(new Language(3, "Lập Trình JavaFX"));
        listLanguage.add(new Language(4, "Lập Trình Web"));
        listLanguage.add(new Language(5, "Lập Trình Ruby"));
        listLanguage.add(new Language(6, "Lập Trình C++"));
        listLanguage.add(new Language(7, "Lập Trình PHP"));
        listLanguage.add(new Language(8, "Lập Trình WordPress"));

        LanguageAdapter adapter = new LanguageAdapter(this, R.layout.item_custom_grid_view, listLanguage);
        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.customgridviewexample">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/teamvietdev"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".view.CustomGridViewExampleActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

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

Custom GridView trong Android

Lời kết: Như vậy là tôi đã hoàn thành phần hướng dẫn Custom GridView trong Android. Tiếp theo đây tôi sẽ hướng dẫn Custom Spinner trong Android các bạn nhớ đón xem. 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.

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

Bình luận