滑动框选图片，自定义RecyclerView

好久没写了，今天主要记录一下最近项目里用到的一个自定义View。
效果图不会搞，跳过。描述一下大概就是有很多图片，做一个展示，可以左右滑动来浏览图片，类似一个Gallery的效果，用RecyclerView做的。可以截取选中其中的一段，是用一个框，两边是两个手柄，拖动手柄可以调整选中的范围。
直接贴代码吧，测试代码里面有一些hardcode，不要介意。

Activity布局文件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="com.example.testselectframgallery.MainActivity">


    <com.example.testselectframgallery.MyGallery
        android:layout_gravity="center_vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</FrameLayout>

可以看到就放了一个MyGallery。所以Activity代码就不放了。接下来是MyGallery的布局文件

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <android.support.v7.widget.RecyclerView
        android:id="@+id/my_gallery"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#00aa0000"
        android:layout_gravity="center_vertical"/>

    <com.example.testselectframgallery.MyGallerySelector
        android:id="@+id/test_selector"
        android:background="#00000000"
        android:layout_width="match_parent"
        android:layout_height="100px"/>

</merge>

MyGallery代码

package com.example.testselectframgallery;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.PixelFormat;
import android.graphics.drawable.Drawable;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.FrameLayout;

/**
 * Created by kay.xu on 11/4/16.
 */

public class MyGallery extends FrameLayout{
    private RecyclerView mRecyclerView;
    private MyGallerySelector mGallerySelector;

    public MyGallery(Context context, AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.my_gallery_layout, this, true);
        mRecyclerView = (RecyclerView) findViewById(R.id.my_gallery);
        mGallerySelector = (MyGallerySelector) findViewById(R.id.test_selector);

        Bitmap bitmap = drawableToBitmap(getResources().getDrawable(R.drawable.geo_opt_in_graphic, null));
        MyGalleryAdapter adapter = new MyGalleryAdapter(getContext(), 100, 100);
        for (int i = 0; i < 15; i ++) {
            adapter.addBitmap(bitmap);
        }
        init(adapter, null, null, 5, 0, 14);
    }

    public void init(MyGalleryAdapter adapter, MyGalleryAdapter.OnItemClickListener onItemClickListener, OnItemSelectedListener onItemSelectedListener, int minItemCount, int start, int end) {
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getContext());
        linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
        mRecyclerView.setLayoutManager(linearLayoutManager);
        mRecyclerView.setAdapter(adapter);
        adapter.setOnItemClickListener(onItemClickListener);
        mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                mGallerySelector.onGalleryScrolled(dx);
            }
        });
        mGallerySelector.init(adapter.getWidth(), minItemCount, start, end);
        mGallerySelector.setOnItemSelectedListener(onItemSelectedListener);
    }

    public interface OnItemSelectedListener {
        void onStartChanged(int index);
        void onEndChanged(int index);
    }

    //这个是方便测试，直接把一张资源里面的图片转成bitmap，实际上很可能用不到
    private Bitmap drawableToBitmap(Drawable drawable) {
        Bitmap bitmap = Bitmap.createBitmap(
                drawable.getIntrinsicWidth(),
                drawable.getIntrinsicHeight(),
                drawable.getOpacity() != PixelFormat.OPAQUE ? Bitmap.Config.ARGB_8888
                        : Bitmap.Config.RGB_565);

        Canvas canvas = new Canvas(bitmap);
        drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
        drawable.draw(canvas);

        return bitmap;
    }
}

MyGallery的Adapter

package com.example.testselectframgallery;

import android.content.Context;
import android.graphics.Bitmap;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by kay.xu on 10/26/16.
 */
public class MyGalleryAdapter extends RecyclerView.Adapter<MyGalleryAdapter.ViewHolder> {
    private List<Bitmap> mDatas;
    private LayoutInflater mInflater;
    private OnItemClickListener mOnItemClickListener;
    private int mWidth, mHeight;

    public MyGalleryAdapter(Context context, int width, int height) {
        mInflater = LayoutInflater.from(context);
        mDatas = new ArrayList<>();
        mWidth = width;
        mHeight = height;
    }

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

    public void setOnItemClickListener(OnItemClickListener mOnItemClickListener) {
        this.mOnItemClickListener = mOnItemClickListener;
    }

    public static class ViewHolder extends RecyclerView.ViewHolder {
        public ViewHolder(View arg0) {
            super(arg0);
        }

        ImageView mImg;
    }

    @Override
    public int getItemCount() {
        return mDatas.size();
    }

