Android自定义 View 实战之 StickerView

本篇文章为利用Matrix自定义View三部曲的第一部曲。

虽然Android内置了许多View供开发者组合和使用,但其多样性还是不足,在很多场景或功能需求下,Android原生自带的控件并不足以实现需求,这时我们就需要自定义满足我们需求的View。

本文会讲解一个自定义View的设计和开发过程,在阅读之前希望大家有最基础的自定义View的知识,以及Matrix类的基本使用。

起步

在很多图片社交的应用,例如Lofter、Play、In等应用中,都会有添加各种可爱的贴图到图片上的功能,然后我们可以对图片进行移动、旋转、缩放、翻转之类的操作,本文制作的View正是为了实现这个功能。最终我们将要实现的效果如下图:

项目地址:https://github.com/wuapnjie/StickerView

简单思考(确定大致思路)

要实现这样的效果,我们肯定需要对图片进行操作,在自定义的View中,我们可以在onDraw()方法将我们的图片(通常为Bitmap)画到View上。

 protected void onDraw(Canvas canvas) {     super.onDraw(canvas);
        canvas.drawBitmap(bitmap,matrix,paint);
 }

drawBitmap()方法有许多重载方法,但是利用Matrix来控制画在View上的图片是最灵活最简单的。(不熟悉Matrix类可以先去了解下,这里就不介绍基础的知识了)

利用Matrix可以方便的控制图片的位置,旋转角度,缩放比。

再看我们的功能,用不同的手势来操作图片,既然利用Matrix可以操作图片,那么我们只需要在View的onTouchEvent()方法中监听不同的手势操作,再对其Matrix进行变换,重绘View即可。整个思路流程就很清楚了。

仔细思考(决定结构)

有了思路,那么我们就要来考虑我们应该怎么样组织代码,怎么样设计代码的结构。当然这个View并不复杂,设计起来也不复杂。

首先,对于贴纸功能,在没有一张贴纸时就只显示一张图片,而这个功能ImageView已经为我们实现了,于是StickerView应该继承自ImageView,并且重写onDraw()和onTouchEvent()方法。

其次,因为一张图片上可以添加多张贴纸,而每一张贴纸都需要一个Matrix来控制其相关变换,所以我们可以设计一个类封装一下,方便对贴纸的操作。

public abstract class Sticker {
    protected Matrix mMatrix;
      public abstract void draw(Canvas canvas);
      ……
}

因为贴纸可能是Bitmap,也就是普通的图片,但是我们也可以添加气泡啊,标签啊之类的自定义的Drawable, 当然也可能是各种图形,为了其扩展性,这里将Sticker类抽象。

扩展的DrawableSticker

public class DrawableSticker extends Sticker {
    private Drawable mDrawable;
    private Rect mRealBounds;
    ……
      @Override
    public void draw(Canvas canvas) {
        canvas.save();
        canvas.concat(mMatrix);
        mDrawable.setBounds(mRealBounds);
        mDrawable.draw(canvas);
        canvas.restore();
    }
      ……
}

那么大致的结构就确定了,在View的onTouchEvent()中,我们根据手势改变Sticker的Matrix,并在onDraw()方法中将Sticker画出。

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
      ……
    sticker.draw(canvas);
      ……
}

实现

在有了思路和一个结构后,大致已经成功了一半,接下来就是一个个功能的实现,和一遍遍的调试了。

由于我们可以添加不止一个Sticker,所以我们的StickerView需要保有对所有添加的Sticker应用,这里可以用一个List集合来储存。而对于当前正在操作的Sticker引用需要额外储存。

因为对于不同的手势,我们所做出的操作不同,那么我们需要在内部声明所有存在的状态和一个当前状态

public class StickerView extends ImageView {
    private enum ActionMode {
        NONE,   //nothing
        DRAG,   //drag the sticker with your finger
        ZOOM_WITH_TWO_FINGER,   //zoom in or zoom out the sticker and rotate the sticker with two finger
        ZOOM_WITH_ICON,    //zoom in or zoom out the sticker and rotate the sticker with icon
        DELETE,  //delete the handling sticker
        FLIP_HORIZONTAL //horizontal flip the sticker
    }
      private ActionMode mCurrentMode = ActionMode.NONE;

    private List<Sticker> mStickers = new ArrayList<>();
    private Sticker mHandlingSticker;
      ……
}

接下来就是一个一个功能实现,但肯定的是,最先需要实现的就是将贴纸添加进来的方法。

添加贴纸

实现起来也很简单,这里就是new一个Sticker对象,并把它加入到我们的List中并重绘,注意,我们默认将Sticker缩放至原来的一半,并放在StickerView中央。

