Android仿微信图片点击浏览的效果

本篇我们来做一个类似于微信的图片点击浏览的效果，点击小图图片后会放大至全屏显示，且中间有一个2d平滑过渡的效果。

思路如下：

首先，从图片缩略界面跳转到图片详情页面，应该是从一个activity跳转到另外一个activity，应该图片详情页面也有很多操作，用view或者dialog不是很好。所以现在难点就是，如何使得前一个界面的imageview在另外一个界面做缩放切割动画。
其次，一般缩略界面的imageview的是正方形的，并且是center_crop缩放属性的。center_crop属性会导致imageview中显示的bitmap有被切割达到填充的效果。
而详情页面的imageview一般都是fit_center的缩放属性。所以要保证这个跳转动画的流畅，要做如下的变化：

1、bitmap的缩放，因为缩略图和详情图的缩放比例肯定不一样。
2、bitmap位置的平移，因为缩略图的位置是不确定的，我们要使他平移到中间。
3、bitmap的切割，因为center_crop是切割过得，而fit_center是没有切割的，那么两幅图显示的内容区域是不同的，所以也要显示区域的平滑变换。

要完成上面的效果，如果单单是指对imageview做一个动画变换，我觉得是完成不了这个要求的。所以自己重写了imageview来完成上述的变换。

自定义smoothimageview
 •设置初始信息，主要是初始宽高和位置 

 public void setoriginalinfo(int width, int height, int locationx, int locationy) {
  moriginalwidth = width;
  moriginalheight = height;
  moriginallocationx = locationx;
  moriginallocationy = locationy;
  // 因为是屏幕坐标，所以要转换为该视图内的坐标，因为我所用的该视图是match_parent，所以不用定位该视图的位置,如果不是的话，还需要定位视图的位置，然后计算moriginallocationx和moriginallocationy
  moriginallocationy = moriginallocationy - getstatusbarheight(getcontext());
 }

 •开始执行进入或退出动作

 /**
  * 用于开始进入的方法。 调用此方前，需已经调用过setoriginalinfo
  */
 public void transformin() {
  mstate = state_transform_in;
  mtransformstart = true;
  invalidate();
 }
 /**
  * 用于开始退出的方法。 调用此方前，需已经调用过setoriginalinfo
  */
 public void transformout() {
  mstate = state_transform_out;
  mtransformstart = true;
  invalidate();
 }

 •进入或退出动作立马会调用ondraw，重新绘图

  @override
 protected void ondraw(canvas canvas) {
  if (getdrawable() == null) {
   return; // couldn't resolve the uri
  }

  if (mstate == state_transform_in || mstate == state_transform_out) {
   if (mtransformstart) {
    inittransform();
   }
   if (mtransfrom == null) {
    super.ondraw(canvas);
    return;
   }

   if (mtransformstart) {
    if (mstate == state_transform_in) {
     mtransfrom.initstartin();
    } else {
     mtransfrom.initstartout();
    }
   }  
   mpaint.setalpha(mbgalpha);
   canvas.drawpaint(mpaint);

   int savecount = canvas.getsavecount();
   canvas.save();
   // 先得到图片在此刻的图像matrix矩阵
   getbmpmatrix();
   canvas.translate(mtransfrom.rect.left, mtransfrom.rect.top);
   canvas.cliprect(0, 0, mtransfrom.rect.width, mtransfrom.rect.height);
   canvas.concat(msmoothmatrix);
   getdrawable().draw(canvas);
   canvas.restoretocount(savecount);
   if (mtransformstart) {
    mtransformstart=false;
    starttransform(mstate);
   } 
  } else {
   //当transform in变化完成后，把背景改为黑色，使得activity不透明
   mpaint.setalpha(255);
   canvas.drawpaint(mpaint);
   super.ondraw(canvas);
  }
 }