    public void addBitmap(Bitmap image) {
        mDatas.add(image);
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View view = mInflater.inflate(R.layout.my_gallery_item_layout,
                viewGroup, false);
        ViewHolder viewHolder = new ViewHolder(view);

        viewHolder.mImg = (ImageView) view
                .findViewById(R.id.my_gallery_item_image);
        ViewGroup.LayoutParams params = viewHolder.mImg.getLayoutParams();
        params.width = mWidth;
        params.height = mHeight;
        viewHolder.mImg.setLayoutParams(params);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(final ViewHolder viewHolder, final int i) {
        viewHolder.mImg.setImageBitmap(mDatas.get(i));
        if (mOnItemClickListener != null) {
            viewHolder.itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    mOnItemClickListener.onItemClick(viewHolder.itemView, viewHolder.getPosition());
                }
            });

        }
    }

    public int getWidth() {
        return mWidth;
    }

    public int getHeight() {
        return mHeight;
    }

    public void clear() {
        if (mDatas != null) {
            for (Bitmap bitmap : mDatas) {
                bitmap.recycle();
                bitmap = null;
            }
        }
        mDatas.clear();
    }
}

Adapter Item的布局文件

<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2016 Tcl Corporation Limited -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    >

    <ImageView
        android:id="@+id/my_gallery_item_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        />


</RelativeLayout>

选择图片的框(Selector)

package com.example.testselectframgallery;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.widget.FrameLayout;

/**
 * Created by kay.xu on 10/19/16.
 */

public class MyGallerySelector extends FrameLayout implements View.OnTouchListener{
    private final Paint mPaintFill;
    private final Paint mPaintStroke;
    private MyHandle mHandleLeft;
    private MyHandle mHandleRight;
    private int mLastXLeft;
    private int mLastYLeft;
    private int mLastXRight;
    private int mLastYRight;
    private int mItemWidth;
    private int mMinItemCount;
    private static final int RADIUS = 20;
    private static final int STROKE_WIDTH = 2;
    private MyGallery.OnItemSelectedListener mOnItemSelectedListener;
    private int mStart;
    private int mEnd;

    public MyGallerySelector(Context context, AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.my_gallery_selector_layout, this, true);
        mHandleLeft = (MyHandle) findViewById(R.id.handle_left);
        mHandleRight = (MyHandle) findViewById(R.id.handle_right);
        mHandleLeft.setOnTouchListener(this);
        mHandleRight.setOnTouchListener(this);
        mPaintFill = new Paint();
        mPaintFill.setColor(0x700000ff);
        mPaintStroke = new Paint();
        mPaintStroke.setColor(Color.BLACK);
        mPaintStroke.setStyle(Paint.Style.STROKE);
        mPaintStroke.setStrokeWidth(STROKE_WIDTH);
    }

    public void init(int itemWidth, int minItemCount, int start, int end) {
        mItemWidth = itemWidth;
        mMinItemCount = minItemCount;
        mStart = start;
        mEnd = end;
        scrollTo(start * itemWidth, 0);
    }

    public void onGalleryScrolled(int dx) {
        scrollBy(dx, 0);
    }

    private void notifyOnItemSelected(View view) {
        int location = (int) (view.getX() + view.getWidth()/2);
        boolean isLeft = view == mHandleLeft;
        int index = 0;
        //if move over middle of the image,index +1
        int offset = location % mItemWidth;
        if (offset > mItemWidth/2) {
            index += 1;
        }
        if (isLeft) {
            index += location / mItemWidth;
            if (mStart != index) {
                mStart = index;
                Log.d("xxx", "notifyOnItemSelected start :" + mStart);
                if (mOnItemSelectedListener != null) {
                    mOnItemSelectedListener.onStartChanged(mStart);
                }
            }
        } else {
            index += location / mItemWidth - 1;
            if (mEnd != index) {
                mEnd = index;
                Log.d("xxx", "notifyOnItemSelected end :" + mEnd);
                if (mOnItemSelectedListener != null) {
                    mOnItemSelectedListener.onEndChanged(mEnd);
                }
            }
        }
    }

    public void setOnItemSelectedListener(MyGallery.OnItemSelectedListener listener) {
        this.mOnItemSelectedListener = listener;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(MeasureSpec.makeMeasureSpec(
                (mEnd +1) * mItemWidth, MeasureSpec.EXACTLY), heightMeasureSpec);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        mHandleLeft.layout(mStart * mItemWidth - mHandleLeft.getMeasuredWidth()/2, 0, mStart * mItemWidth + mHandleLeft.getMeasuredWidth()/2, mHandleLeft.getMeasuredHeight());
        mHandleRight.layout(getWidth() - mHandleLeft.getMeasuredWidth()/2, 0, getWidth() + mHandleLeft.getMeasuredWidth()/2, mHandleRight.getMeasuredHeight());
    }

    private void onMoveEnd(View movedView) {
        float offset = (movedView.getX() + movedView.getWidth()/2) % mItemWidth;
        boolean overdMiddle = offset > mItemWidth/2;
        float difference = mItemWidth - offset;
        if (overdMiddle) {
            movedView.layout((int) (movedView.getLeft() + difference), movedView.getTop(), (int)(movedView.getRight() + difference), movedView.getBottom());
        } else {
            movedView.layout((int)(movedView.getLeft() - offset), movedView.getTop(), (int)(movedView.getRight() - offset), movedView.getBottom());
        }
        invalidate();
        notifyOnItemSelected(movedView);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        float left = mHandleLeft.getX() + mHandleLeft.getWidth()/2;
        float right = mHandleRight.getX() + mHandleRight.getWidth()/2;
        if (right > left) {
            canvas.drawRoundRect(left, 0, right, getHeight(), RADIUS ,RADIUS, mPaintFill);
            canvas.drawRoundRect(left, STROKE_WIDTH, right, getHeight() - STROKE_WIDTH, RADIUS ,RADIUS, mPaintStroke);
        }else {
            canvas.drawRoundRect(right, 0, left, getHeight(), RADIUS, RADIUS, mPaintFill);
            canvas.drawRoundRect(right, STROKE_WIDTH, left, getHeight() - RADIUS, STROKE_WIDTH, RADIUS, mPaintStroke);
        }
        super.onDraw(canvas);
    }

