一、首先看下效果

tour_view.gif

二、分析

发布一个新版本新功能上线之前总是有引导用户操作的覆盖层,常见的是某些按钮高亮,然后一个提示语或者一张漫画图片。
之前遇到这种功能,一直是UI直接做一张全屏的图片,然后我放到ImageView里,功能能实现,但是经常遇到适配问题,或者图片太大OOM。
今天试着搜索了一下看有没有优雅的方式,百度关键字TourView GuideView都能找到demo,但是看源码很乱,或者就是功能太多,我只要一个简单的高亮就行,试着造一个轮子。

三、代码

我们把每一个引导看成一个对象 TourModel,建立 model 的模型:

public class TourModel {
    private Bitmap bitmap;
    private int type;

    private int bitmapLeft;
    private int bitmapTop;

    private int holeLeft;
    private int holeTop;
    private int holeRight;
    private int holeBottom;

    ...  忽略setter  getter  ...

    /**
     * 设置高亮洞的rect坐标
     * @param holeLeft 洞左
     * @param holeTop 洞上
     * @param holeRight 洞右
     * @param holeBottom 洞下
     */
    public void setHole(int holeLeft, int holeTop, int holeRight, int holeBottom) {
        this.holeLeft = holeLeft;
        this.holeTop = holeTop;
        this.holeRight = holeRight;
        this.holeBottom = holeBottom;
    }

    /**
     * 设置引导图片的位置
     * @param bitmapLeft 图片居左
     * @param bitmapTop 图片居上
     */
    public void setBitmapLocation(int bitmapLeft, int bitmapTop) {
        this.bitmapLeft = bitmapLeft;
        this.bitmapTop = bitmapTop;
    }
}

bitmap也就是展示的图片,这个地方有点局限,最好每次只展示一张图片,但是够用,我基本每一个引导只会要求展示一张图片;这个图片的居左和居上需要记录,绘制的时候能用到;然后是高亮区域的坐标,几乎就是点击的一个 view 的上下左右。

再来看看自定义 View 做了哪些事:

    private void initView(Context context, AttributeSet attrs) {
        mContext = context;
        tourModels = new ArrayList();
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(Color.WHITE);
        blurMaskFilter = new BlurMaskFilter(blurWidth, BlurMaskFilter.Blur.OUTER);
        disableHardwareRendering(this);
    }

    /**
     * 禁止硬件加速
     * @param v
     */
    public static void disableHardwareRendering(View v) {
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.HONEYCOMB) {
            v.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        }
    }

一些初始化,基操,然后关键是这个禁止硬件加速,这个是高亮区域周围的虚化,如果没有这句话,虚化不会显示,这个我在自定义涂鸦的时候搜到的,想不到这里用上了。
再往下走:

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        width = MeasureSpec.getSize(widthMeasureSpec);
        height = MeasureSpec.getSize(heightMeasureSpec);

        setMeasuredDimension(width, height);
    }

测量,这里没有要写的,基本都是全屏。
往下,关键代码 onDraw() :

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (position != -1) {
            TourModel tourModel = tourModels.get(position);

            //画高亮区域
            mPaint.setMaskFilter(null);
            //离屏缓存
            int saved = canvas.saveLayer(null, null, Canvas.ALL_SAVE_FLAG);
            canvas.drawColor(Color.parseColor("#cc000000"));
            drawHole(canvas, tourModel);
            mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.XOR));
            drawHole(canvas, tourModel);
            mPaint.setXfermode(null);
            //恢复画布
            canvas.restoreToCount(saved);

            //画引导的信息
            canvas.drawBitmap(tourModel.getBitmap(), tourModel.getBitmapLeft(), tourModel.getBitmapTop(), mPaint);

            //虚化
            if (blurWidth > 0) {
                mPaint.setMaskFilter(blurMaskFilter);
                drawHole(canvas, tourModel);
            }
        }
    }

一个重要的方法 mPaint.setXfermode(),这个方法一共有16种模式,设置这个模式需要两张画布结合才会显示效果,所以这里用到一个我不知道的技术,叫离屏缓存,也就是新生成一张画布,然后在上面绘制内容,最后再恢复画布将内容绘制到view上来。
我们这里用的是 XOR 模式,也就是两张画布重合的地方被舍弃,于是就有了镂空的圆形高亮的孔洞。
恢复画布之后我们再在view上绘制我们的引导图片和虚化效果。
绘制高亮区域 drawHole() 的代码:

    /**
     * 画高亮区域
     *
     * @param canvas
     * @param tourModel
     */
    private void drawHole(Canvas canvas, TourModel tourModel) {
        switch (tourModel.getType()) {
            case Type.TYPE_CIRCLE:
                int holeWidth = tourModel.getHoleRight() - tourModel.getHoleLeft();
                int holeHeight = tourModel.getHoleBottom() - tourModel.getHoleTop();
                int radius = holeWidth > holeHeight ? holeWidth / 2 : holeHeight / 2;
                canvas.drawCircle((tourModel.getHoleLeft() + tourModel.getHoleRight()) / 2, (tourModel.getHoleTop() + tourModel.getHoleBottom()) / 2, radius, mPaint);
                break;
            case Type.TYPE_RECT:
                canvas.drawRect(new RectF(tourModel.getHoleLeft(), tourModel.getHoleTop(), tourModel.getHoleRight(), tourModel.getHoleBottom()), mPaint);
                break;
            case Type.TYPE_OVAL:
            default:
                canvas.drawOval(new RectF(tourModel.getHoleLeft(), tourModel.getHoleTop(), tourModel.getHoleRight(), tourModel.getHoleBottom()), mPaint);
                break;
        }
    }

判断类型,三种,分别是圆形、矩形和椭圆,这里矩形没有加圆角,可以扩展。
基本就这些,代码我已经做成库了,可以一键导入:

    compile 'com.rjp:TourView:1.0.0'

用法如下,xml 里加入或者直接 addView 到 activity 的根布局:

    

我这里为了方便直接加入xml了,然后在你点击某一个 view 的时候:

    TourModel tourModel = new TourModel();
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.bg_float);
    tourModel.setBitmap(bitmap);
    tourModel.setBitmapLocation(v.getLeft(), v.getBottom() + 80);
    tourModel.setHole(v.getLeft() - 20, v.getTop() - 10, v.getRight() + 20, v.getBottom() + 10);
    tourModel.setType(TYPE_CIRCLE);
    tourView.add(tourModel);
    tourView.next();

新建一个 model,设置 bitmap 以及 bitmap 的位置,设置高亮区域的坐标,设置高亮区域类型,然后 add 进 TourView,调用 next() 方法开始引导。

非常方便,有用给个star。不算原创,看的几个demo做的总结。GitHub地址

文章来源于互联网:【造轮子】几行代码实现高亮显示按钮,完成App新手引导

发表评论