分类导航

Android 发布时间：2022-04-28 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Android优质索尼滚动相册，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

虽然索尼手机卖的不怎么样，但是有些东西还是做的挺好的，工业设计就不用说了，索尼的相册的双指任意缩放功能也是尤其炫酷。其桌面小部件滚动相册我觉得也挺好的，比谷歌原生的相册墙功能好多了，网上搜了一下也没发现有人写这个，于是，下面就介绍下我的高A货。

首先是效果图：

Android优质索尼滚动相册

主要手势操作有：

1.上/下满速移动，可以上滑/下滑一张@L_944_3@
2.上/下快读移动，则根据滑动速度，上滑/下滑多张@L_944_3@
3.单击则请求系统图库展示该@L_944_3@

该小部件的主要优点：在屏幕内的小范围内提供一个很好的@L_944_3@选择/浏览部件，尤其是切换@L_944_3@时有很强的靠近/远离动画感，增加好感。

代码分析

刚开始想这个小部件的时候以为是利用多个ImageView叠加实现的效果，例如谷歌原生的该部件就是利用多个ImageView叠加形成的，但是效果远比不上这个。但觉得通过多个ImageView叠加可能会没这么流畅，性能上也不好。该效果本身也比较规律，应该可以通过一个View来实现，达到更好的性能。于是通过View Hierarchy分析，sony这个果然是通过一个View实现的，于是通过如下方式这个小部件。

代码主要由三个部分组成：

•RollImageView：实际的View
•CellCalculater：用来实时计算每张@L_944_3@的绘制区域以及透明度，这个是本小部件的核心部件。接口定义如下：　　

/**
  * 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：用来加载@L_944_3@，提供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中获得的绘制区域以及透明度绘制到屏幕上，目前本代码实现的比较简单，没有考虑不同尺寸的@L_944_3@需要进行一些更加协调的显示方式，比如像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,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分析

首先阐明下向前移动/向后移动的概念。需要显示的@L_944_3@路径存储为一个List，假设显示在最前的@L_944_3@的索引为index，则当前显示的@L_944_3@为[index，index+3]，向前则表示index加1，向后则表示index减1.

CellCalculater的计算情形主要在于用户通过手势操作，表达了需要向前或者向后移动一张@L_944_3@的意图。在View中能够获取到的只是手势移动的距离，所以在CellCalculater中需要对传进来的移动距离进行处理，输出移动结果。在我的实现中，当移动距离超过图片高度一半的时候，就表示显示的@L_944_3@需要移动一位，否则当手势操作结束的时候就设置为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;
  }
  //每张@L_944_3@的高度。
  //假如显示四张图，那么在上面会有三个高度落差，然后最底部保留一个高度落差，所以是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,HEIGHT_INDENT)); //*10使得后面的@L_944_3@迅速向前，向前的动画感更强
   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,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);
   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优质索尼滚动相册全部内容，希望文章能够帮你解决Android优质索尼滚动相册所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：相册

上一篇: Android实现上拉加载更多ListVie... 下一篇:一步步教你写Slack的Loading动画

猜你在找的Android相关文章

对自己的文件使用keystore签名 2022-04-28
Android的onCreateOptionsMenu()创建菜单Menu详解 2019-10-14
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备) 2019-10-14
JQueryMobile + PhoneGap 经验总结 2019-10-14
响应式布局设置--@media only screen and 2019-10-14
-webkit-min-device-pixel-ratio的常见值对照 2019-10-14
Android 打包签名从生成keystore到完成签名 -- 转 2019-10-14
Android App启动错误的问题（connection to the server was unsuccessful） 2019-10-14
关于使用微信登录第三方APP的实现（Android版） 2019-10-14
android 为应用程序创建桌面快捷方式技巧分享 2019-10-14