public void addSticker(Drawable stickerDrawable) {
        Sticker drawableSticker = new DrawableSticker(stickerDrawable);

        float offsetX = (getWidth() - drawableSticker.getWidth()) / 2;
        float offsetY = (getHeight() - drawableSticker.getHeight()) / 2;
        drawableSticker.getMatrix().postTranslate(offsetX, offsetY);

        float scaleFactor;
        if (getWidth() < getHeight()) {
            scaleFactor = (float) getWidth() / stickerDrawable.getIntrinsicWidth();
        } else {
            scaleFactor = (float) getHeight() / stickerDrawable.getIntrinsicWidth();
        }
        drawableSticker.getMatrix().postScale(scaleFactor / 2, scaleFactor / 2, getWidth() / 2, getHeight() / 2);

        mHandlingSticker = drawableSticker;
        mStickers.add(drawableSticker);

        invalidate();
}

找到贴纸

在我们的贴纸对象被添加进来后我们才可以继续接下来的操作,在我们触摸屏幕时,要判断是否按在贴纸区域,按在哪个贴纸上。实现比较简单,我们的每个Sticker都有一个矩形范围,在经过移动缩放之类的操作后也可以通过Matrix来轻松得到那个矩形区域(Rect类),只需要判断这个范围是否包含我们按下的点,而这一步应该在Touch事件的ACTION_DOWN事件中进行。

switch (action) {
     case MotionEvent.ACTION_DOWN:
         mCurrentMode = ActionMode.DRAG;
         mDownX = event.getX();
         mDownY = event.getY();
         mHandlingSticker = findHandlingSticker();          
          ……
}

其中findHandlingSticker()正是做了这样一些事情

private Sticker findHandlingSticker() {
    for (int i = mStickers.size() - 1; i >= 0; i--) {
        if (isInStickerArea(mStickers.get(i), mDownX, mDownY)) {
            return mStickers.get(i);
         }
    }
    return null;
}

移动贴纸

找到了我们要操作的Sticker后,我们就可以对其进行操作了,移动操作最为简单,只涉及一根手指,在ACTION_DOWN事件中我们记录下当前Sticker的状态和事件起始坐标,在ACTION_MOVE事件中,我们利用当前点的坐标计算出实际偏移量,利用Matrix的postTransition()方法让Sticker做出随手指的移动。

mMoveMatrix.set(mDownMatrix);
mMoveMatrix.postTranslate(event.getX() - mDownX, event.getY() - mDownY);
mHandlingSticker.getMatrix().set(mMoveMatrix);

缩放与旋转贴纸

一般的缩放与旋转操作都是需要两根手指,所以我们需要在ACTION_POINT_DOWN事件中监听第二根手指按下。这时我们还需要计算出两根手指之间的距离以及中心点还有角度,因为我们要让Sticker以这个中心点为中心缩放旋转,在ACTION_MOVE事件中以新的两指尖距离/起始两指尖距离作为缩放比缩放。以新的角度-起始角度作为旋转角。

switch (action) {
     case MotionEvent.ACTION_POINTER_DOWN:
        mOldDistance = calculateDistance(event);
        mOldRotation = calculateRotation(event);
        mMidPoint = calculateMidPoint(event);          
          ……
}

相应的缩放与旋转,利用Matrix的postScale和postRotate方法实现

float newDistance = calculateDistance(event);
float newRotation = calculateRotation(event);

mMoveMatrix.set(mDownMatrix);
mMoveMatrix.postScale(newDistance / mOldDistance, newDistance / mOldDistance, mMidPoint.x, mMidPoint.y);
mMoveMatrix.postRotate(newRotation - mOldRotation, mMidPoint.x, mMidPoint.y);

mHandlingSticker.getMatrix().set(mMoveMatrix);

添加选中效果

在经过上面的步骤后,我们的StickerView已经可以添加贴纸,用手势操纵贴纸移动,缩放,旋转了,但是我们并没有对选中的贴纸进行特殊处理,因为一般的应用对于选中的贴纸,都会用一个边框围住,并在相应的边框边角显示一些操作按钮。因为这个按钮有图标,所以我们也可以把其作为一个Sticker,只是还需要一个位置的x,y值。

public class BitmapStickerIcon extends DrawableSticker {
    private float x;
    private float y;
      ……
}

因为对于每个Sticker的边框及其坐标是很容易获得的,所以我们只需要在onDraw方法中在正在处理的Sticker周围画上边框和按钮就可以了。下面的代码获得了选中Sticker的边角坐标,并将操作按钮画在相应位置。

