Android应用中图片浏览时实现自动切换功能的方法详解

先给最终效果图：

当我们在最下边的gallery中切换图片时，上面的大图片会自动切换，切换时有动画效果哦，很简单的一个程序，有待完善更多的功能！

activity代码：

package cn.com.chenzheng_java;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.Toast;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ImageView.ScaleType;
import android.widget.ViewSwitcher.ViewFactory;

public class GalleryActivity extends Activity implements OnItemSelectedListener {

int[] imagesId = new int[] { R.drawable.a1, R.drawable.a2, R.drawable.a3,
     R.drawable.a4

};
 int index = R.drawable.a1;
 ImageSwitcher imageSwitcher;

@Override
 protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   /**
    * 设置窗口无标题栏,一定要在setContentView前进行设置哦
    */
   requestWindowFeature(Window.FEATURE_NO_TITLE);
   setContentView(R.layout.gallery);

Gallery gallery = (Gallery) findViewById(R.id.gallery1);
   gallery.setOnItemSelectedListener(this);

imageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher);
   imageSwitcher.setVisibility(View.VISIBLE);

/***
    * setInAnimation可以设置淡入动画
    * setOutAnimation可以设置淡出动画
    */
   imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(
       getApplicationContext(), android.R.anim.fade_in));
   imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(
       getApplicationContext(), android.R.anim.fade_out));

imageSwitcher.setFactory(new ViewFactory() {
     /**
      * 创建一个新的图片放置到ImageSwitcher上,可以使用其设置背景哦。
      * 一般只会在创建时调用一次。相当于为我们创建一个进行动画效果时的一个背景图。
      * 此方法亦可以通过setView替代
      */
     @Override
     public View makeView() {
       ImageView imageView = new ImageView(GalleryActivity.this);
       // 设置截取模式
       imageView.setScaleType(ScaleType.CENTER_INSIDE);
       imageView.setBackgroundResource(R.drawable.ground);
       Toast.makeText(getApplicationContext(), "执行了一次",
           Toast.LENGTH_SHORT).show();
       return imageView;
     }
   });

gallery.setVisibility(View.VISIBLE);
   gallery.setAdapter(new ImageAdapter(this));

}

class ImageAdapter extends BaseAdapter {
   private Context context2;

public ImageAdapter(Context context) {
     context2 = context;
   }

@Override
   public int getCount() {
     return imagesId.length;
   }

@Override
   public Object getItem(int position) {
     return imagesId[position];
   }

@Override
   public long getItemId(int position) {
     return position;
   }

@Override
   public View getView(int position, View image2, ViewGroup parent) {
     ImageView image = new ImageView(context2);
     image.setBackgroundResource(imagesId[position]);
     /**
      * setScaleType()可以设置当图片大小和容器大小不匹配时的剪辑模式.
      * ScaleType.CENTER_INSIDE的意思是，按图片的原比例缩小或者扩大，直到长或者宽中的任何一个顶到容器为止
      */
     image.setScaleType(ScaleType.CENTER_INSIDE);

return image;
   }

}
 /**
  * 当gallery的图像发生变化时，同步ImageSwitcher的变化
  */
 @Override
 public void onItemSelected(AdapterView<?> parent, View view, int position,
     long id) {
   imageSwitcher.setImageResource(imagesId[position]);

}

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

}

}

gallery.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:gravity="center_horizontal"
>

<ImageSwitcher
 android:id="@+id/imageSwitcher"
 android:layout_height="350dp"
 android:layout_width="fill_parent"  
></ImageSwitcher>

<Gallery android:id="@+id/gallery1"  
 android:gravity="center"
 android:layout_width="70dp"  
 android:layout_height="100dp"></Gallery>
</LinearLayout>

升级版

较之上面的，效果还是一样的，只不过这里添加了这么以下几个功能：

第一：下方图片的自适应长宽（在保证长宽比例的情况下哦）

第二：触摸大图同样可以进行图片切换（没有机器，没法测试，但是基本的思路还是正确的）

代码：

activity代码：

package cn.com.chenzheng_java;

import java.text.DecimalFormat;

import android.app.Activity;
import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.View.OnTouchListener;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.Toast;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.Gallery.LayoutParams;
import android.widget.ImageView.ScaleType;
import android.widget.ViewSwitcher.ViewFactory;

public class GalleryActivity extends Activity implements OnItemSelectedListener ,OnTouchListener{

int[] imagesId = new int[] { R.drawable.a1, R.drawable.a2, R.drawable.a3,
     R.drawable.a4

};
 int index = 0;
 ImageSwitcher imageSwitcher;
 int maxImageWidth = 70;
 int maxImageHeight = 100;

@Override
 protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   /**
    * 设置窗口无标题栏,一定要在setContentView前进行设置哦
    */
   requestWindowFeature(Window.FEATURE_NO_TITLE);
   setContentView(R.layout.gallery);

Gallery gallery = (Gallery) findViewById(R.id.gallery1);
   gallery.setOnItemSelectedListener(this);

imageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher);
   imageSwitcher.setVisibility(View.VISIBLE);

/***
    * setInAnimation可以设置淡入动画
    * setOutAnimation可以设置淡出动画
    */
   imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(
       getApplicationContext(), android.R.anim.fade_in));
   imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(
       getApplicationContext(), android.R.anim.fade_out));