//    private boolean isTouchInView(View view, MotionEvent event) {
//        int touchX = (int) event.getRawX();
//        int touchY = (int) event.getRawY();
//        int[] viewLocation = new int[2];
//        view.getLocationOnScreen(viewLocation);
//        int viewLeft = viewLocation[0];
//        int viewRight = viewLocation[0] + view.getWidth();
//        int viewTop = viewLocation[1];
//        int viewBottom = viewLocation[1] + view.getHeight();
//        return touchX > viewLeft && touchX < viewRight && touchY > viewTop && touchY < viewBottom;
//    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        int action = event.getAction();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                if (v == mHandleLeft) {
                    mLastXLeft = (int) event.getRawX();
                    mLastYLeft = (int) event.getRawY();
                } else {
                    mLastXRight = (int) event.getRawX();
                    mLastYRight = (int) event.getRawY();
                }
                break;

            case MotionEvent.ACTION_MOVE:
                int dx = (int) event.getRawX() - (v == mHandleLeft ? mLastXLeft : mLastXRight);
                int dy = (int) event.getRawY() - (v == mHandleLeft ? mLastYLeft : mLastYRight);
                //never move over min count.
                if ((mHandleRight.getX() - mHandleLeft.getX() + (v == mHandleLeft ? -dx : dx)) < mMinItemCount * mItemWidth) {
                    return true;
                }
                v.layout(v.getLeft() + dx, v.getTop(), v.getRight() + dx, v.getBottom());
                notifyOnItemSelected(v);
                if (v == mHandleLeft) {
                    mLastXLeft = (int) event.getRawX();
                    mLastYLeft = (int) event.getRawY();
                } else {
                    mLastXRight = (int) event.getRawX();
                    mLastYRight = (int) event.getRawY();
                }
                invalidate();
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                onMoveEnd(v);
                break;
        }
        return true;
    }
}

Selector布局文件

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    >

    <com.example.testselectframgallery.MyHandle
        android:id="@+id/handle_left"
        android:layout_width="26dp"
        android:layout_height="match_parent"
        />

    <com.example.testselectframgallery.MyHandle
        android:id="@+id/handle_right"
        android:layout_width="26dp"
        android:layout_height="match_parent"
        />

</merge>

最后就是手柄的代码

package com.example.testselectframgallery;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

public class MyHandle extends View {
    private Paint mPaint;

    public MyHandle(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(Color.YELLOW);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(getWidth()/2, getHeight()/2,
                getResources().getDimensionPixelSize(R.dimen.trimming_selector_handles_circle_radius),mPaint);
    }
}

很简单，但我感觉还蛮实用的。另外这个由于用到了RecyclerView，需要添加一下jar包的依赖。