Android App中使用Gallery制作幻灯片播放效果
零、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)幻灯片效果展示:
(2)商品图片滑动展示
查看大图:
二、部分代码说明
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直接的转换。