Android高仿微信查看大图

初级文章，大神请轻喷
先上效果图：

效果.gif

知识要点：
属性动画的使用
Android顶部状态栏的隐藏（Theme）
一、属性动画
本文主要用了缩放动画，重点在于缩放动画的起始位置的计算。
1、先计算原小图与全屏大图的缩放比例mScale

    public static float getCurrentPicOriginalScale(Context context, JPhotosInfos infos){

        float mScale;

        int width = infos.getWidth();
        int height = infos.getHeight();

        float imgScale = JBitmapUtils.getImgScale(width, height);
        float mWindowScale = JWindowUtil.getWindowScale(context);

        if(imgScale >= mWindowScale){
            mScale = width * 1.0f / JWindowUtil.getWindowWidth(context);
        }else{
            mScale = height * 1.0f / JWindowUtil.getWindowHeight(context);
        }
        return mScale;
    }

2、计算缩放动画的起始点
首先获取到小图在整个屏幕中的位置及大小

    public static Rect getDrawableBoundsInView(ImageView iv) {
        if (iv == null || iv.getDrawable() == null) {
            return null;
        }
        Drawable d = iv.getDrawable();
        Rect result = new Rect();
        iv.getGlobalVisibleRect(result);
        Rect tDrawableRect = d.getBounds();
        android.graphics.Matrix drawableMatrix = iv.getImageMatrix();

        float[] values = new float[9];
        if (drawableMatrix != null) {
            drawableMatrix.getValues(values);
        }

        result.left = result.left + (int) values[android.graphics.Matrix.MTRANS_X];
        result.top = result.top + (int) values[android.graphics.Matrix.MTRANS_Y];
        result.right = (int) (result.left + tDrawableRect.width() * (values[android.graphics.Matrix.MSCALE_X] == 0 ? 1.0f : values[android.graphics.Matrix.MSCALE_X]));
        result.bottom = (int) (result.top + tDrawableRect.height() * (values[android.graphics.Matrix.MSCALE_Y] == 0 ? 1.0f : values[android.graphics.Matrix.MSCALE_Y]));

        return result;
    }

图片宽高及大小用于计算缩放动画的起始位置pivotX，pivotY

pivot.png

先取X轴为例，如上图：
红点为起始缩放点，黑线为最终长度，那么只要计算红点距离起始点的长度就可以了，可得公式：

localX = pivot / (1-mScale)

Y轴同上逻辑，以代码形式：

int width = infos.getWidth();
int height = infos.getHeight();
int localX = infos.getLeft();
int localY = infos.getTop();
float windowScale = JWindowUtil.getWindowScale(JApp.getIns());
float imgScale = JBitmapUtils.getImgScale(width, height);

if(imgScale >= windowScale){
    animImgStartHeight = JWindowUtil.getWindowHeight(JApp.getIns()) * originalScale;
    pivotX = localX / (1 - originalScale);
    pivotY = (localY - (animImgStartHeight - height) / 2) / (1 - originalScale);
}else{
    animImgStartWidth = JWindowUtil.getWindowWidth(JApp.getIns()) * originalScale;
    pivotX = (localX - (animImgStartWidth - width) / 2) / (1 - originalScale);
    pivotY = localY / (1 - originalScale);
}

PS：关于起始位置的计算，我脑子短路了好久，其实就是缩放度为0的那个点的坐标，那既然知道小图片的位置，宽高，以及缩放度，那就简单了。
最后别忘了setPivotX和setPivotY，至此打开动画的设置完成。
3、手势滑动
这里借用了GalleryFinal的PhotoView，在其基础上添加了自定义的OnViewDragListener

 public static interface OnViewDragListener {

        /**
         * A callback to receive where the user taps on a ImageView. You will receive a callback if
         * the user taps anywhere on the view, dragging on 'whitespace' will not be ignored.
         *
         * @param x    - where the user dragged from the left of the View.
         * @param y    - where the user dragged from the top of the View.
         */
        void onViewDrag(float x, float y);

        void onDragFinish();
    }

x和y分别是在其坐标轴上的偏移量。
手势移动监听回调：

    private void startDrag(float x, float y){
        mViewPager.setTranslationX(x);
        mViewPager.setTranslationY(y);
        if(y > 0){
            mViewPager.setPivotX(JWindowUtil.getWindowWidth(this) / 2);
            mViewPager.setPivotY(JWindowUtil.getWindowHeight(this) / 2);
            float scale = Math.abs(y) / JWindowUtil.getWindowHeight(this);
            if(scale < 1 && scale > 0) {
                mViewPager.setScaleX(1-scale);
                mViewPager.setScaleY(1-scale);
                mRlRoot.setBackgroundColor(Color.parseColor(JStringUtils.getBlackAlphaBg(1-scale)));
            }
        }
    }

这里重新设置了PivotX和PivotY，设置为大图中心，不然滑动的缩放会跑偏。
4、退出动画
这个和开始动画差不多，唯一要注意的是，当用手势滑动过以后，由于重新设置过PivotX和PivotY，所以移动动画需要加上偏移量。

​ 对比.png
由上图可知，改变了pivot之后，Translation动画需要加上相应地偏移量才能保证初始位置没有变化。

 ObjectAnimator animatorTransX = ObjectAnimator.ofFloat(target, View.TRANSLATION_X,
                target.getTranslationX() +
                        (JWindowUtil.getWindowWidth(JApp.getIns()) / 2 * (1 - target.getScaleX()) -
                                target.getPivotX() * (1 - target.getScaleX())),
                0);
ObjectAnimator animatorTransY = ObjectAnimator.ofFloat(target, View.TRANSLATION_Y,
                target.getTranslationY() +
                        (JWindowUtil.getWindowHeight(JApp.getIns()) / 2 * (1 - target.getScaleY()) -
                                target.getPivotY() * (1 - target.getScaleY())),
                0);

好了，一整套流程总算是走完了。
二、主题设置
这个比较简单了
在入口的activity的主题

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="windowActionBar">false</item>
        <item name="android:windowNoTitle">true</item>

    </style>

布局文件上记得

    android:fitsSystemWindows="true"

查看大图的activity主题

    <style name="FullscreenTransTheme" parent="AppTheme">
        <item name="android:actionBarStyle">@style/FullscreenActionBarStyle</item>
        <item name="android:windowActionBarOverlay">true</item>
        <item name="android:windowBackground">@color/transparent</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowFullscreen">true</item>
    </style>

    <style name="FullscreenActionBarStyle" parent="Widget.AppCompat.ActionBar">
        <item name="android:background">@color/transparent</item>
    </style>

主要是为了防止返回的时候入口activity跳动。

最后是传送门。

转载请注明出处：https://www.jianshu.com/p/dffca954fb52