【Android】极简方式实现任意圆角的layout

且勿论都会的生活与山水间的生活孰优孰劣,孰利孰弊。人生随处皆不满,欲图解脱,唯于艺术中求之。  ——丰子恺

【Android】极简方式实现任意圆角的layout_第1张图片


前言

本文教你不到100行代码实现一个实用功能,任意圆角的layout。从而了解自定义view步骤中draw的实用操作。直接使用的同学,可瞬移文末。


正文

废话少说,先上图

错了,是这个

【Android】极简方式实现任意圆角的layout_第2张图片

功能如图所示

  • 可任意嵌套子view,包括ViewGroup使其圆角
  • 可任意灵活控制四个corner圆角

用法:

 

            

思路引导

  1. Xfermode:可以实现两个图形的有规则合成,使用圆角和view融合(个人觉得麻烦)
  2. canvas  裁切 API :canvas提供了 canvas.clipRect() , canvas.clipPath() 等api进行画布的裁切,裁出圆角矩形

本文采用的是第二种方法实现,简洁,简单。故不过多阐述Xfermode,如图了解就好,详细资料见文末。

Xfermode (盗图)

【Android】极简方式实现任意圆角的layout_第3张图片

 

开工,撸代码

【Android】极简方式实现任意圆角的layout_第4张图片

核心代码

 override fun dispatchDraw(canvas: Canvas) {
        //圆角矩形path的四个角
        //dx,dy 成对出现,控制上右下左,四个位置圆角
        val array = floatArrayOf(leftTopRound, leftTopRound, rightTopRound, rightTopRound, rightBottomRound, rightBottomRound, leftBottomRound, leftBottomRound);
        mPath.addRoundRect(RectF(0f, 0f, width.toFloat(), height.toFloat()), array, Path.Direction.CW)
        //描边用于演示
        drawStroke(canvas)
        //裁切canvas
        canvas.clipPath(mPath)
        //画子view
        super.dispatchDraw(canvas)
    }

没看错,核心代码就这么点。下面开始详细介绍。

重写 dispatchDraw(canvas : Canvas)

相信大家重写最多的是onDraw()方法进行自定义绘制。那为什么这里重写的是dispatchDraw()方法呢,这方法有啥作用?

View绘制流程

 

  • onDraw(canvas):自定义view考虑使用
  • dispatchDraw(canvas):定义ViewGroup考虑使用,因为有子view,需要分发绘制

所以我们就重写dispatchDraw()方法,在分发给子veiw前,将canvas切割成想要的大小。是不是很容易?

【Android】极简方式实现任意圆角的layout_第5张图片

但是有的同学就会问了,既然onDraw()在dispatchDraw()前执行,那我们在熟悉的onDraw()方法中将canvas裁切,不也可以吗?

道理是这个道理,但是,并不行。感兴趣的朋友可以试一下。

原因

draw机制对于ViewGroup有优化机制,因为ViewGroup默认是透明的,不绘制自己(onDraw),只是用来布局和测量,绘制子view。

源码

public void draw(Canvas canvas) {
        final int privateFlags = mPrivateFlags;
        final boolean dirtyOpaque = (privateFlags & PFLAG_DIRTY_MASK) == PFLAG_DIRTY_OPAQUE 
&& (mAttachInfo == null || !mAttachInfo.mIgnoreDirtyState);
       //省略部分代码
       //如果dirtyOpaque为ture,就不会执行onDraw()
       if (!dirtyOpaque) onDraw(canvas);
       //省略部分代码
}
  • dirtyOpaque:在view初始化时,主要会调用 computeOpaqueFlags()和setFlags( 值, DRAW_MASK)方法进行OpaqueFlag的计算。
protected void computeOpaqueFlags() {
        // Opaque if:
        //   - Has a background
        //   - Background is opaque
        //   - Doesn't have scrollbars or scrollbars overlay

        //省略部分代码
    }

注释大意就是ViewGroup要有一个不透明的背景。所以当我们没设置背景时,是不会调用onDraw()方法的。那有没有方法可以不设置也能调用呢?还真有

/**
     * If this view doesn't do any drawing on its own, set this flag to
     * allow further optimizations. By default, this flag is not set on
     * View, but could be set on some View subclasses such as ViewGroup.
     *
     * Typically, if you override {@link #onDraw(android.graphics.Canvas)}
     * you should clear this flag.
     *
     * @param willNotDraw whether or not this View draw on its own
     */
    public void setWillNotDraw(boolean willNotDraw) {
        setFlags(willNotDraw ? WILL_NOT_DRAW : 0, DRAW_MASK);
    }

注释大致就是说,view默认不设置notDraw,而ViewGroup默认设置。ViewGroup的 initViewGroup() 中调用了

setFlags(WILL_NOT_DRAW, DRAW_MASK);

就设置成notDraw了

小结

  • ViewGroup默认情况下,会被设置成WILL_NOT_DRAW,这是从性能考虑,这样一来,onDraw就不会被调用了。
  • 如果我们想使用到ViewGroup的onDraw方法,有两种方法:
  1. 设置一个背景颜色,如#00000000。
  2. 在构造函数里面,调用setWillNotDraw(false),去掉其WILL_NOT_DRAW flag。

裁切canvas

  • 在绘制子view之前,我们裁切成圆角矩形
val array = floatArrayOf(leftTopRound, leftTopRound, rightTopRound, rightTopRound, rightBottomRound, rightBottomRound, leftBottomRound, leftBottomRound);
mPath.addRoundRect(RectF(0f, 0f, width.toFloat(), height.toFloat()), array, Path.Direction.CW)
canvas.clipPath(mPath)

canvas裁切

canvas.clip的api

【Android】极简方式实现任意圆角的layout_第6张图片

由于没发现有圆角矩形的裁切方法,故选用clipPath(),自己手画一条path进行裁切。咱就讲讲我用的addRoundRect,详细的path资料见文末。 

addRoundRect(RectF rect, float[] radii, Direction dir)
第一个参数:传入一个rect矩形
第二个参数:传入一个容量为8的数组,用于确定上右下左四个角的弧度
第三个参数:传入path的方向,有逆时针和顺时针,用于确定相交区域(这里没用到)

总结

实现任意圆角功能总共分三步

  1. 重写dispatchDraw()方法
  2. 在调用super.dispatchDraw之前对canvas进行裁切

虽然步骤简单(代码越少才越好),但是其中的细节还是很多的。我就不细说了,也说的没有参考资料的好,所以推荐大家都去看一下文末的推荐资料,能让你很好的掌握自定义view,至少会有一个自定义view的思路,一些api不懂,即查即用就好。

 

源码

推荐资料

Hencoder范围裁切

Hencoder Xfermode

 

 

 

你可能感兴趣的:(android)