ondraw里面又会调用如下几步：
 •初始化transfrom，主要是动作执行完后图片的缩放比例、开始区域和结束区域位置信息

  /**
  * 初始化进入的变量信息
  */
 private void inittransform() {
  if (getdrawable() == null) {
   return;
  }
  if (mbitmap == null || mbitmap.isrecycled()) {
   mbitmap = ((bitmapdrawable) getdrawable()).getbitmap();
  }
  //防止mtransfrom重复的做同样的初始化
  if (mtransfrom != null) {
   return;
  }
  if (getwidth() == 0 || getheight() == 0) {
   return;
  }
  mtransfrom = new transfrom();

  /** 下面为缩放的计算 */
  /* 计算初始的缩放值，初始值因为是centr_crop效果，所以要保证图片的宽和高至少1个能匹配原始的宽和高，另1个大于 */
  float xsscale = moriginalwidth / ((float) mbitmap.getwidth());
  float ysscale = moriginalheight / ((float) mbitmap.getheight());
  float startscale = xsscale > ysscale ? xsscale : ysscale;
  mtransfrom.startscale = startscale;
  /* 计算结束时候的缩放值，结束值因为要达到fit_center效果，所以要保证图片的宽和高至少1个能匹配原始的宽和高，另1个小于 */
  float xescale = getwidth() / ((float) mbitmap.getwidth());
  float yescale = getheight() / ((float) mbitmap.getheight());
  float endscale = xescale < yescale ? xescale : yescale;
  mtransfrom.endscale = endscale;

  /**
   * 下面计算canvas clip的范围，也就是图片的显示的范围，因为图片是慢慢变大，并且是等比例的，所以这个效果还需要裁减图片显示的区域
   * ，而显示区域的变化范围是在原始center_crop效果的范围区域
   * ，到最终的fit_center的范围之间的，区域我用locationsizef更好计算
   * ，他就包括左上顶点坐标，和宽高，最后转为canvas裁减的rect.
   */
  /* 开始区域 */
  mtransfrom.startrect = new locationsizef();
  mtransfrom.startrect.left = moriginallocationx;
  mtransfrom.startrect.top = moriginallocationy;
  mtransfrom.startrect.width = moriginalwidth;
  mtransfrom.startrect.height = moriginalheight;
  /* 结束区域 */
  mtransfrom.endrect = new locationsizef();
  float bitmapendwidth = mbitmap.getwidth() * mtransfrom.endscale;// 图片最终的宽度
  float bitmapendheight = mbitmap.getheight() * mtransfrom.endscale;// 图片最终的宽度
  mtransfrom.endrect.left = (getwidth() - bitmapendwidth) / 2;
  mtransfrom.endrect.top = (getheight() - bitmapendheight) / 2;
  mtransfrom.endrect.width = bitmapendwidth;
  mtransfrom.endrect.height = bitmapendheight;
  mtransfrom.rect = new locationsizef();
 }

 •根据当前是进入还是退出操作，设置动作开始前的缩放比和位置

  private class transfrom {
  float startscale;// 图片开始的缩放值
  float endscale;// 图片结束的缩放值
  float scale;// 属性valueanimator计算出来的值
  locationsizef startrect;// 开始的区域
  locationsizef endrect;// 结束的区域
  locationsizef rect;// 属性valueanimator计算出来的值

  void initstartin() {
   scale = startscale;
   try {
    rect = (locationsizef) startrect.clone();
   } catch (clonenotsupportedexception e) {
    e.printstacktrace();
   }
  }

  void initstartout() {
   scale = endscale;
   try {
    rect = (locationsizef) endrect.clone();
   } catch (clonenotsupportedexception e) {
    e.printstacktrace();
   }
  }  
 }

 •开始变换动作，主要是根据当前是进入还是退出动作，设置起始区域，起始缩放比和结束区域，结束缩放比。然后通过属性动画算出中间每个位置的区域信息和缩放比，在动画的监听过程中去重新绘制view，从而形成从起始区域到结束区域的一个平滑过渡效果。

  private void starttransform(final int state) {
  if (mtransfrom == null) {
   return;
  }
  valueanimator valueanimator = new valueanimator();
  valueanimator.setduration(300);
  valueanimator.setinterpolator(new acceleratedecelerateinterpolator());
  if (state == state_transform_in) {
   propertyvaluesholder scaleholder = propertyvaluesholder.offloat("scale", mtransfrom.startscale, mtransfrom.endscale);
   propertyvaluesholder leftholder = propertyvaluesholder.offloat("left", mtransfrom.startrect.left, mtransfrom.endrect.left);
   propertyvaluesholder topholder = propertyvaluesholder.offloat("top", mtransfrom.startrect.top, mtransfrom.endrect.top);
   propertyvaluesholder widthholder = propertyvaluesholder.offloat("width", mtransfrom.startrect.width, mtransfrom.endrect.width);
   propertyvaluesholder heightholder = propertyvaluesholder.offloat("height", mtransfrom.startrect.height, mtransfrom.endrect.height);
   propertyvaluesholder alphaholder = propertyvaluesholder.ofint("alpha", 0, 255);
   valueanimator.setvalues(scaleholder, leftholder, topholder, widthholder, heightholder, alphaholder);
  } else {
   propertyvaluesholder scaleholder = propertyvaluesholder.offloat("scale", mtransfrom.endscale, mtransfrom.startscale);
   propertyvaluesholder leftholder = propertyvaluesholder.offloat("left", mtransfrom.endrect.left, mtransfrom.startrect.left);
   propertyvaluesholder topholder = propertyvaluesholder.offloat("top", mtransfrom.endrect.top, mtransfrom.startrect.top);
   propertyvaluesholder widthholder = propertyvaluesholder.offloat("width", mtransfrom.endrect.width, mtransfrom.startrect.width);
   propertyvaluesholder heightholder = propertyvaluesholder.offloat("height", mtransfrom.endrect.height, mtransfrom.startrect.height);
   propertyvaluesholder alphaholder = propertyvaluesholder.ofint("alpha", 255, 0);
   valueanimator.setvalues(scaleholder, leftholder, topholder, widthholder, heightholder, alphaholder);
  }

  valueanimator.addupdatelistener(new valueanimator.animatorupdatelistener() {
   @override
   public synchronized void onanimationupdate(valueanimator animation) {
    mtransfrom.scale = (float) animation.getanimatedvalue("scale");
    mtransfrom.rect.left = (float) animation.getanimatedvalue("left");
    mtransfrom.rect.top = (float) animation.getanimatedvalue("top");
    mtransfrom.rect.width = (float) animation.getanimatedvalue("width");
    mtransfrom.rect.height = (float) animation.getanimatedvalue("height");
    mbgalpha = (integer) animation.getanimatedvalue("alpha");
    invalidate();
    ((activity)getcontext()).getwindow().getdecorview().invalidate();
   }
  });
  valueanimator.addlistener(new valueanimator.animatorlistener() {
   @override
   public void onanimationstart(animator animation) {

   }

   @override
   public void onanimationrepeat(animator animation) {

   }

   @override
   public void onanimationend(animator animation) {
    /*
     * 如果是进入的话，当然是希望最后停留在center_crop的区域。但是如果是out的话，就不应该是center_crop的位置了
     * ， 而应该是最后变化的位置，因为当out的时候结束时，不回复视图是normal，要不然会有一个突然闪动回去的bug
     */
    // todo 这个可以根据实际需求来修改
    if (state == state_transform_in) {
     mstate = state_normal;
    }
    if (mtransformlistener != null) {
     mtransformlistener.ontransformcomplete(state);
    }
   }

   @override
   public void onanimationcancel(animator animation) {

   }
  });
  valueanimator.start();
 }

 •最后我们再来看一下动画绘制过程：
得到图片的变换矩阵，先根据当前scale对矩阵设置一个缩放，然后根据当前图片和显示区域差值给矩阵设置一个平移，从而实现center_crop的效果

  private void getbmpmatrix() {
  if (getdrawable() == null) {
   return;
  }
  if (mtransfrom == null) {
   return;
  }
  if (mbitmap == null || mbitmap.isrecycled()) {
   mbitmap = ((bitmapdrawable) getdrawable()).getbitmap();
  }
  /* 下面实现了center_crop的功能 */
  msmoothmatrix.setscale(mtransfrom.scale, mtransfrom.scale);
  msmoothmatrix.posttranslate(-(mtransfrom.scale * mbitmap.getwidth() / 2 - mtransfrom.rect.width / 2),
    -(mtransfrom.scale * mbitmap.getheight() / 2 - mtransfrom.rect.height / 2));
 }

开始canvas绘图，通过平移、切割区域，再关联上面矩阵来实现

int savecount = canvas.getsavecount();
canvas.save();
// 先得到图片在此刻的图像matrix矩阵
getbmpmatrix();
canvas.translate(mtransfrom.rect.left, mtransfrom.rect.top);
canvas.cliprect(0, 0, mtransfrom.rect.width,mtransfrom.rect.height);
canvas.concat(msmoothmatrix);
getdrawable().draw(canvas);
canvas.restoretocount(savecount);

至此，自定义smoothimageview内容差不多讲完了， 下面开看看如何使用它吧。

使用smoothimageview

 •进入

imageview = new smoothimageview(this);
imageview.setoriginalinfo(mwidth, mheight, mlocationx, mlocationy);
imageview.transformin();
imageview.setimageresource(mres);

 •退出 

imageview.setontransformlistener(new smoothimageview.transformlistener() {
  @override
  public void ontransformcomplete(int mode) {
   if (mode == 2) {
    finish();
   }
  }
 });
imageview.transformout();

我们在自定义view里也实现了退出操作成功后的回调，譬如demo中退出成功后就销毁掉当前activity。

最后来看看运行效果图吧!

源码下载：http://xiazai.jb51.net/201609/yuanma/android2dimageview(jb51.net).rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。