[Tự học lập trình Android] Bài 13: Tìm hiểu về GridView trong Android

in , /


Tìm hiểu về Gridview trong Android
- GridView cũng dựa vào Datasource và ArrayAdapter tương tự như ListView
- Điểm khác nhau là GridView có thiết lập số cột. Dữ liệu luôn đưa vào dưới dạng hình ống (mảng, list một chiều), nhưng dựa vào số cột ta thiết lập mà nó tự động ngắt hàng, xem hình minh họa:
Hình 1

- Gridview có thể hiển thị Text hoặc hình ảnh vào GridView.
- Bạn có thể thiết lập số cột cho GridView theo hình dưới đây:
Hình 2

- Nếu bạn thiết lập android:numColumns=”3″, Tức là Gridview sẽ ngắt dòng khi đủ 3 phần tử, nó chỉ khác chỗ này, còn việc đưa dữ liệu lên như thế nào thì nó y xì như làm với ListView.

Ví dụ 1: Hiển thị văn bản lên GridView

- Bạn tạo một Android Project tên tùy thích, ở đây Tôi đặt tên: Vidu_Gridview_Text

- Đây là activity_main.xml cho ứng dụng:

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:id="@+id/selection"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#8A9D6F"
android:hint="Slected here"/>
<GridView
android:id="@+id/gridView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:numColumns="3">
</GridView>
</LinearLayout>

- Bạn xem dòng 15 là id của GridView, Tôi để mặc định gridView1

- Dòng 18 có thuộc tính: android:numColumns= "3″, tức là dữ liệu sẽ được hiển thị trong Gridview với định dạng 3 cột.

- Tiếp theo bạn xem MainActivity.java:

importandroid.os.Bundle;
importandroid.app.Activity;
importandroid.view.View;
importandroid.widget.AdapterView;
importandroid.widget.ArrayAdapter;
importandroid.widget.GridView;
importandroid.widget.TextView;

publicclassMainActivity extendsActivity {
//Dùng mảng 1 chiều hoặc ArrayList để lưu một số dữ liệu
String arr[]={"Ipad","Iphone","New Ipad","SamSung","Nokia","Sony Ericson","LG","Q-Mobile","HTC","Blackberry","G Phone","FPT - Phone","HK Phone"};

protectedvoidonCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Tối tượng này dùng để hiển thị phần tử được chọn trong GridView
finalTextView selection=(TextView)findViewById(R.id.selection);
finalGridView gv=(GridView) findViewById(R.id.gridView1);
//Gán DataSource vào ArrayAdapter
ArrayAdapter<String>da=newArrayAdapter<String>(this,android.R.layout.simple_list_item_1,arr);
//gán Datasource vào GridView
gv.setAdapter(da);
//Thiết lập sự kiện cho GridView,
gv.setOnItemClickListener(newAdapterView.OnItemClickListener() {
publicvoidonItemClick(AdapterView<?> arg0,
View arg1, intarg2,
longarg3) {
//Hiển thị phần tử được chọn trong GridView lên TextView
selection.setText(arr[arg2]);
}
});
}
}
- Cách sử dụng GridView tương tự như ListView, nên nếu như bạn đã hiểu về ListView rồi thì GridView hiển nhiên bạn cũng làm tương tự.
- Thực thi chương trình bạn sẽ thấy như hình bên dưới:
Hình 3

Ví dụ 2: Hiển thị danh sách hình ảnh có sẵn lên GridView, mỗi lần chọn vào hình ảnh nào thì sẽ hiển thị chi tiết ảnh đó trên một màn hình mới:
- Có thể Demo này đã có nhiều website và Ebooks làm rồi, ở đây Tôi cũng muốn demo lại cho các bạn.
- Bạn xem giao diện của ứng dụng trước:
Hình 4

- Bên trái là màn hình chính cho phép hiển thị danh sách hình ảnh vào GridView, mỗi lần chọn vào từng hình trong GridView thì sẽ mở hình được chọn đó vào một màn hình mới (ví dụ như khi chọn hình chú Cừu thì nó sẽ hiển thị ra như màn hình bên phải ), nhấn nút Back để trở về màn hình chính.
- Ở đây có một sự khác biệt lớn đó là chúng ta chỉ sử dụng 1 MainActivity, không hề tạo thêm bất kỳ một Activity nào khác, chúng ta chỉ thay đổi Layout mà thôi. Nên nó cũng là điểm nhấn của ứng dụng.
-Hãy tạo một Android Project tên: Vidu_Gridview_DisplayImage và xem cấu trúc của chương trình:
Hình 5

- Layout sẽ có 2 cái: activity_main.xml là của màn hình chính dùng để hiển thị danh sách hình ảnh.solo_picture.xml là dùng để hiển thị từng hình riêng lẻ.
- Tạo thêm thư mục drawble và kéo thả một số hình ảnh vào.
- Phần class có 2 class: MainActivity và MyImageAdapter kế thừa từ BaseAdapter.
- Bây giờ ta đi vào chi tiết của từng cái:
- activity_main.xml:
Hình 6
- Bạn có thể nhìn vào hình trên để làm hoặc tải coding mẫu ở bên dưới.
-solo_picture.xml:
Hình 7
- Bây giờ ta vào các class xử lý nghiệp vụ:
Hình 8

