一个可拖动item的九宫格自定义View

 

一、写在前面的话

也不知道给这个取个啥名，就随便取了一个，主要功能就如上图显示的那样，待选区view可以拖拽进九宫格中，九宫格可以按照顺时针轮播。

二、分析需要的元素

1.待选区的item

选中底色有改变，item可以拖动到九宫格中，在即将进入九宫格的时候有一个吸附的效果。

2.九宫格

点击中间的开始按钮顺时针轮播九宫格

3.拖动的View

在底部待选栏中的item选中的时候绘制，模拟从待选栏拖入九宫格的效果。

三、动画效果

1、拖动的view（思路）

在手指触碰到备选栏中的item一定时间后（500ms左右），在手指的位置绘制一个选中的item并且跟随手指的位置移动。九宫格的轮播位置，在拖动的view进入到其范围（手指位置的坐标与九宫格item中心的直线距离小于九宫格item的内切圆半径）之后，在九宫格中绘制一个拖动的item，手指的位置取消绘制，模拟吸附效果。

2、九宫格的轮播动画

九宫格对于的位置为

123
456
789

轮播的时候顺序为12369874，在对应的位置颜色变为高亮色，再在该位置画上一个稍小的，圆角一致的矩形。（时至今日我都觉得这个方式有点蠢，等后面再优化了）

四、开始画（绘制）

1、准备工作

首先准备三个List去存放九宫格中item的位置，待选栏view的位置，待选栏view中的图片的位置。

    private List<RectF> mItemRectFList;

    private List<RectF> mSmallRectFList;

    private List<Bitmap> mBitmapList;

 private void initItemRectf() {
        if (mItemRectFList == null) {
            mItemRectFList = new ArrayList<>();
        }
        mItemRectFList.clear();
        int fristX = (int) (mWidth * 0.2);
        //第一排
        mItemRectFList.add(new RectF(fristX + mItemRectMagin, top + mItemRectMagin,
                fristX + mItemRectMagin + mItemRectA, top + mItemRectMagin + mItemRectA));

        mItemRectFList.add(new RectF(fristX + 2 * mItemRectMagin + mItemRectA, top + mItemRectMagin,
                fristX + 2 * mItemRectMagin + 2 * mItemRectA, top + mItemRectMagin + mItemRectA));

        mItemRectFList.add(new RectF(fristX + 3 * mItemRectMagin + 2 * mItemRectA, top + mItemRectMagin,
                fristX + 3 * mItemRectMagin + 3 * mItemRectA, top + mItemRectMagin + mItemRectA));
        //第二排
        mItemRectFList.add(new RectF(fristX + mItemRectMagin, top + 2 * mItemRectMagin + mItemRectA,
                fristX + mItemRectMagin + mItemRectA, top + 2 * mItemRectMagin + 2 * mItemRectA));
        mItemRectFList.add(new RectF(fristX + 2 * mItemRectMagin + mItemRectA, top + 2 * mItemRectMagin + mItemRectA,
                fristX + 2 * mItemRectMagin + 2 * mItemRectA, top + 2 * mItemRectMagin + 2 * mItemRectA));
        mItemRectFList.add(new RectF(fristX + 3 * mItemRectMagin + 2 * mItemRectA, top + 2 * mItemRectMagin + mItemRectA,
                fristX + 3 * mItemRectMagin + 3 * mItemRectA, top + 2 * mItemRectMagin + 2 * mItemRectA));
        //第三排
        mItemRectFList.add(new RectF(fristX + mItemRectMagin, top + mItemRectMagin * 3 + mItemRectA * 2,
                fristX + mItemRectMagin + mItemRectA, top + mItemRectMagin * 3 + mItemRectA * 3));

        mItemRectFList.add(new RectF(fristX + 2 * mItemRectMagin + mItemRectA, top + mItemRectMagin * 3 + mItemRectA * 2,
                fristX + 2 * mItemRectMagin + 2 * mItemRectA, top + mItemRectMag