Android开发技巧——定制仿微信图片裁剪控件

拍照——裁剪，或者是选择图片——裁剪，是我们设置头像或上传图片时经常需要的一组操作。上篇讲了Camera的使用，这篇讲一下我对图片裁剪的实现。

背景

1. 下面的需求都来自产品。
2. 裁剪图片要像微信那样，拖动和放大的是图片，裁剪框不动。
3. 裁剪框外的内容要有半透明黑色遮罩。
4. 裁剪框下面要显示一行提示文字（这点我至今还是持保留意见的）。

在Android中，裁剪图片的控件库还是挺多的，特别是github上比较流行的几个，都已经进化到比较稳定的阶段，但比较遗憾的是它们的裁剪过程是拖动或缩放裁剪框，于是只好自己再找，看有没有现成或半成品的轮子，可以不必从零开始。

踏破铁鞋无觅处，皇天不负苦心人。我终于找到了两篇博客：《Android高仿微信头像裁剪》和《Android 高仿微信头像截取 打造不一样的自定义控件》，以及csdn上找到的前面博客所对应的一份代码，并最终实现了自己的裁剪控件。

大神的实现过程

首先先了解一下上面的高仿微信裁剪控件的实现过程。说起来也不难，主要是下面几点：

1，重写ImageView，并监听手势事件，包括双点，两点缩放，拖动，使它成为一个实现缩放拖动图片功能的控件。

2，定义一个Matrix成员变量，对于维护该图片的缩放、平移等矩阵数据。

3，拖动或缩放时，图片与裁剪框的相交面积一定与裁剪框相等。即图片不能拖离裁剪框。

3，在设置图片时，先根据图片的大小进行初始化的缩放平移操作，使得上面第三条的条件下图片尽可能的小。

4，每次接收到相对应的手势事件，都进行对应的矩阵计算，并将计算结果通过ImageView的setImageMatrix方法应用到图片上。

5，裁剪框是一个单独的控件，与ImageView同样大，叠加到它上面显示出来。

6，用一个XXXLayout把裁剪框和缩放封装起来。

7，裁剪时，先创建一个空的Bitmap并用其创建一个Canvas，把缩放平移后的图片画到这个Bitmap上，并创建在裁剪框内的Bitmap（通过调用Bitmap.createBitmap方法）。

我的定制内容

我拿到的代码是鸿洋大神版本之后再被改动的，代码上有点乱（虽然功能上是实现的裁剪）。在原有的功能上，我希望进行的改动有：

• 合并裁剪框的内容到ImageView中
• 裁剪框可以是任意长宽比的矩形
• 裁剪框的左右外边距可以设置
• 遮罩层颜色可以设置
• 裁剪框下有提示文字（自己的产品需求）
• 后面产品又加入了一条裁剪图片的最大大小

属性定义

在上面的功能需求中，我定义了以下属性：

<declare-styleable name="ClipImageView">
    <attr name="civHeight" format="integer"/>
    <attr name="civWidth" format="integer"/>
    <attr name="civTipText" format="string"/>
    <attr name="civTipTextSize" format="dimension"/>
    <attr name="civMaskColor" format="color"/>
    <attr name="civClipPadding" format="dimension"/>
</declare-styleable>

其中：

• civHeight和civWidth是裁剪框的宽高比例。
• civTipText提示文字的内容
• civTipTextSize提示文字的大小
• civMaskColor遮罩层的颜色值
• civClipPadding裁剪内边距。由于裁剪框是在控件内部的，最终我选择使用padding来说明裁剪框与我们控件边缘的距离。

成员变量

