GridView中的图片点击放大，模仿微信朋友圈图片放大效果

在项目中有一个功能是用户有一个照片墙，是用户平时写日记的时候上传上去的（可以参考我另外一篇照片墙的经典实现）

现在呢要对该照片墙中的图片进行点击放大的效果，就像朋友圈中的图片点击放大一样，有几点要求如下：

1）点击图片可以显示该图片的放大效果

2）图片可以左右滑动

3）图片可以点击缩放，手势自由缩放

4）点击图片外部回到原来的界面

好了接着上篇文章开始继续实现，首先看下效果图：

我就点击8月21号第三张照片的效果

就是这样一个简单的效果，而且图片可以手动放大缩小，双击放大缩小等操作，下面通过五步来实现这个功能。

1：这些每天发布的图片都是放在RecyclerView中来显示，而每一天的图片都是放在每一个GridView中来展示的所以给GridView的子项设置点击事件：

//gridViewImage就是实例化之后的GridView
gridViewImage.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        //对点击的子项布局进行处理，GridViewItemsActivity在第三步有讲解
        Intent imageItemIntent = new Intent(MineAlbumWallActivity.this, GridViewItemsActivity.class);
        //其中imageItemList在下一步中有讲解
        imageItemIntent.putExtra("list", imageItemList);
        imageItemIntent.putExtra("position", position);
        startActivity(imageItemIntent);
    }
});

其中ImageItemList就是从服务器上获取到的图片URL数据源：

//存放图片URL的list，其中imageLists是项目中从服务器上获取到的数据源
final ArrayList<String> imageItemList = new ArrayList<>();
for (int i = 0; i < imageLists.size(); i++) {
    imageItemList.add(imageLists.get(i).getImage());
}

2：新建展示每张图片的Activity

/**
 *create by acer 2018/8/22
 * 点击日记中发布的图片进行查看
 * 图片查看
 */
public class GridViewItemsActivity extends AppCompatActivity implements View.OnClickListener {

    LinearLayout outsideLayout;
    //接收Intent传递过来的图片URL
    ArrayList<String> list = new ArrayList<>();
    //获取点击的图片的position
    private int imagePosition;
    //使用ViewPager和CirclePageIndicator来显示图片给用户查看
    private AutoScrollViewPager image_banner;
    private CirclePageIndicator image_banner_indicator;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_grid_view_items);
        list = getIntent().getStringArrayListExtra("list");
        imagePosition = getIntent().getIntExtra("position", 0);
        initView();
        initData();
    }

    public void initView() {
        outsideLayout = findViewById(R.id.outside_layout);
        outsideLayout.setOnClickListener(this);
        image_banner = findViewById(R.id.image_banner);
        image_banner_indicator = findViewById(R.id.image_banner_indicator);
    }

    private void initData() {
        setData(list);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.outside_layout:
                finish();
                break;
            default:
                break;
        }
    }

    public void setData(List<String> imageList) {
        //准备图片
        ViewPagerPhotosAdapter adapter = new ViewPagerPhotosAdapter(imageList);
        image_banner.setCycle(false);
        image_banner.setSlideBorderMode(AutoScrollViewPager.SLIDE_BORDER_MODE_NONE);
        image_banner.setAdapter(adapter);
        image_banner_indicator.setViewPager(image_banner, imagePosition);
    }

    /**
     * ViewPagerAdapter
     */
    private class ViewPagerPhotosAdapter extends PagerAdapter {

        private List<String> imageList;

        public ViewPagerPhotosAdapter(List<String> imageList) {
            this.imageList = imageList;
        }

        @Override
        public int getCount() {
            return imageList == null ? 0 : imageList.size();
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view = LayoutInflater.from(GridViewItemsActivity.this).inflate(R.layout.item_diary_image_item, null);
            PhotoView image = view.findViewById(R.id.img);
            Glide.with(GridViewItemsActivity.this)
                    .load(imageList.get(position))
                    .apply(new RequestOptions().dontAnimate()
                            .skipMemoryCache(false)).into(image);
            container.addView(view);
            return view;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
    }
}

3:下面的是展示图片Activity的布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/titleBlack"
    android:gravity="center"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/outside_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:background="@color/white">

            <com.choicelean.superwinner.component.PictureAutoScroll.AutoScrollViewPager
                android:id="@+id/image_banner"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <com.choicelean.superwinner.component.PictureAutoScroll.CirclePageIndicator
                android:id="@+id/image_banner_indicator"
                android:layout_width="wrap_content"
                android:layout_height="20dp"
                android:layout_gravity="center|bottom"
                android:layout_marginBottom="10dp"
                android:padding="5dp"
                app:centered="false"
                app:fillColor="@color/white"
                app:paddingStart="10dp"
                app:pageColor="#33444444"
                app:radius="4dp"
                app:strokeWidth="0dp" />
        </FrameLayout>
    </LinearLayout>

</LinearLayout>

4：其中显示每张图片的子控件的布局如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:background="@color/titleBlack">

    <!--<com.choicelean.superwinner.component.DoubleScaleImageView-->
        <!--android:id="@+id/img"-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="300dp"-->
        <!--android:scaleType="fitXY" />-->
    <uk.co.senab.photoview.PhotoView
        android:id="@+id/img"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"/>
</LinearLayout>

5：项目中用到了开源框架，我们在APP下的build.gradle的dependencies闭包下添加如下闭包再同步一下就可以了

//日记中图片缩放
compile 'com.github.chrisbanes:PhotoView:2.0.0'