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.
Thuộc tính | Mô tả |
---|---|
android:id | ID là duy nhất để nhận diện Layout |
android:columnWidth | Chỉ định chiều rộng cố định cho mỗi cột, đơn vị tính có thể là px, dp, sp, in hoặc mm. |
android:gravity | Chỉ định gravity trong mỗi ô, giá trị có thể là trên cùng, dưới cùng, bên trái, bên phải, giữa, center_vertical, center_horizontal… |
android:horizontalSpacing | Xác định khoảng cách ngang mặc định giữa các cột. đơn vị tính có thể là px, dp, sp, in hoặc mm. |
android:numColumns | Xác định số cột cần hiển thị trên màn hình. android:numColumns được sử dụng nhiều trong GridView. |
android:verticalSpacing | Xác định khoảng cách dọc mặc định giữa các cột. đơn vị tính có thể là px, dp, sp, in hoặc mm. |
Đễ 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)