GridView元件的實作流程:

woff

完成圖

1.準備圖形檔案放在專案的res/drawable目錄內
2.在layout檔案內新增GridView元件
3.繼承BaseAdapter類別並改寫getCount()、getItem()、getItemId()、getView()方法，系統會自動呼叫這些方法
4.呼叫setAdapter(adapter)套用BaseAdapter設定
5.實作OnItemClickListener.onItemClick()處理使用者點選GridView上圖片的事件


[Android智慧型手機設計_GridView元件]

1.main.xml
建立TextView ImageView GridView

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
2. xmlns:tools="http://schemas.android.com/tools"
   
3. android:id="@+id/RelativeLayout1"
   
4. android:layout_width="match_parent"
   
5. android:layout_height="match_parent"
   
6. android:orientation="vertical"
   
7. android:paddingBottom="@dimen/activity_vertical_margin"
   
8. android:paddingLeft="@dimen/activity_horizontal_margin"
   
9. android:paddingRight="@dimen/activity_horizontal_margin"
   
10. android:paddingTop="@dimen/activity_vertical_margin"
    
11. tools:context=".MainActivity" >
    
12. 
    
13. <ImageView
    
14. android:id="@+id/imageView1"
    
15. android:layout_width="wrap_content"
    
16. android:layout_height="wrap_content"
    
17. android:layout_alignParentBottom="true"
    
18. android:layout_centerHorizontal="true"
    
19. android:layout_marginBottom="20dp"
    
20. android:src="@drawable/baby2" />
    
21. 
    
22. <GridView
    
23. android:id="@+id/gridView1"
    
24. android:layout_width="match_parent"
    
25. android:layout_height="140dp"
    
26. android:layout_below="@+id/textView1"
    
27. android:layout_centerHorizontal="true"
    
28. android:layout_marginTop="18dp"
    
29. android:columnWidth="200dp"
    
30. android:gravity="center"
    
31. android:horizontalSpacing="5dp"
    
32. android:numColumns="2"
    
33. android:verticalSpacing="5dp" >
    
34. </GridView>
    
35. 
    
36. <TextView
    
37. android:id="@+id/textView1"
    
38. android:layout_width="wrap_content"
    
39. android:layout_height="wrap_content"
    
40. android:layout_alignLeft="@+id/imageView1"
    
41. android:layout_marginLeft="42dp"
    
42. android:text="@string/hello_world"
    
43. android:textColor="#FF0000"
    
44. android:textSize="20sp" />
    
45. 
    
46. </RelativeLayout>

複製代碼

2.主程式 MainActivity.java

1. 
   
2. package com.example.ann;
   
3. //匯入類別庫
   
4. import android.os.Bundle;
   
5. import android.app.Activity;
   
6. import android.content.Context;
   
7. import android.view.View;
   
8. import android.view.ViewGroup;
   
9. import android.widget.*;
   
10. import android.widget.AdapterView.OnItemClickListener;
    
11. 
    
12. public class MainActivity extends Activity {
    
13. //宣告資料型態
    
14. GridView GV;
    
15. ImageView IV;
    
16. //建立圖片陣列，必須先將圖匯入到圖片目錄
    
17. Integer images[]={R.drawable.baby0,R.drawable.baby1,R.drawable.baby2,R.drawable.baby3,R.drawable.baby4
    
18. ,R.drawable.baby5,R.drawable.baby6,R.drawable.baby7,R.drawable.baby8};
    
19. @Override
    
20. protected void onCreate(Bundle savedInstanceState) {
    
21. super.onCreate(savedInstanceState);
    
22. setContentView(R.layout.activity_main);
    
23. findViews();
    
24. }
    
25. public void findViews(){
    
26. GV=(GridView)findViewById(R.id.gridView1);
    
27. IV=(ImageView)findViewById(R.id.imageView1);
    
28. //設定GridView Adapter到這主程式
    
29. GV.setAdapter(new ImageAdapter(this));
    
30. //監聽滑鼠點選GridView時的改變
    
31. GV.setOnItemClickListener(new OnItemClickListener(){
    
32. 
    
33. @Override
    
34. public void onItemClick(AdapterView<?> parent, View v, int position,
    
35. long id) {
    
36. //秀出訊息
    
37. String msg= "第 " + position+" 張";
    
38. Toast.makeText(MainActivity.this,msg, Toast.LENGTH_SHORT).show();
    
39. 
    
40. //秀出圖檔到ImageView
    
41. IV.setImageResource(images[position]);
    
42. 
    
43. }});
    
44. 
    
45. }
    
46. 
    
47. //自訂ImageAdapter繼承BaseAdapter
    
48. public class ImageAdapter extends BaseAdapter{
    
49. Context context;
    
50. 
    
51. 
    
52. //建構元
    
53. public ImageAdapter(Context c){
    
54. this.context=c;
    
55. }
    
56. @Override
    
57. //回傳有幾張圖片
    
58. public int getCount() {
    
59. // TODO Auto-generated method stub
    
60. return images.length;
    
61. }
    
62. 
    
63. @Override
    
64. public Object getItem(int position) {
    
65. // TODO Auto-generated method stub
    
66. return position;
    
67. }
    
68. 
    
69. @Override
    
70. public long getItemId(int position) {
    
71. // TODO Auto-generated method stub
    
72. return position;
    
73. }
    
74. 
    
75. @Override
    
76. public View getView(int position, View convertView, ViewGroup parent) {
    
77. ImageView imageView;
    
78. 如果convertView為空，就放入預設圖片檔案填入，不然就用現有圖片
    
79. if(convertView==null){
    
80. imageView=new ImageView(context);
    
81. imageView.setLayoutParams(new GridView.LayoutParams(125,125));
    
82. imageView.setScaleType(ImageView.ScaleType.FIT_XY);
    
83. }
    
84. else{
    
85. imageView=(ImageView)convertView;
    
86. }
    
87. //設定點選而改變的圖片到imageView
    
88. imageView.setImageResource(images[position]);
    
89. //回傳imageView
    
90. return imageView;
    
91. }        
    
92. }
    
93. }

複製代碼