if (mHandlingSticker != null && !mLooked) {

    float[] bitmapPoints = getStickerPoints(mHandlingSticker);

    float x1 = bitmapPoints[0];
    float y1 = bitmapPoints[1];
    float x2 = bitmapPoints[2];
    float y2 = bitmapPoints[3];
    float x3 = bitmapPoints[4];
    float y3 = bitmapPoints[5];
    float x4 = bitmapPoints[6];
    float y4 = bitmapPoints[7];

    canvas.drawLine(x1, y1, x2, y2, mBorderPaint);
    canvas.drawLine(x1, y1, x3, y3, mBorderPaint);
    canvas.drawLine(x2, y2, x4, y4, mBorderPaint);
    canvas.drawLine(x4, y4, x3, y3, mBorderPaint);

    float rotation = calculateRotation(x3, y3, x4, y4);
    //draw delete icon
    canvas.drawCircle(x1, y1, mIconRadius, mBorderPaint);
    mDeleteIcon.setX(x1);
    mDeleteIcon.setY(y1);
    mDeleteIcon.getMatrix().reset();

    mDeleteIcon.getMatrix().postRotate(
                    rotation, mDeleteIcon.getWidth() / 2, mDeleteIcon.getHeight() / 2);
    mDeleteIcon.getMatrix().postTranslate(
                    x1 - mDeleteIcon.getWidth() / 2, y1 - mDeleteIcon.getHeight() / 2);

    mDeleteIcon.draw(canvas);

            //draw zoom icon
    canvas.drawCircle(x4, y4, mIconRadius, mBorderPaint);
    mZoomIcon.setX(x4);
    mZoomIcon.setY(y4);

    mZoomIcon.getMatrix().reset();
    mZoomIcon.getMatrix().postRotate(
                    45f + rotation, mZoomIcon.getWidth() / 2, mZoomIcon.getHeight() / 2);

    mZoomIcon.getMatrix().postTranslate(
                    x4 - mZoomIcon.getWidth() / 2, y4 - mZoomIcon.getHeight() / 2);

    mZoomIcon.draw(canvas);

    //draw flip icon
    canvas.drawCircle(x2, y2, mIconRadius, mBorderPaint);
    mFlipIcon.setX(x2);
    mFlipIcon.setY(y2);

    mFlipIcon.getMatrix().reset();
    mFlipIcon.getMatrix().postRotate(
                    rotation, mDeleteIcon.getWidth() / 2, mDeleteIcon.getHeight() / 2);
    mFlipIcon.getMatrix().postTranslate(
                    x2 - mFlipIcon.getWidth() / 2, y2 - mFlipIcon.getHeight() / 2);

    mFlipIcon.draw(canvas);
}

总结

这样,我们大致完成了StickerView的所有功能,当然上面并没有太完整的代码,只是一些代码片段,但是已经说明了大致的思路及操作,想了解更多细节可以去查看源码。我们在自定义View时,首先最需要的是一个思路,有了思路之后要想其代码结构,在这两块都想好了以后再开发其功能,会事半功倍。

原文发布于微信公众号 - 非著名程序员(non-famous-coder)

原文发表时间:2016-11-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏iOS Developer

Bison教你1分钟集成3D无限翻转的Banner

1191
来自专栏Android先生

一种粗暴快速的Android全屏幕适配方案

由于Android碎片化严重,屏幕适配一直是开发中较为头疼的问题。面对市面上五花八门的屏幕大小与分辨率,Android基于dp与res目录名称来适配的方案已无法...

1283
来自专栏非典型技术宅

iOS动画系列之六:利用CABasic Animation完成带动画特效的登录界面1. 画风突变的笑脸2. 心跳3. iOS实践:实现一个带动效的登录界面

1396
来自专栏Android 开发学习

NestedScrollView 嵌套 ListView 实现滑动折叠效果

6505
来自专栏Windows Community

New UWP Community Toolkit - Carousel

概述 New UWP Community Toolkit  V2.2.0 的版本发布日志中提到了 Carousel 的调整,本篇我们结合代码详细讲解  Caro...

4106
来自专栏葬爱家族

Android高德之旅(4)我的位置

说到吃饭,最近刚开了一家...咳咳,说到位置定位,主要包含两部分,第一个是根据GPS获取经纬度,第二是根据经纬度获取省市区行政区划。先说第一个,使用过地图导航的...

1221
来自专栏青蛙要fly的专栏

图片操作系列 —(2)手势旋转图片

在上次的文章:图片操作系列 —(1)手势缩放图片功能中,我们已经学会了如何用手势来对图片进行缩放。这次我们继续来看第二个操作,那就是如何用手势来旋转图片。

2784
来自专栏Android小菜鸡

定制View的动画

  在日常开发中,View单调的出场和切换已经不能满足用户的要求了。平花的切换动画、出场动画以及离场动画有了一定的必要性。这里就简单的介绍一下View动画的定制...

914
来自专栏jianhuicode

带着问题写React Native原生控件--Android视频直播控件

最近在做的采用React Native项目有一个需求,视频直播与直播流播放同一个布局中,带着问题去思考如何实现,能更容易找到问题关键点,下面分析这个控件解决方法...

1.7K8
来自专栏非典型技术宅

iOS动画系列之五:基础动画之缩放篇&旋转篇Swift+OC1. 思路和最终成果2. 抽取公共方法3. 懒加载Layer4. 添加动画

1541

扫码关注云+社区

领取腾讯云代金券