Android UI ------ gallery

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

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

 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组件，并设置相应的属性

 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数组

 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实例

 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实例

 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;
34         }

第七步：
实现onItemSelected()方法，更换图片

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

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

@Override
        public View makeView() {
                // TODO Auto-generated method stub
                //创建ImageView
                ImageView i=new ImageView(this);
                //设置背景颜色
                i.setBackgroundColor(0xFF000000);
                //设置精度类型
                i.setScaleType(ImageView.ScaleType.FIT_CENTER);
                //设置布局参数
                i.setLayoutParams(new ImageSwitcher.LayoutParams(
                                LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
                return i;
        }

第九步：
为Gallery添加Adapter并添加OnItemSelectedListener监听器

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

结果：

转载于:https://www.cnblogs.com/jriven/archive/2012/07/26/2610057.html