微信朋友圈的實現(圖片查看，手勢放大、縮小)

效果圖：

簡單的就這樣，實現效果的方法有多種，可以使用ListView嵌套GridView，也可以直接使用RecycleView，這裏只說RecycleView的實現方法。
難一點的地方就是每個item添加圖片，這裏使用的是自定義LinearLayout，LinearLayout裏面主要做圖片點擊處理，設置圖片佈局，行數列數的排列。代碼不多，直接貼代碼了：

public class MultiImageView extends LinearLayout {
    public static int MAX_WIDTH = 0;

    // 照片的Url列表
    private List<String> imagesList;

    /**
     * 長度 單位爲Pixel
     **/
    private int pxOneWidth = DensityUtil.dip2px(getContext(), 200); // 單張圖時候的寬
    private int pxOneHeight = DensityUtil.dip2px(getContext(), 150); // 單張圖時候的高
    private int pxMoreWandH = 0; // 多張圖的寬高
    private int pxImagePadding = DensityUtil.dip2px(getContext(), 2);// 圖片間的間距

    private int MAX_PER_ROW_COUNT = 3;// 每行顯示最大數

    private LayoutParams onePicPara;
    private LayoutParams morePara;
    private LayoutParams rowPara;

    private OnItemClickListener mOnItemClickListener;

    public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
        mOnItemClickListener = onItemClickListener;
    }

    public MultiImageView(Context context) {
        super(context);

    }

    public MultiImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public void setList(List<String> lists) throws IllegalArgumentException {
        if (lists == null) {
            throw new IllegalArgumentException("imageList is null...");
        }
        imagesList = lists;

        if (MAX_WIDTH > 0) {
            pxMoreWandH = MAX_WIDTH / 3 - pxImagePadding;
            // pxOneWidth = MAX_WIDTH / 2;
            // pxOneHeight = MAX_WIDTH * 2 / 3;
            initImageLayoutParams();
        }
        initView();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        if (MAX_WIDTH == 0) {
            int width = measureWidth(widthMeasureSpec);
            if (width > 0) {
                MAX_WIDTH = width;
                if (imagesList != null && imagesList.size() > 0) {
                    setList(imagesList);
                }
            }
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    /**
     * @param measureSpec
     * @return 返回View的寬度
     */
    private int measureWidth(int measureSpec) {
        int result = 0;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);

        if (specMode == MeasureSpec.EXACTLY) {
            // We were told how big to be
            result = specSize;
        } else {
            // Measure the text
            // result = (int) mTextPaint.measureText(mText) + getPaddingLeft()
            // + getPaddingRight();
            if (specMode == MeasureSpec.AT_MOST) {
                // Respect AT_MOST value if that was what is called for by
                // measureSpec
                result = Math.min(result, specSize);
            }
        }
        return result;
    }

    private void initImageLayoutParams() {

        onePicPara = new LayoutParams(pxOneWidth, pxOneHeight);

        morePara = new LayoutParams(pxMoreWandH, pxMoreWandH);
        morePara.setMargins(0, 0, pxImagePadding, 0);

        int wrap = LayoutParams.WRAP_CONTENT;
        int match = LayoutParams.MATCH_PARENT;
        rowPara = new LayoutParams(match, wrap);
        rowPara.setMargins(0, 0, 0, pxImagePadding);
    }

    // 根據imageView的數量初始化不同的View佈局,還要爲每一個View作點擊效果
    private void initView() {
        this.setOrientation(VERTICAL);
        this.removeAllViews();
        if (MAX_WIDTH == 0) {
            // 爲了觸發onMeasure()來測量MultiImageView的最大寬度，MultiImageView的寬設置爲match_parent
            addView(new View(getContext()));
            return;
        }

        if (imagesList == null || imagesList.size() == 0) {
            return;
        }

        if (imagesList.size() == 1) {
            for (final String url : imagesList) {
                final ImageView imageView = new ImageView(getContext());
                imageView.setId(url.hashCode()); // 指定id
                imageView.setLayoutParams(onePicPara);
                imageView.setMinimumWidth(pxMoreWandH);
                imageView.setScaleType(ScaleType.CENTER_CROP);

                Glide.with(getContext()).load(url).into(imageView);

                imageView.setOnClickListener(mImageViewOnClickListener);
                addView(imageView);
            }

        } else {
            int allCount = imagesList.size();
            if (allCount == 4) {
                MAX_PER_ROW_COUNT = 2;
            } else {
                MAX_PER_ROW_COUNT = 3;
            }
            int rowCount = allCount / MAX_PER_ROW_COUNT + (allCount % MAX_PER_ROW_COUNT > 0 ? 1 : 0);// 行數
            for (int rowCursor = 0; rowCursor < rowCount; rowCursor++) {
                LinearLayout rowLayout = new LinearLayout(getContext());
                rowLayout.setOrientation(LinearLayout.HORIZONTAL);

                rowLayout.setLayoutParams(rowPara);
                if (rowCursor == 0) {
                    rowLayout.setPadding(0, pxImagePadding, 0, 0);
                }

                int columnCount = allCount % MAX_PER_ROW_COUNT == 0 ? MAX_PER_ROW_COUNT : allCount % MAX_PER_ROW_COUNT;// 每行的列數
                if (rowCursor != rowCount - 1) {
                    columnCount = MAX_PER_ROW_COUNT;
                }
                addView(rowLayout);

                int rowOffset = rowCursor * MAX_PER_ROW_COUNT;// 行偏移
                for (int columnCursor = 0; columnCursor < columnCount; columnCursor++) {
                    int position = columnCursor + rowOffset;
                    String thumbUrl = imagesList.get(position);

                    final ImageView imageView = new ImageView(getContext());
                    imageView.setId(thumbUrl.hashCode());// 指定id
                    imageView.setLayoutParams(morePara);
                    imageView.setScaleType(ScaleType.CENTER_CROP);
                    imageView.setTag(R.string.app_name, position);
                    Glide.with(getContext()).load(thumbUrl).into(imageView);

                    imageView.setOnClickListener(mImageViewOnClickListener);
                    rowLayout.addView(imageView);
                }
            }
        }
    }

    // 圖片點擊事件
    private View.OnClickListener mImageViewOnClickListener = new OnClickListener() {

        @Override
        public void onClick(View view) {
            if (mOnItemClickListener != null) {
                mOnItemClickListener.onItemClick(view, view.getTag() + "");
            }
        }
    };

    public interface OnItemClickListener {
        void onItemClick(View view, String position);
    }

}

