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

前言

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

  这种效果应用场景很多，尤其是购物和餐饮类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)