安卓开发笔记——Gallery组件+ImageSwitcher组件

什么是Gallery？

Gallery是一个水平的列表选择框，它允许用户通过拖动来查看上一个、下一个列表选项。

下图是今天要实现的最终效果：

利用Gallery组件实现的一个横向显示图像列表，可以通过左、右滑动屏幕来切换图像，并加上ImageSwitcher实现一个大图片预览功能。

1、一步一步来吧，首先先解决下上半部分（图像导航）

先来看下效果图，下图是利用Gallery组件实现的一个横向显示图像列表，可以通过左、右滑动屏幕来切换图像。

 

直接上代码，注释很全。

MainActivity.java

 package com.example.galleytest;

 import android.app.Activity;
 import android.os.Bundle;
 import android.widget.Gallery;
 /**
  *
  * @author Balla_兔子
  * 和往常控制使用方法大同小异
  * 1、获取数据源
  * 2、配置适配器
  * 3、绑定适配器
  */
 public class MainActivity extends Activity {

     private Gallery gallery;// 声明gallery对象
     private ImageAdapter adapter;//声明自定义adapter对象

     // 1、定义数据源
     private int[] images = { 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 };

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);

         gallery=(Gallery) findViewById(R.id.gallery);//取得对象

         //2、设置适配器
         adapter=new ImageAdapter(images, this);//实例化自定义适配器对象

         //3、绑定适配器
         gallery.setAdapter(adapter);

     }

 }

ImageAdapter.java

 package com.example.galleytest;

 import android.content.Context;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.BaseAdapter;
 import android.widget.Gallery;
 import android.widget.ImageView;
 import android.widget.ImageView.ScaleType;

 //自定义适配器，继承BaseAdapter复写方法
 public class ImageAdapter extends BaseAdapter {

     private int images[];
     private Context context;
     public ImageAdapter(int res[],Context context){
         this.images=res;
         this.context=context;
     }
     @Override
     //获取资源总长度
     public int getCount() {
         return images.length;
     }

     @Override
     //根据下标id获取资源对象
     public Object getItem(int position) {
         return images[position];
     }

     @Override
     //根据返回下标id
     public long getItemId(int position) {
         return position;
     }

     @Override
     //根据下标id返回对象的视图view
     public View getView(int position, View convertView, ViewGroup parent) {
         //利用ImageView返回图像展示
         ImageView imageView=new ImageView(context);
         //设置ImageView背景图
         imageView.setBackgroundResource(images[position]);
         //setLayoutParams()这个函数用于代码自定义布局，为创建的view(ImageView)对象设置位置，大小，颜色等一系列的属性
         imageView.setLayoutParams(new Gallery.LayoutParams(200, 150));
         //设置展示缩放风格
         imageView.setScaleType(ScaleType.FIT_XY);
         return imageView;
     }

 }

activity_main.xml

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:paddingBottom="@dimen/activity_vertical_margin"
     android:paddingLeft="@dimen/activity_horizontal_margin"
     android:paddingRight="@dimen/activity_horizontal_margin"
     android:paddingTop="@dimen/activity_vertical_margin"
     android:orientation="vertical"
     tools:context="com.example.galleytest.MainActivity" >
     <Gallery
             android:id="@+id/gallery"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
         />

 </LinearLayout>

执行完上面代码我们会发现，当图片滚动到第一张或者最后一张，就自动停止， 我们可以把它设置成无限循环重复的去展示这些图片。

这里我们只需要去改动自定义ImageAdapter适配器里2个位置就可以实现这个无限循环的效果

其一：返回图片资源长度，我们返回的长度不再是数组长度，而是一个巨大数

     //获取资源总长度
     public int getCount() {
         //return images.length;
         return Integer.MAX_VALUE;//返回一个巨大数
     }

其二：为ImageView设置图片显示资源，我们用取余的方法，让它实现无限循环

     public View getView(int position, View convertView, ViewGroup parent) {
         //利用ImageView返回图像展示
         ImageView imageView=new ImageView(context);
         //设置ImageView背景图
         imageView.setBackgroundResource(images[position%images.length]);    //用取余的方法，让它实现无限循环
         //setLayoutParams()这个函数用于代码自定义布局，为创建的view(ImageView)对象设置位置，大小，颜色等一系列的属性
         imageView.setLayoutParams(new Gallery.LayoutParams(200, 150));
         //设置展示缩放风格
         imageView.setScaleType(ScaleType.FIT_XY);
         return imageView;
     }

无限循环轻松搞定，再试试看效果吧~