成员变量我进行了一些改动，把原本用于定义裁剪框的水平边距变量及其他没什么用的变量等给去掉了，并加入了自己的一些成员变量，最终如下：

    private final int mMaskColor;//遮罩层颜色
    private final Paint mPaint;//画笔
    private final int mWidth;//裁剪框宽的大小（从属性上读到的整型值）
    private final int mHeight;//裁剪框高的大小（同上）
    private final String mTipText;//提示文字
    private final int mClipPadding;//裁剪框相对于控件的内边距
    private float mScaleMax = 4.0f;//图片最大缩放大小
    private float mScaleMin = 2.0f;//图片最小缩放大小
    /**
     * 初始化时的缩放比例
     */
    private float mInitScale = 1.0f;
    /**
     * 用于存放矩阵
     */
    private final float[] mMatrixValues = new float[9];
    /**
     * 缩放的手势检查
     */
    private ScaleGestureDetector mScaleGestureDetector = null;
    private final Matrix mScaleMatrix = new Matrix();
    /**
     * 用于双击
     */
    private GestureDetector mGestureDetector;
    private boolean isAutoScale;
    private float mLastX;
    private float mLastY;
    private boolean isCanDrag;
    private int lastPointerCount;
    private Rect mClipBorder = new Rect();//裁剪框
    private int mMaxOutputWidth = 0;//裁剪后的图片的最大输出宽度

构造方法

构造方法里主要是多了一些我们自定义属性的读取：

    public ClipImageView(Context context) {
        this(context, null);
    }
    public ClipImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setScaleType(ScaleType.MATRIX);
        mGestureDetector = new GestureDetector(context,
                new SimpleOnGestureListener() {
                    @Override
                    public boolean onDoubleTap(MotionEvent e) {
                        if (isAutoScale)
                            return true;
                        float x = e.getX();
                        float y = e.getY();
                        if (getScale() < mScaleMin) {
                            ClipImageView.this.postDelayed(new AutoScaleRunnable(mScaleMin, x, y), 16);
                        } else {
                            ClipImageView.this.postDelayed(new AutoScaleRunnable(mInitScale, x, y), 16);
                        }
                        isAutoScale = true;
                        return true;
                    }
                });
        mScaleGestureDetector = new ScaleGestureDetector(context, this);
        this.setOnTouchListener(this);
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.WHITE);
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.ClipImageView);
        mWidth = ta.getInteger(R.styleable.ClipImageView_civWidth, 1);
        mHeight = ta.getInteger(R.styleable.ClipImageView_civHeight, 1);
        mClipPadding = ta.getDimensionPixelSize(R.styleable.ClipImageView_civClipPadding, 0);
        mTipText = ta.getString(R.styleable.ClipImageView_civTipText);
        mMaskColor = ta.getColor(R.styleable.ClipImageView_civMaskColor, 0xB2000000);
        final int textSize = ta.getDimensionPixelSize(R.styleable.ClipImageView_civTipTextSize, 24);
        mPaint.setTextSize(textSize);
        ta.recycle();
        mPaint.setDither(true);
    }

定义裁剪框

裁剪框的位置

裁剪框是在控件正中间的，首先我们从属性中读取到的是宽高的比例，以及左右边距，但是在构造方法中，由于控件还没有绘制出来，无法获取到控件的宽高，所以并不能计算裁剪框的大小和位置。所以我重写了onLayout方法，在这里计算裁剪框的位置：

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        final int width = getWidth();
        final int height = getHeight();
        mClipBorder.left = mClipPadding;
        mClipBorder.right = width - mClipPadding;
        final int borderHeight = mClipBorder.width() * mHeight / mWidth;
        mClipBorder.top = (height - borderHeight) / 2;
        mClipBorder.bottom = mClipBorder.top + borderHeight;
    }

绘制裁剪框

这里我顺便把绘制提示文字的代码也一并给出，都是在同一个方法里的。很简单，重写onDraw方法即可。绘制裁剪框有两种方法，一是绘制一个满屏的遮罩层，然后从中间抠出一个长方形出来，但是我用的时候发现抠不出来，所以我采用的是下面这一种：



先画上下两个矩形，再画左右两个矩形，中间所围起来的没有画的部分就是我们的裁剪框。

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        final int width = getWidth();
        final int height = getHeight();
        mPaint.setColor(mMaskColor);
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawRect(0, 0, width, mClipBorder.top, mPaint);
        canvas.drawRect(0, mClipBorder.bottom, width, height, mPaint);
        canvas.drawRect(0, mClipBorder.top, mClipBorder.left, mClipBorder.bottom, mPaint);
        canvas.drawRect(mClipBorder.right, mClipBorder.top, width, mClipBorder.bottom, mPaint);
        mPaint.setColor(Color.WHITE);
        mPaint.setStrokeWidth(1);
        mPaint.setStyle(Paint.Style.STROKE);
        canvas.drawRect(mClipBorder.left, mClipBorder.top, mClipBorder.right, mClipBorder.bottom, mPaint);
        if (mTipText != null) {
            final float textWidth = mPaint.measureText(mTipText);
            final float startX = (width - textWidth) / 2;
            final Paint.FontMetrics fm = mPaint.getFontMetrics();
            final float startY = mClipBorder.bottom + mClipBorder.top / 2 - (fm.descent - fm.ascent) / 2;
            mPaint.setStyle(Paint.Style.FILL);
            canvas.drawText(mTipText, startX, startY, mPaint);
        }
    }

