其實點選小圖顯示大圖非常簡單的一種實現方式就是，在佈局中加一個全屏的ImageView，然後隱藏。點選小圖就把圖片設定給大圖，然後大圖顯示。

這個文章裡也是這麼做的，不過這邊課程的重心在於講從縮圖到大圖的動畫過程。動畫的目的是讓過程看起來像是從小的縮圖的邊界開始放大到最終的大圖的。

佈局

在佈局檔案裡設定兩張小的ImageView，和一個全屏的ImageView。還要注意根佈局。

RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="10dp"
    tools:context="com.sunlinlin.zoomingview.MainActivity">

    <LinearLayout
 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="159dp"
            android:layout_height="116dp"
            app:srcCompat
 
="@drawable/xiaomao" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="159dp"
            android:layout_height="116dp"
            app:srcCompat="@mipmap/ic_launcher"/>

    </LinearLayout>

    <ImageView
        android:id="@+id/expanded_image"
 

        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#00000000"
        android:scaleType="centerCrop"
        android:visibility="invisible" />
</RelativeLayout>

Activity

然後在Activit中進行一些簡單的設定，兩張小圖的點選事件是通過動畫顯示大圖。

public class MainActivity extends AppCompatActivity {

    // 持有這個動畫的引用，讓他可以在動畫執行中途取消
    private Animator mCurrentAnimator;

    private int mShortAnimationDuration;

    private View imageView1;
    private View imageView2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();

        imageView1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                zoomImageFromThumb(imageView1,R.drawable.xiaomao);
            }
        });
        imageView2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                zoomImageFromThumb(imageView2,R.mipmap.ic_launcher);
            }
        });

        // 系統預設的短動畫執行時間 200
        mShortAnimationDuration = getResources().getInteger(
                android.R.integer.config_shortAnimTime);
    }

    private void initView() {
        imageView1 = (ImageView) findViewById(R.id.imageView1);
        imageView2 = (ImageView) findViewById(R.id.imageView2);
    }
}

縮放動畫

都在註釋裡.

private void zoomImageFromThumb(final View thumbView, int imageResId) {
        // 如果有動畫正在執行，取消這個動畫
        if (mCurrentAnimator != null) {
            mCurrentAnimator.cancel();
        }

        // 載入顯示大圖的ImageView
        final ImageView expandedImageView = (ImageView) findViewById(
                R.id.expanded_image);
        expandedImageView.setImageResource(imageResId);

        // 計算初始小圖的邊界位置和最終大圖的邊界位置。
        final Rect startBounds = new Rect();
        final Rect finalBounds = new Rect();
        final Point globalOffset = new Point();

        // 小圖的邊界就是小ImageView的邊界，大圖的邊界因為是鋪滿全屏的，所以就是整個佈局的邊界。
        // 然後根據偏移量得到正確的座標。
        thumbView.getGlobalVisibleRect(startBounds);
        findViewById(R.id.container).getGlobalVisibleRect(finalBounds, globalOffset);
        startBounds.offset(-globalOffset.x, -globalOffset.y);
        finalBounds.offset(-globalOffset.x, -globalOffset.y);

        // 計算初始的縮放比例。最終的縮放比例為1。並調整縮放方向，使看著協調。
        float startScale=0;
        if ((float) finalBounds.width() / finalBounds.height()
                > (float) startBounds.width() / startBounds.height()) {
            // 橫向縮放
            float startWidth = startScale * finalBounds.width();
            float deltaWidth = (startWidth - startBounds.width()) / 2;
            startBounds.left -= deltaWidth;
            startBounds.right += deltaWidth;
        } else {
            // 豎向縮放
            float startHeight = startScale * finalBounds.height();
            float deltaHeight = (startHeight - startBounds.height()) / 2;
            startBounds.top -= deltaHeight;
            startBounds.bottom += deltaHeight;
        }

        // 隱藏小圖，並顯示大圖
        thumbView.setAlpha(0f);
        expandedImageView.setVisibility(View.VISIBLE);

        // 將大圖的縮放中心點移到左上角。預設是從中心縮放
        expandedImageView.setPivotX(0f);
        expandedImageView.setPivotY(0f);

        //對大圖進行縮放動畫
        AnimatorSet set = new AnimatorSet();
        set.play(ObjectAnimator.ofFloat(expandedImageView, View.X, startBounds.left, finalBounds.left))
            .with(ObjectAnimator.ofFloat(expandedImageView, View.Y, startBounds.top, finalBounds.top))
            .with(ObjectAnimator.ofFloat(expandedImageView, View.SCALE_X, startScale, 1f))
            .with(ObjectAnimator.ofFloat(expandedImageView, View.SCALE_Y, startScale, 1f));
        set.setDuration(mShortAnimationDuration);
        set.setInterpolator(new DecelerateInterpolator());
        set.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                mCurrentAnimator = null;
            }

            @Override
            public void onAnimationCancel(Animator animation) {
                mCurrentAnimator = null;
            }
        });
        set.start();
        mCurrentAnimator = set;

        // 點選大圖時，反向縮放大圖，然後隱藏大圖，顯示小圖。
        final float startScaleFinal = startScale;
        expandedImageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (mCurrentAnimator != null) {
                    mCurrentAnimator.cancel();
                }

                AnimatorSet set = new AnimatorSet();
                set.play(ObjectAnimator
                        .ofFloat(expandedImageView, View.X, startBounds.left))
                        .with(ObjectAnimator
                                .ofFloat(expandedImageView,
                                        View.Y,startBounds.top))
                        .with(ObjectAnimator
                                .ofFloat(expandedImageView,
                                        View.SCALE_X, startScaleFinal))
                        .with(ObjectAnimator
                                .ofFloat(expandedImageView,
                                        View.SCALE_Y, startScaleFinal));
                set.setDuration(mShortAnimationDuration);
                set.setInterpolator(new DecelerateInterpolator());
                set.addListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        thumbView.setAlpha(1f);
                        expandedImageView.setVisibility(View.GONE);
                        mCurrentAnimator = null;
                    }

                    @Override
                    public void onAnimationCancel(Animator animation) {
                        thumbView.setAlpha(1f);
                        expandedImageView.setVisibility(View.GONE);
                        mCurrentAnimator = null;
                    }
                });
                set.start();
                mCurrentAnimator = set;
            }
        });
    }