2、结合ImageSwitcher组件，使得图片浏览效果更为流畅（可以把ImageSwitcher粗略的想象成ImageView的加强版，它可以带来很多效果，比如图片动画）

直接上代码，依旧人性化注释全面~

MainActivity.java

 package com.example.galleytest;

 import android.app.Activity;
 import android.os.Bundle;
 import android.view.View;
 import android.view.animation.AnimationUtils;
 import android.widget.AdapterView;
 import android.widget.Gallery;
 import android.widget.ImageSwitcher;
 import android.widget.ImageView;
 import android.widget.ImageView.ScaleType;
 import android.widget.ViewSwitcher.ViewFactory;
 /**
  *
  * @author Balla_兔子
  * 和往常控制使用方法大同小异
  * 1、获取数据源
  * 2、配置适配器
  * 3、绑定适配器
  *
  * 为Grallery设置监听，因要结合ImageSwitcher，这里需要额外的实现一个图像制造工厂ViewFactory
  */
 public class MainActivity extends Activity implements android.widget.AdapterView.OnItemSelectedListener,ViewFactory{

     private Gallery gallery;// 声明gallery对象
     private ImageSwitcher imageSwitcher;//声明一个ImageSwitcher对象
     private ImageAdapter adapter;//声明自定义adapter对象

     // 1、定义数据源
     private int[] images = { 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 };

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);

         gallery=(Gallery) findViewById(R.id.gallery);//取得对象
         imageSwitcher=(ImageSwitcher) findViewById(R.id.imageSwitcher);//取得对象

         //添加监听
         gallery.setOnItemSelectedListener(this);
         imageSwitcher.setFactory(this);
         //设置动画效果，图片在imageSwitch的渐入渐出效果
         imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in));
         imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));

         //2、设置适配器
         adapter=new ImageAdapter(images, this);//实例化自定义适配器对象

         //3、绑定适配器
         gallery.setAdapter(adapter);

     }

     @Override
     //实现ViewFactory里的制造图像方法，这里需要返回一个view对象，同样的我们可以采用返回ImageView
     public View makeView() {
         ImageView imageView=new ImageView(this);
         imageView.setScaleType(ScaleType.FIT_CENTER);//展示效果
         return imageView;
     }

     //Gallery组件的监听器
     @Override
     public void onItemSelected(AdapterView<?> parent, View view, int position,
             long id) {
             imageSwitcher.setBackgroundResource(images[position%images.length]);
     }

     @Override
     public void onNothingSelected(AdapterView<?> parent) {

     }

 }

ImageAdapter.java

 package com.example.galleytest;

 import android.content.Context;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.BaseAdapter;
 import android.widget.Gallery;
 import android.widget.ImageView;
 import android.widget.ImageView.ScaleType;

 //自定义适配器，继承BaseAdapter复写方法
 public class ImageAdapter extends BaseAdapter {

     private int images[];
     private Context context;
     public ImageAdapter(int res[],Context context){
         this.images=res;
         this.context=context;
     }
     @Override
     //获取资源总长度
     public int getCount() {
         //return images.length;
         return Integer.MAX_VALUE;//返回一个巨大数
     }

     @Override
     //根据下标id获取资源对象
     public Object getItem(int position) {
         return images[position];
     }

     @Override
     //根据返回下标id
     public long getItemId(int position) {
         return position;
     }

     @Override
     //根据下标id返回对象的视图view
     public View getView(int position, View convertView, ViewGroup parent) {
         //利用ImageView返回图像展示
         ImageView imageView=new ImageView(context);
         //设置ImageView背景图
         imageView.setBackgroundResource(images[position%images.length]);    //用取余的方法，让它实现无限循环
         //setLayoutParams()这个函数用于代码自定义布局，为创建的view(ImageView)对象设置位置，大小，颜色等一系列的属性
         imageView.setLayoutParams(new Gallery.LayoutParams(200, 150));
         //设置展示缩放风格
         imageView.setScaleType(ScaleType.FIT_XY);
         return imageView;
     }

 }

activity_main.xml

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:paddingBottom="@dimen/activity_vertical_margin"
     android:paddingLeft="@dimen/activity_horizontal_margin"
     android:paddingRight="@dimen/activity_horizontal_margin"
     android:paddingTop="@dimen/activity_vertical_margin"
     android:orientation="vertical"
     tools:context="com.example.galleytest.MainActivity" >
     <Gallery
             android:id="@+id/gallery"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
         />

     <ImageSwitcher
         android:id="@+id/imageSwitcher"
         android:layout_height="wrap_content"
         android:layout_width="fill_parent"
         android:layout_marginTop="20dp"
         ></ImageSwitcher>
 </LinearLayout>