Bài 19: Gridview trong Android (P1)

Leave a Comment
- Đ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:
19_grid_0- Bạn thấy đấy, Tôi 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:
19_grid_1- 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 (xem hình Tôi đánh số 1):
- 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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
package tranduythanh.com;
import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.TextView;
public class MainActivity extends Activity {
//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"
 };
 protected void onCreate(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
 final TextView selection=(TextView)
 findViewById(R.id.selection);
 final GridView gv=(GridView) findViewById(R.id.gridView1);
 //Gán DataSource vào ArrayAdapter
 ArrayAdapter<String>da=new ArrayAdapter<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(new AdapterView
 .OnItemClickListener() {
 public void onItemClick(AdapterView<?> arg0,
 View arg1, int arg2,
 long arg3) {
 //Hiển thị phần tử được chọn trong GridView lên TextView
 selection.setText(arr[arg2]);
 }
 });
 }
}
- Bạn thấy đó, cách sử dụng GridView là y xì như ListView, nên nếu như bạn đã rành về ListView rồi thì GridView hiển nhiên bạn cũng làm tốt.
- Thực thi chương trình bạn sẽ thấy như hình bên dưới:
19_grid_3
- Xem coding đầy đủ ở đây: http://www.mediafire.com/?v3ww92ys1s5jth0
- Ví dụ 2 sẽ phức tạp hơn, 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:
19_grid_5- 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.
Xem tiếp P2

0 nhận xét:

Đăng nhận xét