- Thứ nhất là class MyImageAdapter:

+ class này sẽ kế thừa từ BaseAdapter, và dùng để hiển thị từng hình ảnh riêng lẻ:

importandroid.content.Context;
importandroid.view.View;
importandroid.view.ViewGroup;
importandroid.widget.BaseAdapter;
importandroid.widget.GridView;
importandroid.widget.ImageView;

publicclassMyImageAdapter extendsBaseAdapter {
privateContext mContext;
privateInteger []mThumbIds;
publicMyImageAdapter(Context c){
mContext=c;
}
publicMyImageAdapter(Context c,Integer []arrIds){
mContext=c;
mThumbIds=arrIds;
}
publicintgetCount()
{
returnmThumbIds.length;
}
publicObject getItem(intarg0)
{
returnnull;
}
publiclonggetItemId(intarg0)
{
return0;
}


publicView getView(intarg0, View convertView, ViewGroup arg2) {
ImageView imgView;
if(convertView==null){
imgView=newImageView(mContext);
//can chỉnh lại hình cho đẹp
imgView.setLayoutParams(newGridView.LayoutParams(85, 85));
imgView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imgView.setPadding(8, 8, 8, 8);
}else{
imgView=(ImageView) convertView;
}
//lấy đúng vị trí hình ảnh được chọn
//gán lại ImageResource
imgView.setImageResource(mThumbIds[arg0]);
returnimgView;
}
}
- Thứ hai là class MainActivity:

importandroid.os.Bundle;
importandroid.app.Activity;
importandroid.view.View;
importandroid.widget.AdapterView;
importandroid.widget.Button;
importandroid.widget.GridView;
importandroid.widget.ImageView;
importandroid.widget.TextView;
importandroid.widget.AdapterView.OnItemClickListener;

publicclassMainActivity extendsActivity
implementsOnItemClickListener
{
TextView tvMsg;
GridView gv;
TextView tvSoloMsg;
//mảng lưu danh sách các id hình ảnh có sẵn
Integer[]mThumbIds;
//Adapter cho GridView
MyImageAdapter adapter=null;
//Vì không tạo thêm 1 Activity nên lấy luôn 2 Id ở bên solo_picture.xml
ImageView ivSoloPicture;
Button btnBack;
//Lưu Bundle backup cho MainActivity
Bundle myBackupBundle;
protectedvoidonCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//Lưu savedInstanceState trước vào myBackupBundle
myBackupBundle=savedInstanceState;
setContentView(R.layout.activity_main);
tvMsg=(TextView) findViewById(R.id.tvMsg);
//gán mảng các Id hình ảnh cho mThumbIds
mThumbIds=newInteger[]{R.drawable.image1,R.drawable.image2,
R.drawable.image3,R.drawable.image4,
R.drawable.image5,R.drawable.image6,
R.drawable.ic_launcher,R.drawable.lifecycle};
gv=(GridView) findViewById(R.id.gridView1);
//thiết lập Datasource cho Adapter
adapter=newMyImageAdapter(this, mThumbIds);
//gán Adapter vào Gridview
gv.setAdapter(adapter);
//thiết lập sự kiện để mở từng hình ảnh chitiết
gv.setOnItemClickListener(this);
}
publicvoidonItemClick(AdapterView<?> arg0,View arg1, intarg2, longarg3) {
//gọi hàm xem hình ảnh chi tiết tại ví trí thứ arg2
showdetail(arg2);
}
publicvoidshowdetail(intposistion)
{
//Không mở Activity mới mà chỉ thiết lập lại Layout
setContentView(R.layout.solo_picture);
//Vừa gọi hàm trên thì màn hình sẽ thay đổi qua cái mới
//ta lấy các control trong layout mới này
tvSoloMsg=(TextView) findViewById(R.id.tvSoloMsg);
tvSoloMsg.setText("Image at "+posistion);
ivSoloPicture=(ImageView) findViewById(R.id.imgSolo);
//thiết lập hình ảnh đang chọn lên ImageView mới
ivSoloPicture.setImageResource(mThumbIds[posistion]);
btnBack=(Button) findViewById(R.id.btnBack);
//Thiết lập sự kiện click Back để phục hồi lại MainActivity
//bằng cách gọi lại onCreate(myBackupBundle);
btnBack.setOnClickListener(newView.OnClickListener() {
publicvoidonClick(View arg0) {
onCreate(myBackupBundle);
}
});
}
}

Tham khảo: duythanhcse

*******

Một số tài liệu và khoá học bổ ích dành cho bạn: 

# Giáo trình: Lập Trình Android [Click để xem]

# Khoá học online:  Lập trình Android toàn tập [Click để xem]

-----------------------------------------