玩转Android---UI篇---Gallery（画廊视图）

原址：http://hualang.iteye.com/category/143855

玩转Android---UI篇---Gallery（画廊视图）

Gallery能够水平显示其内容，一般用来浏览图片，被选中的选项位于中间，并且可以相应事件显示信息。下面结合ImageSwitcher组件来实现一个通过缩略图来浏览图片的程序，具体步骤如下

 

第一步：

创建一个Andorid工程"GalleryTest”，该工程的入口是Activity类GalleryTest继承Activity并实现OnItemSelectedListener和ViewFactory接口，来实现图片和视图的创建

 

Java代码  

1. package org.hualang.Gallery;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.view.View;  
6. import android.widget.AdapterView;  
7. import android.widget.AdapterView.OnItemSelectedListener;  
8. import android.widget.ViewSwitcher.ViewFactory;  
9. //继承Activity，实现onItemSelectedListener和ViewFactory接口  
10. public class GalleryTest extends Activity implements OnItemSelectedListener,ViewFactory{  
11.     /** Called when the activity is first created. */  
12.     @Override  
13.     public void onCreate(Bundle savedInstanceState) {  
14.         super.onCreate(savedInstanceState);  
15.         setContentView(R.layout.main);  
16.     }  
17.   
18.     @Override  
19.     public View makeView() {  
20.         // TODO Auto-generated method stub  
21.         return null;  
22.     }  
23.   
24.     @Override  
25.     public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2,  
26.             long arg3) {  
27.         // TODO Auto-generated method stub  
28.           
29.     }  
30.   
31.     @Override  
32.     public void onNothingSelected(AdapterView<?> arg0) {  
33.         // TODO Auto-generated method stub  
34.           
35.     }  
36. }  

 第二步：

在工程的res\drawable\目录下添加7张图片和对应的缩略图

 

第三步：

在工程res\layout\目录下创建一个布局文件main.xml，在其中那个添加一个Gallery组件和一个ImageSwitcher组件，并设置相应的属性

 

Java代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:orientation="vertical"  
4.     android:layout_width="fill_parent"  
5.     android:layout_height="fill_parent"  
6.     >  
7.  <ImageSwitcher android:id="@+id/switcher"  
8.         android:layout_width="fill_parent"  
9.         android:layout_height="fill_parent"  
10.         android:layout_alignParentTop="true"  
11.         android:layout_alignParentLeft="true"  
12.     />  
13.       
14.     <Gallery android:id="@+id/gallery"  
15.         android:background="#55000000"  
16.         android:layout_width="fill_parent"  
17.         android:layout_height="60dp"  
18.         android:layout_alignParentBottom="true"  
19.         android:layout_alignParentLeft="true"  
20.         android:gravity="center_vertical"  
21.         android:spacing="16dp"  
22.     />  
23. </LinearLayout>  

 第四步：

在GalleryTest顶部声明使用到的ImageSwitcher实例图片资源Integer数组

 

Java代码  

1. public class GalleryTest extends Activity implements OnItemSelectedListener,ViewFactory{  
2.     /** Called when the activity is first created. */  
3.     //声明ImageSwitcher  
4.     private ImageSwitcher switcher;  
5.     //缩略图片id数组  
6.     private Integer[] thumbids={  
7.             R.drawable.thumb0,  
8.             R.drawable.thumb1,  
9.             R.drawable.thumb2,  
10.             R.drawable.thumb3,  
11.             R.drawable.thumb4,  
12.             R.drawable.thumb5,  
13.             R.drawable.thumb6,  
14.             R.drawable.thumb7  
15.     };  
16.     //图片id数组  
17.     private Integer[] imgids={  
18.             R.drawable.img0,  
19.             R.drawable.img1,  
20.             R.drawable.img2,  
21.             R.drawable.img3,  
22.             R.drawable.img4,  
23.             R.drawable.img5,  
24.             R.drawable.img6,  
25.             R.drawable.img7  
26.     };  

 第五步：

在GalleryTest的onCreate()方法中，将窗口样式设置为无标题，设置当前布局视图，获得ImageSwitcher实例，并设置渐进渐出动画，获得Gallery实例

 

Java代码  

1. public void onCreate(Bundle savedInstanceState) {  
2.        super.onCreate(savedInstanceState);  
3.        //设置窗口特征无标题  
4.        requestWindowFeature(Window.FEATURE_NO_TITLE);  
5.        setContentView(R.layout.main);  
6.        //通过findViewById方法获得ImageSwitcher对象  
7.        switcher=(ImageSwitcher)findViewById(R.id.switcher);  
8.        //为ImageSwitcher设置工厂  
9.        switcher.setFactory(this);  
10.        //设置动画渐入效果  
11.        switcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in));  
12.        //设置动画渐出效果  
13.        switcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));  
14.        //通过findViewById方法获得Gallery对象  
15.        Gallery g=(Gallery)findViewById(R.id.gallery);  
16.    }  

 第六步：

