Android App中使用Gallery制作幻灯片播放效果

Posted 2020-10-01 星辰

http://www.jb51.net/article/83313.htm

我们有时候在iPhone手机上或者Windows上面看到动态的图片，可以通过鼠标或者手指触摸来移动它，产生动态的图片滚动效果，还可以根据你的点击或者触摸触发其他事件响应。同样的，在android中也提供这这种实现，这就是通过Gallery在UI上实现缩略图浏览器。
我们来看看Gallery是如何来实现的，先把控件从布局文件中声明，只需知道ID为gallery。

?

1	Gallery gallery = (Gallery) findViewById(R.id.gallery);

 一般情况下，我们在Android中要用到类似这种图片容器的控件，都需要为它指定一个适配器，让它可以把内容按照我们定义的方式来显示，因此我们来给它加一个适配器，至于这个适配器如何实现，后面接着来操作，这里只需知道这个适配器的类叫

?

1	ImageAdapter。 gallery.setAdapter(new ImageAdapter(this));

复制代码接下来就是重头戏了，适配器可以说是最重要的，我们来看看如何做？到这里似乎还缺少一些很重要的东西？什么东西呢？我们需要显示的是图片，那么图片我们当然首先要准备好，这里我们准备了5张图片(存放drawable文件夹中)，我们用其IDs做索引，以便在适配器中使用。

?

1 2 3 4 5 6 7

private Integer[] mps = {   R.drawable.icon1,   R.drawable.icon2,   R.drawable.icon3,   R.drawable.icon4,   R.drawable.icon5 };

OK，这里将开始定义适配器了，通过继承BaseAdapter用以实现的适配器。 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

public class ImageAdapter extends BaseAdapter {  private Context mContext;   public ImageAdapter(Context context) {   mContext = context;  }     public int getCount() {   return mps.length;  }     public Object getItem(int position) {   return position;  }     public long getItemId(int position) {   return position;  }     public View getView(int position, View convertView, ViewGroup parent) {   ImageView image = new ImageView(mContext);   image.setImageResource(mps[position]);   image.setAdjustViewBounds(true);   image.setLayoutParams(new Gallery.LayoutParams(    LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));   return image;  } }

至此，整个Gallery基本都是先完成了，我们还需要为它添加一个监听器，否则这个缩略图浏览器就仅仅只可以看不能用了。

?

1 2 3 4 5 6 7 8 9 10

