【Android 開發】：UI控件之 Gallery 畫廊控件的使用

    Gallery控件一般是用于顯示圖像清單，是以也稱為是畫廊控件， Gallery隻能水準顯示一行，而且支援水準滑動效果。也就是說，單擊、選中或者拖動Gallery中的圖像， Gallery圖像中的清單會根據不同的情況向左向右移動，直到顯示到最後的一個圖像為止。

    1. 在學習Gallery控件之前，我們需要掌握一些準備知識

1) Adapter (擴充卡)

檢視這個 Adapter 的 Android 官方API文檔：擴充卡對象作為AdapterView 和這個視圖下資料的橋梁，它提供了傳回資料選項的權利，當然它還可以在這些資料集合中添加資料元素。

它是一個接口，可以看出有很多實作這個接口的子類的擴充卡，為什麼Android中的Adapter會有這麼多擴充卡呢？主要是因為android中的UI展示的控件不一樣，是以要用到這些不同的擴充卡來填充資料。如下圖所示：

    當我們手機的螢幕想要顯示一些資料的時候，它不是直接來源與資料源，而是先從擴充卡中去取出資料，資料源中的資料則需要填充到适配中，這樣Android在展示某些資料就可以用不同的方式來展示，同時也需要不同的擴充卡來裝載這些資料來填充的手機的UI控件中，這個類似于生活中的筆記本電腦。

2) 建立一個類繼承 BaseAdapter

了解上面的知識架構之後，我們必須自己建立一個擴充卡類來繼承 BaseAdapter，注意的是我們在聲明一個類去繼承這個适的時候，一般都不會直接去用這個類去實作Adapter接口，我們一般是去繼承BaseAdapter這個抽象類，它是所有擴充卡中可以自定義的擴充卡，它裡面所填充的格式或者内容都是使用者可以自己去定義的。

public class ImageAdapter extends BaseAdapter
           

而後，我們必須實作下面這四個方法

1) getCount() 表示在擴充卡中有多少個資料選項

2) getItem(int position) 表示根據position位置來得到資料選項的值

3) getItemId(int position)  根據position位置得到所在選項的Id

4) getView(int position, View convertView, ViewGroup parent)【重要】表示在資料集合中指定一個位置得到一個視圖來顯示資料。更多内容，檢視API文檔中的這個方法定義。

由于在這裡我們設計的是一個自定義的擴充卡，是以需要用自定義的布局來顯示。這種情況下通常Android的通用布局是不能滿足需求的，是以可以手工建立一個View視圖，也可以用一個inflate來加載一個XML檔案，然後從資料中根據position獲得每一個Item的值，加載到指定的XML布局中，參數說明如下：

int position：     表示需要顯示視圖的擴充卡中選項的位置資訊

View convertView： 參數表示一個舊的布局，如果沒有新的布局加載的時候，将使用舊的布局

ViewGroup parent： 目前這個填充的布局，會被追加到父布局中。

2. Gallery畫廊案例的實作

1) 布局檔案

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

	<Gallery android:id="@+id/gallery"
	    android:layout_width="fill_parent"
	    android:layout_height="wrap_content"
	    android:layout_marginTop="30dp"/>

</LinearLayout>
           

2) attrs.xml,在values檔案下，這個檔案主要添加一些屬性的資訊，替我們找到gallery的設計風格

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="Gallery">
        <attr name="android:galleryItemBackground"></attr>
        
    </declare-styleable>   
</resources>
           

3) 主程式代碼

public class GalleryDemo extends Activity {

    private Gallery gallery;
    private ImageAdapter imageAdapter;

    // 聲明圖檔的數組
    private int[] resIds = {
            R.drawable.item1, R.drawable.item2, R.drawable.item3, R.drawable.item4,
            R.drawable.item5, R.drawable.item6, R.drawable.item7, R.drawable.item8,
            R.drawable.item9, R.drawable.item10, R.drawable.item11, R.drawable.item12,
            R.drawable.item13, R.drawable.item14, R.drawable.item15,
    };

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        gallery = (Gallery) findViewById(R.id.gallery);
        imageAdapter = new ImageAdapter(this);
        gallery.setAdapter(imageAdapter);
    }

    public class ImageAdapter extends BaseAdapter {

        private Context context;

        int mGralleryItemBackground; // 使用簡單的計數器，主要是完成往每一個Item中去填充背景的圖檔

        public ImageAdapter(Context context) {
            this.context = context;
            // 使用類型數組來讀取屬性
            TypedArray typedArray = obtainStyledAttributes(R.styleable.Gallery);
            mGralleryItemBackground = typedArray.getResourceId(
                    R.styleable.Gallery_android_galleryItemBackground, 0);

        }

        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return Integer.MAX_VALUE; // 傳回目前擴充卡最大值，是整數類型的。
        }

        @Override
        public Object getItem(int position) {
            // TODO Auto-generated method stub
            return resIds[position]; // 傳回數組resIds[]的位置資訊
        }

        @Override
        public long getItemId(int position) {
            // TODO Auto-generated method stub
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {

            ImageView imageView = new ImageView(context);
            // 表示往imageView中填充圖檔的資訊，填充的時候傳遞是resIds[]的下标
            imageView.setImageResource(resIds[position % resIds.length]);
            // 表示目前ImageView 把圖檔 不按比例擴大/縮小到View的大小顯示
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            // 設定ImageView的大小
            imageView.setLayoutParams(new Gallery.LayoutParams(200, 150));
            // 設定ImageView的背景
            imageView.setBackgroundResource(mGralleryItemBackground);
            // TODO Auto-generated method stub
            return imageView;
        }

    }
}
           

3. 程式執行結果

源碼下載下傳位址：http://download.csdn.net/detail/xukunhui2/5527233