创建内部类ImageAdapter，该类继承BaseAdapter，为Gallery设置Adapter实例

 

Java代码  

1.   public class ImageAdapter extends BaseAdapter {  
2.     //构造方法  
3. public ImageAdapter(Context c) {  
4.     mContext = c;  
5. }  
6. //获得数量  
7. public int getCount() {  
8.     return thumbids.length;  
9. }  
10. //获得当前选项  
11. public Object getItem(int position) {  
12.     return position;  
13. }  
14. //获得当前选项ID  
15. public long getItemId(int position) {  
16.     return position;  
17. }  
18. //获得View对象  
19. public View getView(int position, View convertView, ViewGroup parent) {  
20.     //实例化ImageView对象  
21.     ImageView i = new ImageView(mContext);  
22.     //设置缩略图片资源  
23.     i.setImageResource(thumbids[position]);  
24.     //设置边界对齐  
25.     i.setAdjustViewBounds(true);  
26.     //设置布局参数  
27.     i.setLayoutParams(new Gallery.LayoutParams(  
28.             LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));  
29.     //设置背景资源  
30.     i.setBackgroundResource(R.drawable.picturefrom);  
31.     return i;  
32. }  
33. private Context mContext;  

 第七步：

实现onItemSelected()方法，更换图片

 

Java代码  

1. @Override  
2. public void onItemSelected(AdapterView<?> adapter, View v, int position,  
3.         long id) {  
4.     switcher.setImageResource(imgids[position]);  
5. }  

 第八步：

实现makeView()方法，为ImageView设置布局格式

 

Java代码  

1. @Override  
2. public View makeView() {  
3.     // TODO Auto-generated method stub  
4.     //创建ImageView  
5.     ImageView i=new ImageView(this);  
6.     //设置背景颜色  
7.     i.setBackgroundColor(0xFF000000);  
8.     //设置精度类型  
9.     i.setScaleType(ImageView.ScaleType.FIT_CENTER);  
10.     //设置布局参数  
11.     i.setLayoutParams(new ImageSwitcher.LayoutParams(  
12.             LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));  
13.     return i;  
14. }  

 第九步：

为Gallery添加Adapter并添加OnItemSelectedListener监听器

Java代码  

1. g.setAdapter(new ImageAdapter(this));  
2.         g.setOnItemSelectedListener(this);  

 

至此，全部，结束，运行结果如下

 

完整源代码：

 

Java代码  

1. package org.hualang.Gallery;  
2.   
3. import android.app.Activity;  
4. import android.content.Context;  
5. import android.os.Bundle;  
6. import android.view.View;  
7. import android.view.ViewGroup;  
8. import android.view.Window;  
9. import android.view.animation.AnimationUtils;  
10. import android.widget.AdapterView;  
11. import android.widget.BaseAdapter;  
12. import android.widget.Gallery;  
13. import android.widget.ImageSwitcher;  
14. import android.widget.ImageView;  
15. import android.widget.AdapterView.OnItemSelectedListener;  
16. import android.widget.Gallery.LayoutParams;  
17. import android.widget.ViewSwitcher.ViewFactory;  
18.   
19. public class GalleryTest extends Activity implements OnItemSelectedListener,  
20.         ViewFactory {  
21.       
22.     private ImageSwitcher mSwitcher;  
23.       
24.     private Integer[] mThumbIds = { R.drawable.thumb0,  
25.             R.drawable.thumb1, R.drawable.thumb2,  
26.             R.drawable.thumb3, R.drawable.thumb4,  
27.             R.drawable.thumb5, R.drawable.thumb6,  
28.             R.drawable.thumb7 };  
29.   
30.     private Integer[] mImageIds = { R.drawable.img0, R.drawable.img1,  
31.             R.drawable.img2, R.drawable.img3, R.drawable.img4,  
32.             R.drawable.img5, R.drawable.img6, R.drawable.img7 };  
33.   
34.     @Override  
35.     public void onCreate(Bundle savedInstanceState) {  
36.         super.onCreate(savedInstanceState);  
37.           
38.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
39.         setContentView(R.layout.main);  
40.         mSwitcher = (ImageSwitcher) findViewById(R.id.switcher);  
41.         mSwitcher.setFactory(this);  
42.         mSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,  
43.                 android.R.anim.fade_in));  
44.         mSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,  
45.                 android.R.anim.fade_out));  
46.   
47.         Gallery g = (Gallery) findViewById(R.id.gallery);  
48.           
49.         g.setAdapter(new ImageAdapter(this));  
50.         g.setOnItemSelectedListener(this);  
51.   
52.     }  
53.   
54.     public class ImageAdapter extends BaseAdapter {  
55.         public ImageAdapter(Context c) {  
56.             mContext = c;  
57.         }  
58.         public int getCount() {  
59.             return mThumbIds.length;  
60.         }  
61.         public Object getItem(int position) {  
62.             return position;  
63.         }  
64.         public long getItemId(int position) {  
65.             return position;  
66.         }  
67.         public View getView(int position, View convertView, ViewGroup parent) {  
68.             ImageView i = new ImageView(mContext);  
69.   
70.             i.setImageResource(mThumbIds[position]);  
71.             i.setAdjustViewBounds(true);  
72.             i.setLayoutParams(new Gallery.LayoutParams(  
73.                     LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));  
74.             i.setBackgroundResource(R.drawable.picturefrom);  
75.             return i;  
76.         }  
77.         private Context mContext;  
78.     }  
79.   
80.     @Override  
81.     public void onItemSelected(AdapterView<?> adapter, View v, int position,  
82.             long id) {  
83.         mSwitcher.setImageResource(mImageIds[position]);  
84.     }  
85.   
86.     @Override  
87.     public void onNothingSelected(AdapterView<?> arg0) {  
88.   
89.     }  
90.   
91.     @Override  
92.     public View makeView() {  
93.         ImageView i = new ImageView(this);  
94.         i.setBackgroundColor(0xFF000000);  
95.         i.setScaleType(ImageView.ScaleType.FIT_CENTER);  
96.         i.setLayoutParams(new ImageSwitcher.LayoutParams(  
97.                 LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));  
98.         return i;  
99.     }  
100. }  

 

 <?xml version="1.0" encoding="utf-8"?>

Java代码  

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"   
2.     android:layout_width="fill_parent"   
3.     android:layout_height="fill_parent">   
4.       
5.     <ImageSwitcher android:id="@+id/switcher"  
6.         android:layout_width="fill_parent"  
7.         android:layout_height="fill_parent"  
8.         android:layout_alignParentTop="true"  
9.         android:layout_alignParentLeft="true"  
10.     />  
11.       
12.     <Gallery android:id="@+id/gallery"  
13.         android:background="#55000000"  
14.         android:layout_width="fill_parent"  
15.         android:layout_height="60dp"  
16.         android:layout_alignParentBottom="true"  
17.         android:layout_alignParentLeft="true"  
18.         android:gravity="center_vertical"  
19.         android:spacing="16dp"  
20.     />  
21.   
22. </RelativeLayout>