Android學習指南之十三：Gallery畫廊

       我們在智能手機上應該都見過可以滑動操作的圖片集，在Android開發中我們是用Gallery實現這種圖片滑動效果的。Gallery是一個內部元素可以水平滾動，並且可以把當前選擇的子元素定位在它中心的布局組件。本文就重點講解Gallery的使用方法。

       下面先給出一張圖讓大家直觀的看看本文Gallery例子的運行界面效果。

       下面上代碼，相關解釋都放在代碼裡了。

       1、建立一個新項目HelloGallery。

       2、拷貝wallpaper_0.jpg…wallpaper_9.jpg 10個圖片文件到res/drawable目錄。

       3、res/layout/main.xml文件的內容如下：

1. <?xml version="1.0" encoding="utf-8"?>  
2. <framelayout android:layout_height="fill_parent" android:layout_width="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/FrameLayout01">  
3. <imageview android:layout_height="fill_parent" android:layout_width="fill_parent" android:id="@+id/ImageView01" android:src="@drawable/wallpaper_0">  
4. </imageview>  
5.   
6. <gallery android:layout_height="wrap_content" android:layout_width="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/Gallery01" android:spacing="5dp">  
7. </gallery>  
8. </framelayout>  

       其中我們使用FrameLayout來實現疊加效果，使用ImageView來顯示大圖，Gallery來展示畫廊，android:spacing="5dp" 屬性則是用來設置元素之間的間隔。

       4、在res/values/目錄中新建一個attrs.xml內容如下：

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <resources>  
3.         <declare -styleable="" name="HelloGallery">  
4.                 <attr name="android:galleryItemBackground">  
5.         </attr></declare>  
6. </resources>  

       5、在MainHelloGallery.java中的內容如下：

1. package android.basic.lesson13;   
2.   
3. import android.app.Activity;   
4. import android.content.Context;   
5. import android.content.res.TypedArray;   
6. import android.os.Bundle;   
7. import android.view.View;   
8. import android.view.ViewGroup;   
9.   
10. import android.widget.AdapterView;   
11. import android.widget.AdapterView.OnItemClickListener;   
12. import android.widget.BaseAdapter;   
13. import android.widget.Gallery;   
14. import android.widget.ImageView;   
15. import android.widget.Toast;   
16.   
17. public class MainHelloGallery extends Activity {   
18.   
19.         /** Called when the activity is first created. */  
20.         @Override  
21.         public void onCreate(Bundle savedInstanceState) {   
22.                 super.onCreate(savedInstanceState);   
23.                 setContentView(R.layout.main);   
24.   
25.                 //定義UI組件   
26.                 final ImageView iv= (ImageView)findViewById(R.id.ImageView01);   
27.                 Gallery g = (Gallery) findViewById(R.id.Gallery01);   
28.   
29.                 //設置圖片匹配器   
30.                 g.setAdapter(new ImageAdapter(this));   
31.   
32.                 //設置AdapterView點擊監聽器，Gallery是AdapterView的子類   
33.                 g.setOnItemClickListener(new OnItemClickListener() {   
34.   
35.                         @Override  
36.                         public void onItemClick(AdapterView<?> parent, View view,   
37.                                         int position, long id) {   
38.                                 //顯示點擊的是第幾張圖片   
39.                                 Toast.makeText(MainHelloGallery.this, "" + position,   
40.                                                 Toast.LENGTH_LONG).show();   
41.                                 //設置背景部分的ImageView顯示當前Item的圖片   
42.                                 iv.setImageResource(((ImageView)view).getId());   
43.                         }   
44.                 });   
45.         }   
46.   
47.         //定義繼承BaseAdapter的匹配器   
48.         public class ImageAdapter extends BaseAdapter {   
49.   
50.                 //Item的修飾背景   
51.                 int mGalleryItemBackground;   
52.   
53.                 //上下文對象   
54.                 private Context mContext;   
55.   
56.                 //圖片數組   
57.                 private Integer[] mImageIds = { R.drawable.wallpaper_0,   
58.                                 R.drawable.wallpaper_1, R.drawable.wallpaper_2,   
59.                                 R.drawable.wallpaper_3, R.drawable.wallpaper_4,   
60.                                 R.drawable.wallpaper_5, R.drawable.wallpaper_6,   
61.                                 R.drawable.wallpaper_7, R.drawable.wallpaper_8,   
62.                                 R.drawable.wallpaper_9 };   
63.   
64.                 //構造方法   
65.                 public ImageAdapter(Context c){   
66.                         mContext = c;   
67.                         //讀取styleable資源   
68.                 TypedArray a = obtainStyledAttributes(R.styleable.HelloGallery);   
69.                 mGalleryItemBackground = a.getResourceId(   
70.                         R.styleable.HelloGallery_android_galleryItemBackground, 0);   
71.                 a.recycle();   
72.   
73.                 }   
74.   
75.                 //返回項目數量   
76.                 @Override  
77.                 public int getCount() {   
78.                         return mImageIds.length;   
79.                 }   
80.   
81.                 //返回項目   
82.                 @Override  
83.                 public Object getItem(int position) {   
84.                         return position;   
85.                 }   
86.   
87.                 //返回項目Id   
88.                 @Override  
89.                 public long getItemId(int position) {   
90.                         return position;   
91.                 }   
92.   
93.                 //返回視圖   
94.                 @Override  
95.                 public View getView(int position, View convertView, ViewGroup parent) {   
96.   
97.                         ImageView iv = new ImageView(mContext);   
98.                         iv.setImageResource(mImageIds[position]);   
99.                         //給生成的ImageView設置Id，不設置的話Id都是-1   
100.                         iv.setId(mImageIds[position]);   
101.                         iv.setLayoutParams(new Gallery.LayoutParams(120, 160));   
102.                         iv.setScaleType(ImageView.ScaleType.FIT_XY);   
103.                         iv.setBackgroundResource(mGalleryItemBackground);   
104.                         return iv;   
105.                 }   
106.   
107.         }   
108. }  

       我們點擊某一張圖片，會把該子元素的圖片顯示在放在後面一層的ImageView組件中。有興趣的同學可以了解一下AdapterView的繼承關系：

       掌握了Gallery的用法後，我們也可以做出很炫的圖片滑動效果了。