imageSwitcher.setFactory(new ViewFactory() {
     /**
      * 创建一个新的图片放置到ImageSwitcher上,可以使用其设置背景哦。
      * 一般只会在创建时调用一次。相当于为我们创建一个进行动画效果时的一个背景图。
      * 此方法亦可以通过setView替代
      */
     @Override
     public View makeView() {
       ImageView imageView = new ImageView(GalleryActivity.this);
       // 设置截取模式
       imageView.setScaleType(ScaleType.CENTER_INSIDE);
       imageView.setBackgroundResource(R.drawable.ground);
       Toast.makeText(getApplicationContext(), "执行了一次",
           Toast.LENGTH_SHORT).show();
       return imageView;
     }
   });

gallery.setVisibility(View.VISIBLE);
   gallery.setAdapter(new ImageAdapter(this));

}

class ImageAdapter extends BaseAdapter {
   private Context context2;

public ImageAdapter(Context context) {
     context2 = context;
   }

@Override
   public int getCount() {
     return imagesId.length;
   }

@Override
   public Object getItem(int position) {
     return imagesId[position];
   }

@Override
   public long getItemId(int position) {
     return position;
   }
   /***
    * 该方法的实现稍微复杂一些，主要思想就是，要对图片的大小进行自动剪裁，让其正好宽或者长顶到允许的最大值
    * 这里主要用到了BitmapFactory Bitmap 用于图片获取和处理
    * DecaimalFormat 用于对double数据进行格式规划（这里是只允许小数点后两位）
    */
   @Override
   public View getView(int position, View convertView, ViewGroup parent) {
     index = position;
     ImageView image = new ImageView(context2);
     Resources resources = context2.getResources();
     // 加载图片为Bitmap位图
     Bitmap bitmap = BitmapFactory.decodeResource(resources, imagesId[position]);
     Log.i("是否可以decode这张图片", (bitmap!=null)+"");

// 图片的原始大小
     int bitMapWidth = bitmap.getWidth();
     int bitMapHeight = bitmap.getHeight();
     Log.i("bitMapWidth", bitMapWidth+"");
     Log.i("bitMapHeight", bitMapHeight+"");

// 缩小或者放大的倍数关系
     double scale;
     double widthScale = (maxImageWidth*100)/(bitMapWidth*100.0);//这里乘以100然后除以100.0的目的是为了让其返回double类型
     double heightScale = (maxImageHeight*100)/(bitMapHeight*100.0);

// 规划获得的格式（小数点后两位）
     DecimalFormat decimalFormat = new DecimalFormat("#.00");
     widthScale = Double.valueOf(decimalFormat.format(widthScale));
     heightScale = Double.valueOf(decimalFormat.format(heightScale));

Log.i("widthScale", widthScale+"");
     Log.i("heightScale", heightScale+"");

if(widthScale>= heightScale){
       scale = widthScale;
     }
     else{
       scale = heightScale;
     }

Log.i("scale", scale+"");

// 根据原图片生成一个缩放后的图片
     Bitmap bitmap2 = Bitmap.createScaledBitmap(bitmap, (int)(bitMapWidth*scale), (int)(bitMapHeight*scale), true);
     // 将图片绑定到ImageView
     image.setImageBitmap(bitmap2);

/**
      * setScaleType()可以设置当图片大小和容器大小不匹配时的剪辑模式.
      * ScaleType.CENTER_INSIDE的意思是，按图片的原比例缩小或者扩大，直到长或者宽中的任何一个顶到容器为止
      * 因为在上面我们已经重新生成了一个图片放在gallery上，大小已经符合要求了，所以这里就不需要再通过
      * setScaleType进行剪裁了。有些人可能觉得笔者脑子有病，有简单的不用，非要用那么复杂的，这里呢，其实只是
      * 给大家的一个使用范例，我们通过bitmap可不仅仅是缩放图片哦，还可以倾斜、移动等等……
      */
     // image.setScaleType(ScaleType.CENTER_INSIDE);
     image.setAdjustViewBounds(true);// 自适应边框处理
     image.setLayoutParams(new Gallery.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
     return image;
   }

}
 /**
  * 当gallery的图像发生变化时，同步ImageSwitcher的变化
  */
 @Override
 public void onItemSelected(AdapterView<?> parent, View view, int position,
     long id) {
   imageSwitcher.setImageResource(imagesId[position]);

}

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

}
 int i = 0 ;
 /***
  * 屏幕被触摸时提供的方法,这里我们通过它来实现拖动大图片，也会自动切换图片o
  */
 @Override
 public boolean onTouch(View v, MotionEvent event) {
   Log.i("是否正在触摸", "yes");
   int actionName = event.getAction();
   float []position = null;

//被按下时
   if(actionName==MotionEvent.ACTION_DOWN){
     i = 0;
   }
   // 被按着拖动时
   if(actionName == MotionEvent.ACTION_MOVE)
   {
     position[i] = event.getX();
     ++i;

}
   if(actionName == MotionEvent.ACTION_UP)
   {
     if(position[position.length]>position[position.length-1]){

if((index+1)>imagesId.length){
         imageSwitcher.setImageResource(imagesId[index]);
       }
       else{
         imageSwitcher.setImageResource(imagesId[index+1]);
       }

}
     else{
       if((index-1)<0){
         imageSwitcher.setImageResource(imagesId[0]);
       }
       else{
         imageSwitcher.setImageResource(imagesId[index-1]);
       }

}
   }
   return true;
 }

}

gallery.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:gravity="center_horizontal"
>

<ImageSwitcher
 android:id="@+id/imageSwitcher"
 android:layout_height="350dp"
 android:layout_width="fill_parent"  
></ImageSwitcher>

<Gallery android:id="@+id/gallery1"  
 android:gravity="center"
 android:layout_width="wrap_content"  
 android:layout_height="wrap_content"></Gallery>
</LinearLayout>