修改图片的初始显示

这里我不使用全局布局的监听（通过getViewTreeObserver加入回调），而是直接重写几个设置图片的方法，在设置图片后进行初始显示的设置：

    @Override
    public void setImageDrawable(Drawable drawable) {
        super.setImageDrawable(drawable);
        postResetImageMatrix();
    }
    @Override
    public void setImageResource(int resId) {
        super.setImageResource(resId);
        postResetImageMatrix();
    }
    @Override
    public void setImageURI(Uri uri) {
        super.setImageURI(uri);
        postResetImageMatrix();
    }
    private void postResetImageMatrix() {
        post(new Runnable() {
            @Override
            public void run() {
                resetImageMatrix();
            }
        });
    }

resetImageMatrix()方法设置图片的初始缩放及平移，参考图片大小，控件本身大小，以及裁剪框的大小进行计算：

    /**
     * 垂直方向与View的边矩
     */
    public void resetImageMatrix() {
        final Drawable d = getDrawable();
        if (d == null) {
            return;
        }
        final int dWidth = d.getIntrinsicWidth();
        final int dHeight = d.getIntrinsicHeight();
        final int cWidth = mClipBorder.width();
        final int cHeight = mClipBorder.height();
        final int vWidth = getWidth();
        final int vHeight = getHeight();
        final float scale;
        final float dx;
        final float dy;
        if (dWidth * cHeight > cWidth * dHeight) {
            scale = cHeight / (float) dHeight;
        } else {
            scale = cWidth / (float) dWidth;
        }
        dx = (vWidth - dWidth * scale) * 0.5f;
        dy = (vHeight - dHeight * scale) * 0.5f;
        mScaleMatrix.setScale(scale, scale);
        mScaleMatrix.postTranslate((int) (dx + 0.5f), (int) (dy + 0.5f));
        setImageMatrix(mScaleMatrix);
        mInitScale = scale;
        mScaleMin = mInitScale * 2;
        mScaleMax = mInitScale * 4;
    }

注意：这里有一个坑。把一个Bitmap设置到ImageView中，显示时要计算的是ImageView获取的Drawable对象以及这个对象的宽高，而不是Bitmap对象。Drawable对象可能由于对Bitmap的放大或缩小显示，导致它的宽或高与Bitmap的宽高不同。

还有一点小注意：获取控件宽高是要在控件被绘制出来之后才能获取得到的，所以上面我通过post一个Runnable对象到主线程的Looper中，保证它是在界面绘制完成之后被调用。

缩放及拖动

缩放及拖动时都需求判断是否超出边界，如果超出，则取允许的最终值。这里的代码我没怎么动，稍后可直接参考源码，暂不赘述。

裁剪

这里是另外一个改造的重点了。

首先，鸿洋大神是通过创建一个空的Bitmap，并根据它创建出一个Canvas对象，然后通过draw方法把缩放后的图片给绘制到这个Bitmap中，再调用Bitmap.createBitmap得到属于裁剪框的内容。但是我们已经重写了onDraw方法画出裁剪框，所以这里就不考虑了。

另外，这种方法还有一个问题：它绘制的是Drawable对象。如果我们设置进去的是一个比较大的Bitmap，那么就可能被缩放了，这里裁剪的是缩放后的Bitmap，也就是它不是对原图进行裁剪的。

