Android优质索尼滚动相册
虽然索尼手机卖的不怎么样,但是有些东西还是做的挺好的,工业设计就不用说了,索尼的相册的双指任意缩放功能也是尤其炫酷。其桌面小部件滚动相册我觉得也挺好的,比谷歌原生的相册墙功能好多了,网上搜了一下也没发现有人写这个,于是,下面就介绍下我的高a货。
首先是效果图:
主要手势操作有:
1.上/下满速移动,可以上滑/下滑一张图片
2.上/下快读移动,则根据滑动速度,上滑/下滑多张图片
3.单击则请求系统图库展示该图片
该小部件的主要优点:在屏幕内的小范围内提供一个很好的图片选择/浏览部件,尤其是切换图片时有很强的靠近/远离动画感,增加好感。
代码分析
刚开始想这个小部件的时候以为是利用多个imageview叠加实现的效果,例如谷歌原生的该部件就是利用多个imageview叠加形成的,但是效果远比不上这个。但觉得通过多个imageview叠加可能会没这么流畅,性能上也不好。该效果本身也比较规律,应该可以通过一个view来实现,达到更好的性能。于是通过view hierarchy分析,sony这个果然是通过一个view实现的,于是通过如下方式这个小部件。
代码主要由三个部分组成:
•rollimageview:实际的view
•cellcalculater:用来实时计算每张图片的绘制区域以及透明度,这个是本小部件的核心部件。接口定义如下:
/** * get all rects for drawing image * @return */ public cell[] getcells(); /** * * @param distance the motion distance during the period from action_down to this moment * @return 0 means no roll, positive number means roll forward and negative means roll backward */ public int setstatus(float distance); /** * set the dimen of view * @param widht * @param height */ public void setdimen(int widht, int height); /** * set to the status for static */ public void setstatic();
•imageloader:用来加载图片,提供bitmap给rollimageview绘制。接口定义如下:
/** * the images shown roll forward */ public void rollforward(); /** * the images shown roll backward */ public void rollbackward(); /** * get bitmaps * @return */ public bitmap[] getbitmap(); /** * use invalidate to invalidate the view * @param invalidate */ public void setinvalidate(rollimageview.invalidateview invalidate); /** * set the dimen of view * @param width * @param height */ public void setdimen(int width, int height); /** * the image path to be show * @param paths */ public void setimagepaths(list<string> paths); /** * get large bitmap while static */ public void loadcurrentlargebitmap();
下面分析每个部分的核心代码。
rollimageview
view的主要职责是draw各个bitmap以及响应用户的手势操作,相对比较简单。
绘制部分就是把从imageloader获得的的各个bitmap按照从cellcalculater中获得的绘制区域以及透明度绘制到屏幕上,目前本代码实现的比较简单,没有考虑不同尺寸的图片需要进行一些更加协调的显示方式,比如像imageview.scaletype中定义的一些显示方式。
@override public void ondraw(canvas canvas) { super.ondraw(canvas); bitmap[] bitmaps = mimageloader.getbitmap(); cell[] cells = mcellcalculator.getcells(); //得到每张image的显示区域与透明度 canvas.translate(getwidth() / 2, 0); for (int i = show_cnt - 1; i >= 0; i--) { //从最底层的image开始绘制 bitmap bitmap = bitmaps[i]; cell cell = cells[i]; if (bitmap != null && !bitmap.isrecycled()) { mpaint.setalpha(cell.getalpha()); log("ondraw " + i + bitmap.getwidth() + " " + cell.getrectf() + " alpha " + cell.getalpha()); canvas.drawbitmap(bitmap, null, cell.getrectf(), mpaint); } } }
手势部分采用了gesturelistener,主要代码如下:
@override public boolean ontouchevent(motionevent event) { if (event.getpointercount() > 1) { return false; } mgesturedetector.ontouchevent(event); switch (event.getaction()) { case motionevent.action_up: //这里主要用于处理没有触发fling事件时,使界面保持没有移动的状态 if(!misfling){ if(mrollresult == cellcalculator.roll_forward){ mimageloader.rollforward(); } else if (mrollresult == cellcalculator.roll_backward && !mscrollrollback){ mimageloader.rollbackward(); } log("ongesturelistener action_up setstatic " ); mcellcalculator.setstatic(); mimageloader.loadcurrentlargebitmap(); } break; default: break; } return true; } //缓慢拖动 @override public boolean onscroll(motionevent e1, motionevent e2, float distancex, float distancey) { mscrolldistance += distancey; if(mscrolldistance > 0 && !mscrollrollback){ mimageloader.rollbackward(); mscrollrollback = true; } else if(mscrolldistance < 0 && mscrollrollback){ mimageloader.rollforward(); mscrollrollback = false; } log("ongesturelistener onscroll " + distancey + " all" + mscrolldistance); mrollresult = mcellcalculator.setstatus(-mscrolldistance); invalidate(); return true; } //快速拖动 @override public boolean onfling(motionevent e1, motionevent e2, float velocityx, float velocityy) { if (math.abs(velocityy) > min_fling) { log("ongesturelistener onfling " + velocityy); if (mexecutorservice == null) { mexecutorservice = executors.newsinglethreadexecutor(); } misfling = true; mexecutorservice.submit(new flingtask(velocityy)); } return true; } //利用一个异步任务来处理滚动多张images private class flingtask implements runnable { float mvelocity; float mviewheight; int msleeptime; boolean mrollbackward; flingtask(float velocity) { mrollbackward = velocity < 0 ? true : false; mvelocity = math.abs(velocity / 4); mviewheight = rollimageview.this.getheight() / 2; msleeptime = (int)(4000 / math.abs(velocity) * 100); //the slower velocity of fling, the longer interval for roll } @override public void run() { int i = 0; try{ while (mvelocity > mviewheight) { mcellcalculator.setstatus(mrollbackward ? -mviewheight : mviewheight); mhandler.sendemptymessage(msg_invalate); //determines the count of roll. the using of mviewheight has no strictly logical mvelocity -= mviewheight; if (((i++) & 1) == 0) { //roll forward once for every two setstatus if(mrollbackward){ mimageloader.rollbackward(); }else { mimageloader.rollforward(); } } thread.sleep(msleeptime); } mcellcalculator.setstatic(); mimageloader.loadcurrentlargebitmap(); mhandler.sendemptymessage(msg_invalate); } catch(exception e){ } finally{ } } }
cellcalculater分析
首先阐明下向前移动/向后移动的概念。需要显示的图片路径存储为一个list,假设显示在最前的图片的索引为index,则当前显示的图片为[index,index+3],向前则表示index加1,向后则表示index减1.
cellcalculater的计算情形主要在于用户通过手势操作,表达了需要向前或者向后移动一张图片的意图。在view中能够获取到的只是手势移动的距离,所以在cellcalculater中需要对传进来的移动距离进行处理,输出移动结果。在我的实现中,当移动距离超过图片高度一半的时候,就表示显示的图片需要移动一位,否则当手势操作结束的时候就设置为static状态。主要代码如下:
public defaultcellcalculator(int showcnt){ mcnt = showcnt; mcells = new cell[mcnt]; malphas = new float[mcnt]; static_alpha = new int[mcnt]; static_alpha[mcnt - 1] = 0; //最后一张图的透明度为0 int alphaunit = (255 - first_alpha) / (mcnt - 2); for(int i = mcnt - 2; i >= 0; i--){ //定义静态时每张图的透明度 static_alpha[i] = first_alpha + (mcnt - 2 - i) * alphaunit; } } @override public cell[] getcells() { return mcells; } //用户手势移动,distance表示移动距离,正负值分别意味着需要向前/向后移动 @override public int setstatus(float distance) { if(distance > 0){ return calculateforward(distance); } else if(distance < 0){ return calculatebackward(distance); } else{ initcells(); } return 0; } //设置rollimageview的尺寸,从而计算合适的显示区域 @override public void setdimen(int widht, int height) { mviewwidth = widht; mviewheight = height; mwidhtindent = (int)(widht_indent * mviewwidth); mwidths = new int[mcnt]; for(int i = 0; i < mcnt; i++){ mwidths[i] = mviewwidth - i * mwidhtindent; } //每张图片的高度。 //假如显示四张图,那么在上面会有三个高度落差,然后最底部保留一个高度落差,所以是mcnt-1 mimageheight = mviewheight - (mcnt - 1) * height_indent; log("mimageheight " + mimageheight); initcells(); } //静态时,即用户手势操作结束时 @override public void setstatic() { initcells(); } //用户有需要向前移动一位的趋势 private int calculateforward(float status){ float scale = status / mimageheight; log("scale " + scale + " mimageheight " + mimageheight + " status " + status); for(int i = 1; i < mcnt; i++){ mcells[i].setwidth(interpolate(scale * 3, mwidths[i], mwidths[i - 1])); // *3 使得后面的宽度快速增大,经验值 mcells[i].movevertical(interpolate(scale * 10, 0, height_indent)); //*10使得后面的图片迅速向前,向前的动画感更强 mcells[i].setalpha((int)interpolate(scale, static_alpha[i], static_alpha[i - 1])); } mcells[0].movevertical(status); mcells[0].setalpha((int)interpolate(scale, 255, 0)); if(status >= mimageheight / 3){ return roll_forward; } else { return 0; } } //用户有需要向后移动一位的趋势 private int calculatebackward(float status){ float scale = math.abs(status / mimageheight); for(int i = 1; i < mcnt; i++){ mcells[i].setwidth(interpolate(scale, mwidths[i - 1], mwidths[i])); mcells[i].movevertical(-scale * height_indent); mcells[i].setalpha((int)interpolate(scale, static_alpha[i - 1], static_alpha[i])); } mcells[0].resetrect(); mcells[0].setwidth(mwidths[0]); mcells[0].setheight(mimageheight); mcells[0].movevertical(mimageheight + status); mcells[0].setalpha((int)interpolate(scale, 0, 255)); if(-status >= mimageheight / 3){ return roll_backward; } else { return 0; } } /** * status without move */ private void initcells(){ int top = -height_indent; for(int i = 0; i < mcnt; i++){ rectf rectf = new rectf(0,0,0,0); rectf.top = top + (mcnt - 1 - i) * height_indent; rectf.bottom = rectf.top + mimageheight; mcells[i] = new cell(rectf, static_alpha[i]); mcells[i].setwidth(mwidths[i]); } } //计算差值 private float interpolate(float scale, float start, float end){ if(scale > 1){ scale = 1; } return start + scale * (end - start); }
imageloader分析
imageloader其实比较简单,主要有如下两点:
•响应手势操作,处理对应的向前/向后移动时的bitmap请求
•当手势还在操作时,应该加载小图,等手势操作结束之后,应该加载大图。因为只有缓慢移动时,需要清晰显示,而快速移动时,显示小图即可,所以需要加载当前index以及向前向后一张图即可。
//加载当前index以及向前向后三张大图 @override public void loadcurrentlargebitmap() { for(int i = mcurrentindex - 1; i < mcurrentindex + 2; i++){ if(i >= 0 && i < mimagescnt - 1){ mbitmapcache.getlargebitmap(mallimagepaths[i]); } } } //index向前移动一位 @override public void rollforward() { log("rollforward"); mcurrentindex++; if(mcurrentindex > mimagescnt - 1){ mcurrentindex = mimagescnt - 1; } setcurrentpaths(); } //index向后移动一位 @override public void rollbackward() { log("rollbackward"); mcurrentindex--; if(mcurrentindex < 0){ mcurrentindex = 0; } setcurrentpaths(); } @override public bitmap[] getbitmap() { if(mcurrentpaths != null){ log("getbitmap paths nut null"); for(int i = mcurrentindex, j = 0; j < mshowcnt; j++, i++){ if(i >= 0 && i < mimagescnt){ mcurrentbitmaps[j] = mbitmapcache.getbimap(mallimagepaths[i]); } else{ mcurrentbitmaps[j] = mbitmapcache.getbimap(no_path); } } } return mcurrentbitmaps; }
最后,所有源代码:https://github.com/willhua/rollimage
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。