Android控件之GridView

Android控件之GridView

  

---

 1 GridView介紹

GridView是網格視圖，它按照行列的方式來顯示內容的。常用於九宮格內容顯示。

1.1 GridView屬性說明

android:columnWidth
設置列的寬度。

android:gravity
設置此組件中的內容在組件中的位置。可選的值有：top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、fill_horizontal、center、fill、clip_vertical可以多選，用“|”分開。

android:horizontalSpacing
兩列之間的間距。

android:numColumns
設置列數。取值有2種。(01), 可以設置為數字，比如："2"表示有兩列。(02)，可以設置為“auto_fit”，表示根據“屏幕寬度”和“GridView寬度”來動態匹配。

android:stretchMode
縮放模式。取值有4種。
(01) none。 禁止縮放。
(02) spacingWidth。 所有列之間的間距都會縮放。
(03) columnWidth。每一列都會縮放。注意比較和spacingWidth之間的區別；一個是縮放“列與列之間的間距”，另一個是縮放“整個列”。
(04) spacingWidthUniform。通過的縮放列。

android:verticalSpacing
兩行之間的間距。

 

 

---

2 GridView示例

創建一個activity，包含一個GridView。GridView包含9格，每一個格子包含“圖片”和“文本”2部分。點擊每一個格子，顯示一個Toast提示語。

SimpleGridViewTest.java代碼：

package com.example.simplegridviewtest;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.SimpleAdapter;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;

import java.util.List;
import java.util.ArrayList;
import java.util.Map;
import java.util.HashMap;

/**
 * @desc GridView的實例。
 *       GridView包含9格，每一個格子包含“圖片”和“文本”2部分。點擊每一個格子，顯示一個Toast提示語。
 * 
 * @author skywang
 *
 */
public class SimpleGridViewTest extends Activity implements AdapterView.OnItemClickListener{
    private GridView mGridView;
    private String IMAGE_ITEM = "imgage_item";
    private String TEXT_ITEM = "text_item";
    private String[] arrText = new String[]{ 
            "Picture 1", "Picture 2", "Picture 3", 
            "Picture 4", "Picture 5", "Picture 6",
            "Picture 7", "Picture 8", "Picture 9"
            };
    private int[] arrImages=new int[]{
            R.drawable.p1, R.drawable.p2, R.drawable.p3, 
            R.drawable.p4, R.drawable.p5, R.drawable.p6, 
            R.drawable.p7, R.drawable.p8, R.drawable.p9
            };
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.simple_grid_view_test);

        mGridView = (GridView) findViewById(R.id.gridview);

        SimpleAdapter saImageItems = new SimpleAdapter(this, 
                getGridViewData(),
                R.layout.grid_view_item,
                new String[] { IMAGE_ITEM, TEXT_ITEM },
                new int[] { R.id.itemImage, R.id.itemText });
        // 設置GridView的adapter。GridView繼承於AbsListView。
        mGridView.setAdapter(saImageItems);
        mGridView.setOnItemClickListener(this);
    }
    
    /**
     * 獲取GridView的數據
     */
    private List<HashMap<String, Object>> getGridViewData() {
        List<HashMap<String, Object>> list = new ArrayList<HashMap<String, Object>>();
        
        for (int i=0; i<9; i++) {
            HashMap<String, Object> map = new HashMap<String, Object>(); 
            map.put(IMAGE_ITEM, arrImages[i]);
            map.put(TEXT_ITEM, arrText[i]);
            list.add(map);
        }
        
        return list;
    }

    /**
     * GridView的點擊回調函數
     * 
     * @param adapter  -- GridView對應的dapterView
     * @param view     -- AdapterView中被點擊的視圖(它是由adapter提供的一個視圖)。
     * @param position -- 視圖在adapter中的位置。
     * @param rowid    -- 被點擊元素的行id。
     */
    @Override
    public void onItemClick(AdapterView<?> adapter, View view, int position, long rowid) {

        // 根據元素位置獲取對應的值
        HashMap<String, Object> item = (HashMap<String, Object>) adapter.getItemAtPosition(position);

        String itemText=(String)item.get(TEXT_ITEM);
        Object object=item.get(IMAGE_ITEM);
        Toast.makeText(this.getApplicationContext(), "You Select "+itemText, Toast.LENGTH_SHORT).show();
    }

}

layout布局文件(simple_grid_view_test.xml)代碼：

<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"
    tools:context=".SimleGridViewTest" >

    <GridView 
        android:id="@+id/gridview"
        android:layout_width="match_parent" 
        android:layout_height="match_parent"
        android:numColumns="3"
        android:verticalSpacing="4dip"
        android:horizontalSpacing="4dip"
        android:columnWidth="90dip"
        android:gravity="center" />    

</RelativeLayout>

GridView的每個格子對應的layout布局文件(grid_view_item.xml)代碼：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent" 
    android:layout_width="match_parent">
    
    <ImageView
        android:id="@+id/itemImage"
        android:layout_width="160dip"
        android:layout_height="120dip"
        android:layout_centerHorizontal="true"
        android:scaleType="fitXY" />
    
    <TextView 
        android:id="@+id/itemText" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_below="@+id/itemImage"
        android:layout_centerHorizontal="true" 
        android:text="TextView01"/>
    
</RelativeLayout>

點擊下載：源代碼

運行效果圖：