这里我参考了其他裁剪图片库，通过保存了缩放平移的Matrix成员变量进行计算，获取出裁剪框在其的对应范围，并根据最终所需（我们产品要限制一个最大大小），得到最终的图片，代码如下：

    public Bitmap clip() {
        final Drawable drawable = getDrawable();
        final Bitmap originalBitmap = ((BitmapDrawable) drawable).getBitmap();
        final float[] matrixValues = new float[9];
        mScaleMatrix.getValues(matrixValues);
        final float scale = matrixValues[Matrix.MSCALE_X] * drawable.getIntrinsicWidth() / originalBitmap.getWidth();
        final float transX = matrixValues[Matrix.MTRANS_X];
        final float transY = matrixValues[Matrix.MTRANS_Y];
        final float cropX = (-transX + mClipBorder.left) / scale;
        final float cropY = (-transY + mClipBorder.top) / scale;
        final float cropWidth = mClipBorder.width() / scale;
        final float cropHeight = mClipBorder.height() / scale;
        Matrix outputMatrix = null;
        if (mMaxOutputWidth > 0 && cropWidth > mMaxOutputWidth) {
            final float outputScale = mMaxOutputWidth / cropWidth;
            outputMatrix = new Matrix();
            outputMatrix.setScale(outputScale, outputScale);
        }
        return Bitmap.createBitmap(originalBitmap,
                (int) cropX, (int) cropY, (int) cropWidth, (int) cropHeight,
                outputMatrix, false);
    }

由于我们是对Bitmap进行裁剪，所以首先获取这个Bitmap：

        final Drawable drawable = getDrawable();
        final Bitmap originalBitmap = ((BitmapDrawable) drawable).getBitmap();

然后，我们的矩阵值可以通过一个包含9个元素的float数组读出：

        final float[] matrixValues = new float[9];
        mScaleMatrix.getValues(matrixValues);

比如，读X上的缩放值，代码为matrixValues[Matrix.MSCALE_X]。

要特别注意一点，在前文也有提到，这里缩放的是Drawable对象，但是我们裁剪时用的Bitmap，如果图片太大的话是可能在Drawable上进行缩放的，所以缩放大小的计算应该为：

        final float scale = matrixValues[Matrix.MSCALE_X] * drawable.getIntrinsicWidth() / originalBitmap.getWidth();

然后获取图片平移量：

        final float transX = matrixValues[Matrix.MTRANS_X];
        final float transY = matrixValues[Matrix.MTRANS_Y];

计算裁剪框对应在图片上的起点及宽高：

        final float cropX = (-transX + mClipBorder.left) / scale;
        final float cropY = (-transY + mClipBorder.top) / scale;
        final float cropWidth = mClipBorder.width() / scale;
        final float cropHeight = mClipBorder.height() / scale;

上面就是我们所要裁剪出来的最终结果。

但是，我前面也说的，应产品需求，要限制最大输出大小。由于我们裁剪出来的图片宽高比是3：2，我这里只取宽度（你要取高度也可以）进行限制，所以又加上了如下代码，当裁剪出来的宽度超出我们最大宽度时，进行缩放。

        Matrix outputMatrix = null;
        if (mMaxOutputWidth > 0 && cropWidth > mMaxOutputWidth) {
            final float outputScale = mMaxOutputWidth / cropWidth;
            outputMatrix = new Matrix();
            outputMatrix.setScale(outputScale, outputScale);
        }

最终根据上面计算出来的值，创建裁剪出来的Bitmap：

Bitmap.createBitmap(originalBitmap,
                (int) cropX, (int) cropY, (int) cropWidth, (int) cropHeight,
                outputMatrix, false);

这样，图片裁剪控件就算全部完成。

实现效果

后述

1. 全部代码见：https://github.com/msdx/clip-image，有demo。
2. 我在控件中还增加了一个接口getClipMatrixValues，获取裁剪时图片的矩阵值，它可用于做大图的裁剪。
3. 有关大图的裁剪，我后续会再写一篇。
4. 大图裁剪的代码，也在上面的demo里。
5. 使用时可以设置裁剪框的宽高比来决定是正方形的裁剪框还是有其他比例要求的裁剪框

本文原创，转载请注明CSDN博客出处：

http://blog.csdn.net/maosidiaoxian/article/details/50828664

参考资料：

• 《Android高仿微信头像裁剪》
• 《Android 高仿微信头像截取 打造不一样的自定义控件》
• cropper