当前位置： 移动技术网 > IT编程>移动开发>Android > Android App中使用Gallery制作幻灯片播放效果

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

2019年07月24日  | 移动技术网IT编程  | 我要评论

关键词排名点击器,畅销企业网,天下五人行

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

gallery gallery = (gallery) findviewbyid(r.id.gallery);

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

imageadapter。 gallery.setadapter(new imageadapter(this));

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

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

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

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基本都是先完成了，我们还需要为它添加一个监听器，否则这个缩略图浏览器就仅仅只可以看不能用了。

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）幻灯片效果展示：

2016429144840422.jpg (482×284)

2016429144953428.jpg (482×282)

2016429145022604.jpg (482×284)

（2）商品图片滑动展示

2016429145043263.jpg (480×199)

2016429145105549.jpg (480×199)

2016429145122886.jpg (480×198)

查看大图：

2016429145136108.jpg (483×719)

二、部分代码说明

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

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与传进来初始图片个数进行余数计算得到每次循环到哪张图片。部分代码如下：

@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进行处理。 

//定时器和事件处理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上面进行了图片缩放处理，节省了内存开销，又可把图片按照自己的要求缩放。

//由于是测试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）添加了一个相框效果，如果图片加载失败，就会出现一个图片压缩之后大小相等的相框图片。

<?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、

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直接的转换。
   

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网