Android 學習筆記（十三）：Activity-GridView

我們將通過兩個例子學習GridView。Grid和Table有一點點類似。我們將在例子中逐步描繪如何編寫一個Grid的Activity

例子一：繼承ArrayAdapter作為自訂adapter

1、編寫Android XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
  <TextView android:id="@+id/selection4"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" />
  <GridView android:id="@+id/grid"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:verticalSpacing="35px" <!-- grid元素之間的豎直間隔 -->
    android:horizontalSpacing="5px" 
<!--grid元素之間的水平間隔  -->
    android:numColumns="auto_fit" <!--表示有多少列，如果設定為auto_fit，將根據columnWidth和Spacing來自動計算 -->
    android:columnWidth="100px" <!-- 一般建議採用有像素密度無關的dip或者dp來表示-->
    android:stretchMode="columnWidth"
<!--如何填滿空餘的位置，模擬器採用WVGA800*480，每排4列，有4＊100＋5＊3＝415，還餘65px的空間，如果是columnWidth，則這剩餘的65將分攤給4列，每列增加16/17px。如果採用SpacingWidth，則分攤給3個間隔空隙 -->
    android:gravity="center"  /> 
</LinearLayout>

2、編寫代碼。和其他selected widget，我們之前學習的ListView和Spinner的方式，通過setAdapter()來提供資料和子View顯示風格，通過觸發setOnItemSelectedListener()註冊選擇listner。在這裡處理選擇之外，我們增加一個Click的觸發，可以比較一下此兩的差異。此次我們不再使用Android內建的格式，而設定我們自己的UI風格。

public class Chapter7Test4 extends Activity  implements  OnItemSelectedListener,OnItemClickListener{
    private TextView selection = null;
    private String[] items={"lorem", "ipsum", "dolor", "sit", "amet", "hello", "me", "elit", "morbi", "vel", "ligula", "vitae", "arcu", "aliquet", "mollis", "etiam", "vel", "erat", "placerat", "ante","hi", "sodales", "test", "augue", "purus"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.chapter_7_test4);
       
        selection = (TextView)findViewById(R.id.selection4);
        GridView grid= (GridView)findViewById(R.id.grid);
        //步驟1：設定ArrayAdapter，可以採用android內建的格式，也可以自訂，這裡我們將自己定義。
        grid.setAdapter( new FunnyLookingAdapter(this, android.R.layout.simple_list_item_1,items));
        //grid.setAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,items));
        //步驟2：設定元素被選擇以及被點擊的回調觸發處理
        grid.setOnItemSelectedListener(this);
        grid.setOnItemClickListener(this);
    }
  //步驟3：編寫CallBack觸發函數
    @Override /* 這是OnItemSelectedListener介面*/
    public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
        selection.setText(items[arg2]);
    }

    @Override /* 這是OnItemSelectedListener介面*/
    public void onNothingSelected(AdapterView<?> arg0) {
        selection.setText("");
    }

    @Override /* 這是OnItemClickListener介面*/
    public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
        selection.setText("Clicked: " + items[arg2]);
    }

   //步驟4：編寫自訂的adapter，繼承ArrayAdapter<String>
    private class FunnyLookingAdapter extends ArrayAdapter<String>{
        private Context context;
        private String[] theItems;
        //步驟4.1：編寫adapter的建構函式
        FunnyLookingAdapter( Context context, int resource, String[] items){
                super(context,resource,items);
                this.context = context;
                theItems = items;
        }
       
        //步驟4.2：重寫getView()，對每個單元的內容以及UI格式進行描述
        /*如果我們不使用TextView，則我們必須通過getView()對每一個gridview單元進行描述。這些單元可以是Button，ImageView，在這裡我們使用Button和TextView分別作測試 重寫override getView(int, View, ViewGroup)，返回任何我們所希望的view。*/
        public View   getView  (int position, View  convertView, ViewGroup  parent){
            TextView label = (TextView)convertView;
            //我們測試發現，除第一個convertView外，其餘的都是NULL，因此如果沒有view，我們需要建立
            if(convertView == null){
                convertView = new TextView(context);
                label = (TextView)convertView;
            }
           
            label.setText(position + ": "  + theItems[position]);           
            return convertView;
        }
    }// End of class FunnyLookingAdapter

}