在activity裏面綁定適配器之後，還需要實現圖片點擊查看，這也不難，我們在定義的時候順便也定義了圖片點擊的接口了，直接調用就行了：

   viewHolder.gridView.setOnItemClickListener(new MultiImageView.OnItemClickListener() {
                @Override
                public void onItemClick(View view, String position) {
                    addPic(itemModle);
                    Intent intent = new Intent(mContext, GalleryActivity.class);
                    intent.putStringArrayListExtra("imagePath", images);
                    intent.putExtra("position", position);
                    mContext.startActivity(intent);
                }
            });

然後來看看圖片查看類，先上效果圖：

點擊放大、縮小直接使用PhotoView來實現，左右滑動使用ViewPager，這裏注意一下，Viewpager與PhotoView一起使用的時候，重寫一下ViewPager,

/**
 * photoView 和Viewpager 套用，必須重寫，避免異常崩潰
 *
 * Created by hedong on 2016/7/1.
 */
public class PhotoViewPager extends ViewPager {
    public PhotoViewPager(Context context) {
        super(context);
    }

    public PhotoViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        try {
            return super.onTouchEvent(ev);
        } catch (IllegalArgumentException ex) {
            ex.printStackTrace();
        }
        return false;
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        try {
            return super.onInterceptTouchEvent(ev);
        } catch (IllegalArgumentException ex) {
            ex.printStackTrace();
        }
        return false;
    }

}

再點擊圖片跳轉時，我們會把圖片路徑添加到集合傳過來，然後再次加載顯示。

 class SamplePagerAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return imagePath.size();
        }

        @Override
        public View instantiateItem(ViewGroup container, int position) {
            final PhotoView photoView = new PhotoView(container.getContext());
            Glide.with(container.getContext()).load(imagePath.get(position)).into(photoView);
            //給view做標記
            photoView.setId(position);

            //單擊退出
            photoView.setOnViewTapListener(new PhotoViewAttacher.OnViewTapListener() {
                @Override
                public void onViewTap(View view, float x, float y) {
                    GalleryActivity.this.finish();
                }
            });

            container.addView(photoView, ViewPager.LayoutParams.MATCH_PARENT,
                    ViewPager.LayoutParams.MATCH_PARENT);

            return photoView;
        }

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

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

    }

其他的沒多少難度，後面直接附源碼。
源碼：https://github.com/hedongBlog/WXFriend