Lập Trình Android - GridView

GridView trong android

GridView trong Android hiển thị các item trong mảng lưới hai chiều có thể scroll và các item này không cần thiết phải được định nghĩa trước. GridView hoàn toàn tương tự như ListView, dữ liệu được đưa vào GridView thông qua các mảng 1 chiều và dựa vào số cột của GridView để ngắt số hàng và cột nhưng dựa vào số cột ta thiết lập mà nó tự động ngắt hàng. GridView có thể hiển thị Text hoặc hình ảnh.

GridView code Trong XML:

<GridView android:id="@+id/simpleGridView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:numColumns="3"/>

Một số thuộc tính thường dùng của GridView.

Bây giờ chúng xem một số thuộc tính hay sử dụng trong GridViewtrong tập tin XML

1. android:id: Là thuộc tính duy nhất của GridView.

<GridView android:id="@+id/simpleGridView" android:layout_width="fill_parent" android:layout_height="wrap_content" />

Dựa vào Id ta sẽ lấy được control theo đúng Id này, xem code bên dưới để biết cách lấy control theo Id:

GridView simpleGridView = (GridView) findViewById(R.id.simpleGridView);

2. android:numColumns: Thuộc tính xác định có bao nhiêu cột để hiển thị. Giá trị là số nguyên hoặc auto_fit. Giá trị auto_fit thường để sử dụng tạo tự động số cột tùy theo kích thước màn hình. Ví dụ sau chúng ta hiển thị GridView có 4 cột

<!-- numColumns example code --> <GridView android:id="@+id/simpleGridView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:numColumns="4"/> <!-- numColumns set to 4-->

3. android:horizontalSpacing: Định nghĩa khoảng cách mặc định theo chiều ngang giữa các cột. Có thể là trong px, dp, sp... Ví dụ sau chúng ta thiết lập khoảng cách giữa các cột là 50dp

<!--Horizontal space example code in grid view-->> <GridView android:id="@+id/simpleGridView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:numColumns="3" android:horizontalSpacing="50dp"/><!--50dp horizontal space between grid items-->

4. android:verticalSpacing: Định nghĩa khoảng cách mặc định theo chiều dọc giữa các hàng. Có thể là trong px, dp, sp.. Ví dụ sau chúng ta thiết lập khoảng cách giữa các dòng là 50dp

<!-- Vertical space between grid items code --> <GridView android:id="@+id/simpleGridView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:numColumns="3" android:verticalSpacing="50dp"/><!--50dp vertical space set between grid items-->

5. android:columnWidth: Thuộc tính này thiết lập độ rộng cho từng cột. Có thể là trong px, dp, sp ... Ví dụ sau chúng ta thiết lập độ rộng cho mỗi cột là 50dp, và thiết lập ô nào được chọn có màu nền là màu xanh lá cây trong thuộc tính android:listSelector

<!--columnWidth in Grid view code--> <GridView android:id="@+id/simpleGridView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:numColumns="3" android:columnWidth="80dp" android:listSelector="#0f0"/><!--define green color for selected item-->

Sự kiện thường dùng trong ListView

1. setOnItemClickListener: Sự kiện này xảy ra khi người dùng clicklên GridView. Xem ví dụ sau:

GridView.setOnItemClickListener(new AdapterView .OnItemClickListener() { public void onItemClick( AdapterView<?> arg0,View arg1, int arg2,long arg3) { txtchon.setText("position : "+ arg2+ "; value ="+arrList.get(arg2)); } });

Trong hàm onItemClick các bạn thấy có tham số thứ 3 arg2 là vị trí cùa GridView, tham số thứ 4 arg3 là tên id của mỗi dòng của ô (cell) GridView

Sử dụng Adapter trong GridView

Một Adapter là một đối tượng của một lớp cài đặt giao diện Adapter. Nó đóng vai trò như là một liên kết giữa một tập hợp dữ liệu và một Adapter View, một đối tượng của một lớp thừa kế lớp trừu tượng AdapterView. Tập hợp dữ liệu có thể là bất cứ điều gì mà trình bày dữ liệu một cách có cấu trúc. Mảng, các đối tượng List và các đối tượng Cursor thường sử dụng bộ dữ liệu.

Có 3 loại Adapter :

1. Array Adapter
2. Base Adapter
3. Custom Array Adapter

1. Không nên sử dụng Array Adapter trong GridView:

Nếu muốn hiển thị danh sách đơn giản chỉ chuỗi thì chúng ta nên sử dụng ArrayAdapter. Còn nếu muốn hiển thị danh sách phức tạp hơn thì ta phải tùy biến lại ArrayAdapter( danh sách gồm có hình, chuỗi)

ArrayAdapter adapter = new ArrayAdapter<String>(this,R.layout.ListView,R.id.textView,StringArray);

2. Base Adapter: Là lớp adpater cơ sở cho các Adapter thường dùng khác như ArrayAdapter<T>, CursorAdapter, SimpleAdapter. BaseAdapter thường đóng vai trò Adapter cho các ListView và Spinner