左圖是使用android內建的粗體格式，即被注釋掉的setAdapter，圖二為例子原始碼樣本，圖右將FunnyLookingAdapter中的getView()用Button代替TextView，這是發現有一個有趣的現象，Button是檢測Click動作，而我們在類中通過setItemClickListener中設定了對GridView中的item檢測Click的動作，這兩個是重疊的，而將優先監聽Button的Click，即我們定製的GridView中將得不到觸發，這需特別注意。

例子二：繼承BaseAdapter作為自訂adapter

這是來自Totorial的例子。在這裡GridView裡面的元素是ImageView。Android XML的檔案很簡單：

<?xml version="1.0" encoding="utf-8"?>
<!-- dp等同於dip，device independent pixels裝置獨立像素，多用於android，與分別率無關， -->
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/gridview"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:columnWidth="90dp"
  android:numColumns="auto_fit"
  android:verticalSpacing="10dp"
  android:horizontalSpacing="10dp"
  android:stretchMode="columnWidth"
  android:gravity="center" >
</GridView>

我們在來看看Java code。

1）我們將圖片，copy至res/drawable-hdpi/中。

2）設定GridView的adapter，並設定點擊觸發函數，點擊後採用Toast顯示點擊的序號。

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.chapter_7_test5);
       
        GridView gridview = (GridView)findViewById(R.id.gridview);
        gridview.setAdapter(new ImageAdapter(this));
       
        gridview.setOnItemClickListener(new OnItemClickListener(){
            public void onItemClick(AdapterView<?> parent, View v, int position, long id){
                Toast.makeText(this, ""+position, Toast.LENGTH_SHORT).show();
            }   
        });
    }

3）設定我們自子的ImageAdapter，繼承BasAdapter。

    public class ImageAdapter extends BaseAdapter{
        private Context context = null;
        // references to our images
        private Integer[] mThumbIds = {R.drawable.sample_2, R.drawable.sample_3,R.drawable.sample_4, R.drawable.sample_5,R.drawable.sample_6,
...// 這裡是檔案的對應的Id，不在具體列出};
        //步驟1： 建構函式      
        public ImageAdapter(Context context){
            this.context = context;
        }
        //步驟2：BaseAdapter需要重構四個方法getCount(),getItem(),getItemId(int position),getView()
        //步驟2.1：getCount() 表示How many items are in the data set represented by this Adapter.
        public int getCount() {
            return mThumbIds.length;
        }
        //步驟2.2：getItem()
根據需要position獲得布放在GridView的對象。在這個例子中，我們不需要處理裡面的對象，可以設為null
        public Object getItem(int position) {
            return null;
        }
        //步驟2.3：getItemId()
獲得row id（Get the row id associated with the specified position in the list），由於我們也不需要，簡單的設為0
        public long getItemId(int position) {
            return 0;
        }
        //步驟2.4：獲得GridView裡面的View，Get a View that displays the data at the specified position in the data set.
和第一個例子一樣，傳遞的第二個函數可能為null，必須進行處理。
        public View getView(int position, View
convertView, ViewGroup parent) {
            ImageView imageView = null;
            if(convertView == null){
                imageView = new ImageView(context);
                // 設定View的height和width：這樣保證無論image原來的尺寸，每個映像將重新適合這個指定的尺寸。
                imageView.setLayoutParams(new GridView.LayoutParams(85,85));
                /* ImageView.ScaleType.CENTER 但不執行縮放比例
                 * ImageView.ScaleType.CENTER_CROP 按比例統一縮放圖片（保持圖片的尺寸比例）便於圖片的兩維（寬度和高度）等於或大於相應的視圖維度
                 * ImageView.ScaleType.CENTER_INSIDE 按比例統一縮放圖片（保持圖片的尺寸比例）便於圖片的兩維（寬度和高度）等於或小於相應的視圖維度 */
                imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
                imageView.setPadding(8,8,8,8);
            }else{
                imageView = (ImageView)convertView;
            }
            imageView.setImageResource(mThumbIds[position]);
            return imageView;
        }
       
    }

我們設定了幾種scaleType，下面左圖是ImageView.ScaleType.CENTER_CROP，中圖是ImageView.ScaleType.CENTER_INSIDE，右圖是ImageView.ScaleType.CENTER

相關連結：我的Andriod開發相關文章