gallery.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {  @Override  public void onItemSelected(AdapterView<?> parent, View v,int position, long id) {  }     @Override  public void onNothingSelected(AdapterView<?> arg0) {  //这里不做响应  } });

一、效果图展示

最近下载几款手机应用研究了下，发了有些自定义控件惊人的相似，所以我觉得在以后的开发中，对一些控件的复用肯定是很多的，在首页（非载入页）一般都会有一个幻灯片效果，既可以放广告也可以放推荐，如果图片设计的好看，效果一般都会不错，既然用到了Gallery，也附带把相框效果的例子写一写（淘宝详情界面的商品图片滑动展示）

（1）幻灯片效果展示：

（2）商品图片滑动展示

查看大图：

 

二、部分代码说明

1、幻灯片效果的实现：
自定义Gallery：DetailGallery.java
可视界面：ImgSwitchActivity.java
适配类：GalleryIndexAdapter.java
自定义Gallery主要重写onFling通过按下和松手的位置不同比较是向右移动还是向左移动，部分代码如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

private boolean isScrollingLeft(MotionEvent e1, MotionEvent e2) {  return e2.getX() > e1.getX(); } @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,   float velocityY) {  int kEvent;  if (isScrollingLeft(e1, e2)) {   kEvent = KeyEvent.KEYCODE_DPAD_LEFT;  } else {   kEvent = KeyEvent.KEYCODE_DPAD_RIGHT;  }  onKeyDown(kEvent, null);  return true; }

2、在适配类 GalleryIndexAdapter主要完成幻灯片的循环播放，在getCount里面返回值返回Integer.MAX_VALUE，然后在getView里面根据position与传进来初始图片个数进行余数计算得到每次循环到哪张图片。部分代码如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

@Override  public int getCount() {   // TODO Auto-generated method stub   return Integer.MAX_VALUE;  }     ……     @Override  public View getView(int position, View convertView, ViewGroup arg2) {   // TODO Auto-generated method stub   ImageView imageView = new ImageView(context);   imageView.setBackgroundResource(imagList.get(position%imagList.size()));   imageView.setScaleType(ScaleType.FIT_XY);   imageView.setLayoutParams(new Gallery.LayoutParams(Gallery.LayoutParams.FILL_PARENT     , Gallery.LayoutParams.WRAP_CONTENT));   return imageView;  }

     
3、在可视界面里面实现逻辑控制，通过定时器定时刷新幻灯片，定时器通过定时发送消息，消息接受处理机制接收到消息之后，就模拟滑动事件，调用Gallery的onFling方法实现图片自动切换效果。选择按钮的显示效果（RadioButton）需要在Gallery的setOnItemSelectedListener进行处理。 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79

//定时器和事件处理5秒刷新一次幻灯片 /** 展示图控制器，实现展示图切换 */  final Handler handler_gallery = new Handler() {   public void handleMessage(Message msg) {    /* 自定义屏幕按下的动作 */    MotionEvent e1 = MotionEvent.obtain(SystemClock.uptimeMillis(),      SystemClock.uptimeMillis(), MotionEvent.ACTION_UP,      89.333336f, 265.33334f, 0);    /* 自定义屏幕放开的动作 */    MotionEvent e2 = MotionEvent.obtain(SystemClock.uptimeMillis(),      SystemClock.uptimeMillis(), MotionEvent.ACTION_DOWN,      300.0f, 238.00003f, 0);          myGallery.onFling(e2, e1, -800, 0);    /* 给gallery添加按下和放开的动作，实现自动滑动 */    super.handleMessage(msg);   }  };  protected void onResume() {   autogallery();   super.onResume();  };  private void autogallery() {   /* 设置定时器，每5秒自动切换展示图 */   Timer time = new Timer();   TimerTask task = new TimerTask() {    @Override    public void run() {     Message m = new Message();     handler_gallery.sendMessage(m);    }   };   time.schedule(task, 8000, 5000);  } //指示按钮和gallery初始化过程以及事件监听添加过程 //初始化  void init(){   myGallery = (DetailGallery)findViewById(R.id.myGallery);   gallery_points = (RadioGroup) this.findViewById(R.id.galleryRaidoGroup);   ArrayList<Integer> list = new ArrayList<Integer>();   list.add(R.drawable.banner1);   list.add(R.drawable.banner2);   list.add(R.drawable.banner3);   list.add(R.drawable.banner4);   GalleryIndexAdapter adapter = new GalleryIndexAdapter(list, context);   myGallery.setAdapter(adapter);   //设置小按钮   gallery_point = new RadioButton[list.size()];   for (int i = 0; i < gallery_point.length; i++) {    layout = (LinearLayout) inflater.inflate(R.layout.gallery_icon, null);    gallery_point[i] = (RadioButton) layout.findViewById(R.id.gallery_radiobutton);    gallery_point[i].setId(i);/* 设置指示图按钮ID */    int wh = Tool.dp2px(context, 10);    RadioGroup.LayoutParams layoutParams = new RadioGroup.LayoutParams(wh, wh); // 设置指示图大小    gallery_point[i].setLayoutParams(layoutParams);    layoutParams.setMargins(4, 0, 4, 0);// 设置指示图margin值    gallery_point[i].setClickable(false);/* 设置指示图按钮不能点击 */    layout.removeView(gallery_point[i]);//一个子视图不能指定了多个父视图    gallery_points.addView(gallery_point[i]);/* 把已经初始化的指示图动态添加到指示图的RadioGroup中 */   }  }  //添加事件  void addEvn(){   myGallery.setOnItemSelectedListener(new OnItemSelectedListener() {       @Override    public void onItemSelected(AdapterView<?> arg0, View arg1,      int arg2, long arg3) {     // TODO Auto-generated method stub     gallery_points.check(gallery_point[arg2%gallery_point.length].getId());    }       @Override    public void onNothingSelected(AdapterView<?> arg0) {     // TODO Auto-generated method stub           }   });  }

4、商品图片滑动实现过程：
图片滑动效果和上面的幻灯片效果非常的类似，只是在逻辑处理和界面上有一些小小的区别。
（1）适配器类GalleryAdapter.java上面进行了图片缩放处理，节省了内存开销，又可把图片按照自己的要求缩放。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

//由于是测试case，所以图片都是写死的为了区别，在position = 1的时候换了一张图片 public View getView(int position, View convertView, ViewGroup parent) {    // TODO Auto-generated method stub    ImageView imageView = (ImageView) LayoutInflater.from(context).inflate(R.layout.img,      null);    Bitmap bitmap = null;    try {     if(position == 1 ){      bitmap = BitmapFactory.decodeStream(assetManager.open("xpic11247_s.jpg"));      imageView.setTag("xpic11247_s.jpg");     }     else{      bitmap = BitmapFactory.decodeStream(assetManager.open("item0_pic.jpg"));      imageView.setTag("item0_pic.jpg");     }           } catch (IOException e) {     // TODO Auto-generated catch block     e.printStackTrace();    }    // 加载图片之前进行缩放    int width = bitmap.getWidth();    int height = bitmap.getHeight();    float newHeight = 200;    float newWidth = width*newHeight/height;    float scaleWidth = ((float) newWidth) / width;    float scaleHeight = ((float) newHeight) / height;    // 取得想要缩放的matrix参数    Matrix matrix = new Matrix();    matrix.postScale(scaleWidth, scaleHeight);    // 得到新的图片    Bitmap newbm = Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true);    System.out.println(newbm.getHeight()+"-----------"+newbm.getWidth());    imageView.setImageBitmap(newbm);    // }    return imageView;      }

       
（2）添加了一个相框效果，如果图片加载失败，就会出现一个图片压缩之后大小相等的相框图片。

?

1 2 3 4 5 6 7 8

<?xml version="1.0" encoding="utf-8"?> <ImageView xmlns:android="http://schemas.android.com/apk/res/android"  android:id="@+id/waterfall_image"  android:layout_width="fill_parent"  android:layout_height="fill_parent"  android:background="@drawable/image_border"  > </ImageView>

三、开发中遇到一些问题
1、

?

1	layout.removeView(gallery_point[i]);//一个子视图不能指定了多个父视图

如果需要把当前子childview添加到另外一个view里面去，则必须在当前的父View里面移除掉当前的childView，如果不进行这样处理则会抛出Caused by: java.lang.IllegalStateException异常，提示The specified child already has a parent. You must call removeView() on the child‘s parent first.
2、在进行图片缩放的时候，记得处理好dp和px直接的转换。