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

前言

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

这种效果应用场景很多，尤其是购物和餐饮类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.ViewPagerandroid:id="@+id/show_origin_pic_vp"android:layout_width="match_parent"android:layout_height="0dip"android:layout_weight="18" /><LinearLayoutandroid: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() {@Overridepublic 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;}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic 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" ><scaleandroid: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" /><alphaandroid: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" ><scaleandroid: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" /><alphaandroid: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() {@Overridepublic void onClick(View v) {if(mOnFinishCallBack != null) {mOnFinishCallBack.finishShowPic();}}
});

所以我们要在Activity里面implements ImageAdapter.OnFinishCallBack，使用回调接口形式，在创建ImageAdapter对象时实例化mOnFinishCallBack，也即：

imageAdapter.setOnFinishCallBack(this);

五、最终实现效果

六、示例代码下载(ZJGallery)