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

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

---

前言

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

---

正文

废话少说，先上图

错了，是这个

功能如图所示：

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

用法：

 <com.example.dzj.android_practice.viewdemo.RoundRectLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:round="20dp">

            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:background="@mipmap/spid" />
</com.example.dzj.android_practice.viewdemo.RoundRectLayout>

思路引导

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

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

Xfermode （盗图）

 

开工，撸代码

核心代码

 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切割成想要的大小。是不是很容易？

但是有的同学就会问了，既然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

由于没发现有圆角矩形的裁切方法，故选用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