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.
Để 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.
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.
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)
