仿微信点击图片放大，并可滑动浏览效果

前言

  我们在微信朋友圈看别人发的带图片说说时，点击某张图片，会放大全屏显示，并且左右滑动可以切换浏览多张图片。

  这种效果应用场景很多，尤其是购物和餐饮类app很常见。比如点餐软件，一般会向顾客使用列表方式整体展示所有菜品的缩略图、价格、原料、做法、营养功效、食客评价等，由于缩略图提供的直观信息不全不清晰，顾客还可以点击缩略图进一步查看菜品的多张实拍大图，效果就是点击缩略图弹出大图，左右滑动切换图片，屏幕底部小圆点指示当前图片索引，然后点击大图，大图消失会弹回去，回到缩略图界面。

  购物类app如淘宝在用户选择商品时，一般会点击商品缩略图，全屏展示商品多张高清实物图，也可以滑动浏览，点击实物图，又会回到之前页面。

  此时，我们可能会琢磨这种效果该如何实现。其实并不难，使用ViewPager配合Activity一些特性，再加上必要的过渡动画即可完成。

具体实现流程

一、定义一个专门用来显示弹出大图的Activity

  因为图片要全屏展示，所以我们要在onCreate生命周期的方法里加上这样一句

// 设置为全屏
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

注意：上面这句代码一定要在setContentView()被调用前执行，否则会报错。

二、Activity布局

  我们需要定义一个ViewPager以及显示在屏幕底部的小圆点指示控件。因为这个小圆点个数是根据页数来确定的，也即根据图片显示个数确定，所以我们需要动态创建，可以先在xml文件里定义好它的父布局，这里我们采用线性布局，根据android:layout_weight属性设定权值，确立图片与小圆点显示比例。

<?xml version="1.0" encoding="utf-8"?>
<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打开和关闭动画。

打开动画activity_zoom_open.xml

<?xml version="1.0" encoding="utf-8"?>
<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>

关闭动画activity_zoom_close.xml

<?xml version="1.0" encoding="utf-8"?>
<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)

来源：CSDN

作者：Zhang Jun

链接：https://blog.csdn.net/johnWcheung/article/details/60881605