虽然索尼手机卖的不怎么样，但是有些东西还是做的挺好的，工业设计就不用说了，索尼的相册的双指任意缩放功能也是尤其炫酷。其桌面小部件滚动相册我觉得也挺好的，比谷歌原生的相册墙功能好多了，网上搜了一下也没发现有人写这个，于是，下面就介绍下我的高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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Android studio开发小型对话机器人app(实例代码)
Android通过Java sdk的方式接入OpenCv的方法
Android 通过cmake的方式接入opencv的方法步骤
Android Studio finish()方法的使用与解决app点击“返回”(直接退出)
Android 进度条 ProgressBar的实现代码(隐藏、出现、加载进度)
网友评论