Android攻城狮Gallery和ImageSwitcher制作图片浏览器

Posted 2020-09-11 张兮兮

使用Gallery 和 ImageSwitcher 制作图片浏览器
Gallery介绍
我们有时候在手机上或者PC上看到动态的图片，可以通过鼠标或者手指触摸来移动它，产生动态的图片滚动效果，还可以根据你的点击或者触摸来触发其他事件响应。同样的，在android中也提供这种实现，这就是通过Gallery在UI上实现缩略图浏览器。
-------------------------
谷歌已经将Gallery列为过期的控件，建议使用HorizonScrollView或者ViewPager。
-------------------------
查看源码不难发现 ArrayAdapter 和 SimpleAdapter 都继承了 BaseAdapter。
所以，我们也可以自己定义一个适配器！自定义的好处是自由度、灵活性会更大。
BaseAdapter中的重要方法
(1)public int getCount()——返回一定义的数据源的总数量
(2)public Object getItem(int position)
    public long getItemId(int position)
——告诉适配器取得目前容器中的数据ID和对象
(3)public View getView(int position,View convertView,ViewGroupparent)——取得目前要显示的图像View，传入数组ID值使之读取与成像。
-----------------------------------
使用 Gallery 浏览图片的步骤：
1. 在 main.xml 中添加 Gallery标签。
2. 在 MainActivity 中创建数据源，这里就是 int数组存放图片id。
3. 自定义适配器。创建一个新类 ImageAdapter ，继承 BaseAdapter。重写getView(int position, View view, ViewGroup viewGroup)方法。
4. 在 MainActivity加载适配器。

自定义适配器的步骤
1. 创建一个新类 IamgeAdapter ,继承BaseAdapter。
2. 为了接收参数，需要构建有参的构造方法：
    private  int[]res; //用于接收数据源
    private Context context;//上下文信息，ImageView的初始化会用到
    //构造有参构造方法
    public ImageAdapter(int[]res,Context context){
        this.res=res;
        this.context=context;
    }
3. 重写getView()，把图片ID（这里是res[position]）转变为 ImageView，并返回 ImageView：
public View getView(int position, View view, ViewGroup viewGroup) {
    ImageView image = new ImageView(context);
    image.setBackgroundResource(res[position]);
    //设置图片（ImageView）在Gallery中的缩略图的大小
    image.setLayoutParams(new Gallery.LayoutParams(400,300));//宽是400，高是300
    //设置缩放比例（scale）采取的类型
    image.setScaleType(ImageView.ScaleType.FIT_XY);//横向X-Y轴的拉伸
    return image;
}
其他方法的重写，写法固定：
public int getCount() {
        return res.length;
}
public Object getItem(int position) {
        return res[position];
}
public long getItemId(int position) {
        return position;
}

无限轮播图片的实现：
1. 改写 ImageAdapter 适配器的 onCount()方法，使它返回整数最大值 Integer.MAX_VALUE。
2. 改写 getView()：image.setBackgroundResource(res[position%res.length]);
由于数组res的下标的上限是 Integer.MAX_VALUE，所以 position%res.length 的运算结果是一个循环数组。这样就实现了循环播放图片。
---------------------------------------------
ImageSwitcher实现大图浏览的步骤：
1. 在 main.xml 中添加 ImageSwitcher标签。
2. 让 MainActivity 继承接口 ViewFactory。重写方法 makeView()：
    public View makeView() {
        ImageView image = new ImageView(this);//初始化ImageView对象
        image.setScaleType(ImageView.ScaleType.FIT_CENTER);//保持宽高比例，并且居中显示
        return image;
    }
    重写 onItemSelected()，只写一句：imageSwitcher.setBackgroundResource(res[position%res.length]);//imageSwitch加载图片资源。
3. 在 MainActivity 中创建和初始化 ImageSwitcher 的对象。之后加载工厂：imageSwitcher.setFactory(this);
   然后就是加载动画效果，比如：imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_in));//淡入的效果

