GridView組件的使用

GridView組件的使用

            手機應用程序列表、九宮格等就可以使用該組件

1.在layout佈局文件中（總體佈局）創建兩個組件GridView：負責展示圖片 ImageView：負責顯示圖片

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >


    <GridView
        android:id="@+id/imagelist"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:horizontalSpacing="20dp"
        android:numColumns="3"
        android:verticalSpacing="10dp" >
    </GridView>


    <ImageView
        android:id="@+id/imageshow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        />
</LinearLayout>

2.在layout佈局文件（微觀佈局）中創建grid.xml文件：進行每個小格子的佈局。拷貝6張圖片到drawable下

<?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" >

    <ImageView
        android:id="@+id/smallImage"
        android:layout_width="80dp"
        android:layout_height="50dp"/>
</LinearLayout>

3.在控制器Activity中進行綁定和處理

public class MainActivity extends Activity {
	private GridView smallImageGrid;
	private ImageView showImage;
	private int[] pics;//存放圖片id的數組

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //查找組件
        smallImageGrid=(GridView) this.findViewById(R.id.imagelist);
        showImage=(ImageView) this.findViewById(R.id.imageshow);
        //第一步 實例化圖片ID的數組
        pics=new int[]{R.drawable.a,R.drawable.b,R.drawable.c,R.drawable.d,R.drawable.e,R.drawable.f};
        //第二步 創建一個List<Map>集合，用於將圖片ID轉換爲List集合
        List<Map<String,Object>> pic_items=new ArrayList<Map<String,Object>>();
        for(int pic_id:pics){
        	 Map<String, Object> item=new HashMap<String, Object>();
        	 item.put("pic", pic_id);
        	 pic_items.add(item);
        }
        //第三步 創建SimpleAdaper適配器，以備與GridView組件進行綁定
        SimpleAdapter adapter=new SimpleAdapter(this,pic_items,R.layout.grid,new String[]{"pic"},new int[]{R.id.smallImage});
        //第四步  GridView組件與adapter適配器進行綁定
        smallImageGrid.setAdapter(adapter);
        //第五步 爲showImage組件設置默認圖片
        showImage.setImageResource(pics[0]);
        //第六步 註冊事件監聽
        smallImageGrid.setOnItemClickListener(new GridViewHandler());
    }
    
    
    public class GridViewHandler implements OnItemClickListener{

    	/**
    	 * AdapterView adpaterview：發生點擊事件的AdapterView；
    	 * View view：AdapterView中被用戶點擊的Item（GridView中的Item）；
    	 * int positon：被點擊的Item在Adapter中的位置
    	 * long id：被點擊的Item的Id
    	 */

		@Override
		public void onItemClick(AdapterView<?> adapter, View view, int position,
				long id) {
			showImage.setImageResource(pics[position]);
		}
    	
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    } 
}