微信をまねて画像をクリックして拡大して、そしてスライドして効果を閲覧することができます

前言
私たちは微信の友达の輪で他の人が送った画像を見て話しているとき、ある画像をクリックすると、全画面表示を拡大し、左右にスライドして複数の画像を閲覧することができます.
このような効果はシーンが多く、特にショッピングや飲食類のappがよく見られる.例えば、注文ソフトは、一般的に顧客にリスト方式を使用してすべての料理のサムネイル、価格、原料、作り方、栄養効果、食客評価などを全体的に展示する.そして大きな図をクリックすると、大きな図が消えて弾き返し、サムネイルインタフェースに戻ります.
淘宝はユーザーが商品を選ぶとき、一般的に商品のサムネイルをクリックし、全画面に商品のハイビジョン実物図を複数表示し、スライドして閲覧したり、実物図をクリックしたりして、前のページに戻ることができます.
この場合、この効果をどのように実現するかを考えるかもしれません.実は難しくなく、ViewPagerを使ってActivityのいくつかの特性に合わせて、必要な移行アニメーションを加えて完成することができます.
具体的な実装プロセス
一、ポップアップ大図を表示するためのActivityを定義する
画像はフルスクリーンで表示されるので、onCreateライフサイクルの方法にこのような言葉を追加します.

//      
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

注意:このコードはsetContentView()が呼び出される前に必ず実行してください.そうしないと、エラーが発生します.
二、Activityレイアウト
  画面下部に表示される小さなドット表示コントロールを定義する必要があります.この小さなドット数はページ数に基づいて決定されるため、すなわち画像表示個数に基づいて決定されるため、xmlファイルで親レイアウトを定義する必要があります.ここではandroid:layout_に基づいて線形レイアウトを採用します.weightプロパティは重み値を設定し、ピクチャと小円点の表示スケールを確立します.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black"
    android:orientation="vertical" >

    <android.support.v4.view.ViewPager
        android:id="@+id/show_origin_pic_vp"
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="18" />

    <LinearLayout
        android:id="@+id/show_origin_pic_dot"
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal" />

LinearLayout>

三、すべての展示の大きい図を取得して、小さい円点を描きます
ネットワークのロードに関する画像を取得するには、ネット上に多くのチュートリアルがありますが、ここでは説明しません.
 我々は方法を定義して円点を動的に描画し、ViewPagerページ切替イベントを傍受し、円点灯の暗色表示を変更することによって現在のページインデックスを示すことを実現する.

/**
 *     
 */
public void setOvalLayout() {
    if(mPageCount <= 0) {
        return;
    }

    mPageDotLl.removeAllViews();
    for (int i = 0; i < mPageCount; i++) {
        mPageDotLl.addView(LayoutInflater.from(this).inflate(R.layout.vp_dot, mPageDotLl, false));
    }
    mPageDotLl.getChildAt(mCurPageIndex).findViewById(R.id.v_dot).setBackgroundResource(R.drawable.shape_circle_white);

    mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageSelected(int position) {
            //       
            mPageDotLl.getChildAt(mCurPageIndex).findViewById(R.id.v_dot).setBackgroundResource(R.drawable.shape_circle_gray);
            //     
            mPageDotLl.getChildAt(position).findViewById(R.id.v_dot).setBackgroundResource(R.drawable.shape_circle_white);
            mCurPageIndex = position;
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
        }

        @Override
        public void onPageScrollStateChanged(int arg0) {
        }
    });
}

四、ページジャンプ遷移アニメーションの実現
サムネイルをクリックして大きな図をポップアップし、大きな図をクリックして戻る前にページに遷移アニメーションが必要です.つまり、Activityのアニメーションのオン/オフをカスタマイズする必要があります.
アニメーションを開くzoom_open.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:interpolator="@android:anim/accelerate_interpolator" >

    <scale
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:toXScale="1.0"
        android:toYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="@android:integer/config_shortAnimTime" />

    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:duration="@android:integer/config_shortAnimTime" />

set>

アニメーションを閉じるzoom_close.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:interpolator="@android:anim/decelerate_interpolator" >

    <scale
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="0.0"
        android:toYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="@android:integer/config_shortAnimTime" />

    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.0"
        android:duration="@android:integer/config_shortAnimTime"/>

set>

Activityジャンプメソッドにオープンアニメーションを追加する

public static void navigateTo(Activity activity, String imgUrl) {
    Intent intent = new Intent(activity, ShowOriginPicActivity.class);
    intent.putExtra(EXTRA_KEY_ITEM_IMAGE_URL, imgUrl);
    activity.startActivity(intent);
    activity.overridePendingTransition(R.anim.activity_zoom_open, 0);
}

Activityの閉じる方法に閉じるアニメーションを追加する

@Override
public void finishShowPic() {
    finish();
    overridePendingTransition(0, R.anim.activity_zoom_close);
}

大図を閉じるには、私たちが定義したViewpagerアダプタImageAdapterで画像を表示するためのすべてのImageViewリスニングイベントを実現する必要があります.

iv.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        if(mOnFinishCallBack != null) {
            mOnFinishCallBack.finishShowPic();
        }
    }
});

だから私たちはActivityの中でimplements ImageAdapterを使います.OnFinishCallBackは、コールバックインタフェース形式を使用して、ImageAdapterオブジェクトの作成時にmOnFinishCallBackをインスタンス化します.つまり、次のようになります.

imageAdapter.setOnFinishCallBack(this);

五、最終的に効果を実現する
六、サンプルコードダウンロード(ZJGallery)