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> 

只有坚韧不拔向着目标奋进,成功后将在不远处等待着你的到来。

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

相关文章:

你感兴趣的文章:

标签云: