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) {
评论0