Ví dụ: Trong ví dụ này chúng ta sẽ làm ứng dụng gồm có một GridView các logo lên trên GridView. Trong ví dụ này trước tiên chúng ta tạo một mảng nguyên chứa các logo, sau đó gọi Adapter để thiết lập dữ liệu cho GridVie. Trong phần chúng ta cũng tạo một lớp CustomAdapter kế thừa từ BaseAdapter. Cuối cùng thiết lập sự kiện setOnItemClickListener cho GridView, Khi người sử dụng click vào một logo sẽ mở ra một Activity hiển thị logo lớn hơn.Tiến hành tạo project, vào thư mục res /layout -> activity_main.xml thiết kế giao diện sau:

Bước 1: Tạo một project tên là GridView: File->New->Android Application Project điền các thông tin ->Next ->Finish

Bước 2: Mở res -> layout -> xml (hoặc) activity_main.xml và thêm codetrong Linear Layout.

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <!-- GridView with 3 value for numColumns attribute --> <GridView android:id="@+id/simpleGridView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:footerDividersEnabled="false" android:padding="1dp" android:numColumns="3" /> </LinearLayout>

Bước 3: Tạo mới một Activity activity_gridview.xml vào trong thư mục layout và thêm code sau:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="1dp" android:orientation="vertical"> <ImageView android:id="@+id/icon" android:layout_width="match_parent" android:layout_height="120dp" android:scaleType="fitXY" android:layout_gravity="center_horizontal" android:src="@drawable/logo1" /> </LinearLayout>

Bước 4: Lưu tất cả các hình vào thư mục drawable Bước 5: Tạo mới một lớp có tên CustomAdapter Trong bước này chúng ta tạo một lớp CustomAdapter kế thừa từ lớp BaseAdapter . Cũng trong bước này chúng ta thiết lập các logo vào trong GridView.

package com.example.gridview; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.ImageView; public class CustomAdapter extends BaseAdapter{ Context context; int logos[]; LayoutInflater inflter; public CustomAdapter(Context context, int[] logos) { super(); this.context = context; this.logos = logos; inflter = LayoutInflater.from(context); } @Override public int getCount() { // TODO Auto-generated method stub return logos.length; } @Override public Object getItem(int arg0) { // TODO Auto-generated method stub return null; } @Override public long getItemId(int arg0) { // TODO Auto-generated method stub return 0; } @Override public View getView(int i, View view, ViewGroup arg2) { // TODO Auto-generated method stub view = inflter.inflate(R.layout.activity_gridview, null); ImageView icon = (ImageView) view.findViewById(R.id.icon); icon.setImageResource(logos[i]); return view; } }

Bước 6: Open src -> package -> MainActivity.java Trong bước này chúng ta khởi tạo GridView. Tiếp theo,chúng ta tạo 1 mảng cho image và thiết lập sự kiện cho GridView. Lưu các hình ảnh vào thư mục drawable.

package com.example.gridview; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.AdapterView; import android.widget.AdapterView.OnItemClickListener; import android.widget.GridView; public class MainActivity extends Activity { GridView simpleGrid; int logos[] = {R.drawable.logo1, R.drawable.logo2, R.drawable.logo3, R.drawable.logo4, R.drawable.logo5, R.drawable.logo6, R.drawable.logo7, R.drawable.logo8, R.drawable.logo9, R.drawable.logo10, R.drawable.logo11, R.drawable.logo12, R.drawable.logo13}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); simpleGrid = (GridView) findViewById(R.id.simpleGridView); // init GridView // Create an object of CustomAdapter and set Adapter to GirdView CustomAdapter customAdapter = new CustomAdapter(getApplicationContext(), logos); simpleGrid.setAdapter(customAdapter); simpleGrid.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) { // TODO Auto-generated method stub // set an Intent to Another Activity Intent intent = new Intent(MainActivity.this, SecondActivity.class); intent.putExtra("image", logos[arg2]); // put image data in Intent startActivity(intent); // start Intent } }); } }

Bước 7: Tạo thêm một Activity thứ 2. Click - Right -> chọn Other-> Android Activity

Bước 8: Trong tập tin activity_second.xml thêm code sau:

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:background="#fff" tools:context="com.example.gourav.GridViewExample.SecondActivity"> <ImageView android:id="@+id/selectedImage" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerInParent="true" android:scaleType="fitXY" /> </RelativeLayout>

Bước 9: Mở tập tin ActivitySecond.java thêm code sau:

package com.example.gridview; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.widget.ImageView; public class SecondActivity extends Activity { ImageView selectedImage; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_second); selectedImage = (ImageView) findViewById(R.id.selectedImage); // init a ImageView Intent intent = getIntent(); // get Intent which we set from Previous Activity selectedImage.setImageResource(intent.getIntExtra("image", 0)); // get image from Intent and set it in ImageView } }

Download ví dụ

Ứng dụng này được phát triển bởi adt bundle, android 4.2 sử dụng minimum sdk 11 and target sdk 21.

Kết quả khi chạy ứng dụng và chọn một hình: