【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

 

 

 

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Android在系统层面实现圆角效果主要有两种方式: 1. 使用XML文件定义Shape 可以通过在drawable目录下创建XML文件定义Shape,在其中设置圆角半径来实现圆角效果。具体步骤如下: - 在drawable目录下创建一个XML文件,例如:round_rect.xml - 在文件中定义Shape,设置圆角半径和背景颜色,例如: ``` <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <corners android:radius="10dp" /> <solid android:color="@color/colorPrimary" /> </shape> ``` - 在需要使用圆角效果的View中引用该Shape,例如: ``` <ImageView android:layout_width="match_parent" android:layout_height="wrap_content" android:src="@drawable/your_image" android:background="@drawable/round_rect"/> ``` 2. 使用View的setClipToOutline方法 在Android 5.0及以上版本中,View提供了setClipToOutline方法,可以通过该方法将View的形状裁剪成圆角矩形。具体步骤如下: - 在布局文件中设置需要使用圆角效果的View的形状为矩形,例如: ``` <ImageView android:layout_width="match_parent" android:layout_height="wrap_content" android:src="@drawable/your_image" android:background="@color/colorPrimary" android:outlineProvider="background" android:clipToOutline="true"/> ``` - 在Java代码中调用setClipToOutline方法,例如: ``` imageView.setClipToOutline(true); ``` 以上两种方式都可以实现圆角效果,具体选择哪种方式取决于实际需求和个人偏好。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值