ImageSwitcher 大图浏览
ImageSwitcher 和 ImageView 的功能有点类似，他们都可以用于显示图片，区别在于 ImageSwitcher 的效果更炫，它可以指定图片切换时的动画效果。
为了让 ImageSwitcher 加载图片，必须让MainActivity实现接口ViewFactory。
---------------------------------------
ViewFactory的使用
ImageSwitcher 粗略的理解就是 ImageView 的选择器，它需要设置 ViewFactory。一般情况下，我们让该 ViewFactory 的 makeView()方法返回 ImageView。
-----------------------------------
为ImageSwitcher加入动画
imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_in));//淡入的效果
imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_out));//淡出的效果

 1 //gallery实现图片大图预览的循环播放
 2 //ImageSwitcher 和 ImageView 的功能有点类似，他们都可以用于显示图片，
 3 //区别在于 ImageSwitcher 的效果更炫，它可以指定图片切换时的动画效果。
 4 //ImageSwitcher实现ViewFactory,监听事件 OnItemSelectedListener 
 5 public class MainActivity extends Activity implements OnItemSelectedListener,
 6         ViewFactory {
 7     // 准备数据源
 8     private int[] res = { R.drawable.item1, R.drawable.item2, R.drawable.item3,
 9             R.drawable.item4, R.drawable.item5, R.drawable.item6,
10             R.drawable.item7, R.drawable.item8, R.drawable.item9,
11             R.drawable.item10, R.drawable.item11, R.drawable.item12 };
12     private Gallery gallery;
13     private ImageAdapter adapter;
14     
15 
16     private ImageSwitcher imageSwitcher;
17 
18     // ArrayAdapter<String> adapter;
19     // SimpleAdapter adapter2;
20     @Override
21     protected void onCreate(Bundle savedInstanceState) {
22         super.onCreate(savedInstanceState);
23         setContentView(R.layout.main);
24         gallery = (Gallery) findViewById(R.id.gallery);
25         imageSwitcher = (ImageSwitcher) findViewById(R.id.imageswitcher);
26         
27         // gallery加载适配器
28         adapter = new ImageAdapter(res, this);
29         gallery.setAdapter(adapter);
30         gallery.setOnItemSelectedListener(this);
31 
32         imageSwitcher.setFactory(this);
33         //添加动画效果
34         imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,
35                 android.R.anim.fade_in));
36         imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,
37                 android.R.anim.fade_out));
38 
39     }
40 
41     @Override
42     public void onItemSelected(AdapterView<?> parent, View view, int position,
43             long id) {
44         // TODO Auto-generated method stub
45         
46         imageSwitcher.setBackgroundResource(res[position % res.length]);
47     }
48 
49     @Override
50     public void onNothingSelected(AdapterView<?> parent) {
51         // TODO Auto-generated method stub
52 
53     }
54 
55     @Override
56     public View makeView() {
57         // TODO Auto-generated method stub
58         ImageView imageView = new ImageView(this);
59         imageView.setScaleType(ScaleType.FIT_CENTER);// 大图预览
60         return imageView;
61     }
62 
63 }

 1 public class ImageAdapter extends BaseAdapter {
 2     private int[] res;
 3     private Context context;
 4 
 5     public ImageAdapter(int[] res, Context context) {
 6         // TODO Auto-generated constructor stub
 7         this.res = res;
 8         this.context = context;
 9     }
10 
11     // 返回已定义的数据源总数量
12     @Override
13     public int getCount() {
14         // TODO Auto-generated method stub
15         
16         //return res.length;
17         return Integer.MAX_VALUE;//循环播放
18     }
19 
20     // 告诉适配器取得目前容器中的数据ID和对象
21     @Override
22     public Object getItem(int position) {
23         // TODO Auto-generated method stub
24         return res[position];
25     }
26 
27     @Override
28     public long getItemId(int position) {
29         // TODO Auto-generated method stub
30         return position;
31     }
32 
33     // 取得目前欲显示的图像view，传入数组ID值使之读取与成像
34     @Override
35     public View getView(int position, View convertView, ViewGroup parent) {
36         // TODO Auto-generated method stub
37         ImageView imageView = new ImageView(context);
38         imageView.setBackgroundResource(res[position%res.length]);//循环播放
39         imageView.setLayoutParams(new Gallery.LayoutParams(100,50));//设置图像大小
40 
41         imageView.setScaleType(ScaleType.FIT_XY);
42         return imageView;
43     }
44 
45 }