Android 中常见切圆角的方式

Android 切圆角的方式

Android 中有哪些可以切圆角的实现方式呢？

本文总结一下常用的方式。
以下内容分为以下几部分：

1. 利用 Drawable 的 shape xml 实现
2. CardView 实现圆角
3. fresco 中的 SimpleDraweeView 实现圆角
4. 利用 View 的 ViewOutlineProvider 实现圆角
5. 总结

1. 利用 Drawable 的 shape xml 实现

很多时候，我们可以自定义一些 drawable , 代码如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="15dp"/>
    <solid android:color="#FFFFFF"/>
    <stroke android:width="1dp" android:color="#EBEBEB"/>
</shape>

其中，corners 就是我们实现的圆角，这里指定圆角的半径为 15dp。

solid 是指填充色，这里为白色；
stroke 为drawable 的边缘宽度和颜色设置，这里为 1dp 颜色比白色黑一点。
如果知识想要 「圆角」的话，可以不需要指定 stroke

然后在我们需要的 View 上，设置它的 background 为该 drawable 即可.

效果为：

drawable 圆角

本质是在 background 上加了圆角。

2. CardView 的圆角

CardView 是自带圆角实现的，我们只需要在它的定义中加一句 app:cardCornerRadius="8dp" 即可。

代码如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.cardview.widget.CardView
        android:layout_width="256dp"
        android:layout_height="128dp"
        app:cardBackgroundColor="#0084FF"
        app:cardCornerRadius="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

设置该 CardView 圆角半径为 16dp,
效果图如下：

cardView 圆角

3. fresco 中的 SimpleDraweeView

fresco 是一个强大的图片库，里面的 SimpleDraweeView 常用来加载图片。
SimpleDraweeView 实现了很多功能，其中一个就是实现了圆角属性 roundedCornerRadius

实现代码：

 <com.facebook.drawee.view.SimpleDraweeView
        android:layout_width="256dp"
        android:layout_height="128dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:actualImageScaleType="centerCrop"
        app:roundedCornerRadius="3dp" />

这里设置图片圆形边角为 3dp
实现效果为：

SimpleDraweeView 圆角

4. 利用 View 的 ViewOutlineProvider 实现圆角

这种实现方式，本质上是修改了 View 的轮廓。
代码实现：

itemView.outlineProvider = object : ViewOutlineProvider() {
    override fun getOutline(view: View, outline: Outline) {
        outline.setRoundRect(0, 0, view.width, view.height, 5.dp.toFloat())
    }
}
// 打开开关
itemView.clipToOutline = true

为整个 View 添加上圆角。
实现效果为：

outlineProvider 圆角

这样的好处是，不需要给里面的子 view 设置圆角，在最外层的 View 设置为圆角即可。
更大的好处是：比使用了第一种方式 drawable 的 xml 少了一层过度绘制。因为省去了设置的 background

利用 ViewOutlineProvider 的实现圆角，本质上是在 View 的画布上画了一个圆角的矩形。

setRoundRect(xxx)

同时 outline 还可以画其他的一些内容。

outline.setRect(xxx)// 画矩形
outline.setRoundRect(xxx)// 画圆角矩形
outline.setOval(xxx) // 画椭圆

同时，因为 outline.setRoundRect(0, 0, view.width, view.height, 5.dp.toFloat()) 是在一个矩形上画的圆角。因为，当我们的矩形减小或增大时，有些圆角是没有区域可画，会形成部分圆角存在的情况。

既然提到了 ViewOutlineProvider , 那就得提一下 StateListAnimator 这个动画得效果， 感兴趣得自己去搜索一下。可参考 StateListAnimator

5.总结

上面总结了一下常见的 Android 中实现圆角的方式，在使用过程中，怎么方便怎么来。
我个人最近比较喜欢用 ViewOutlineProvider, 对轮廓进行剪切，高效且方便。

2019.12.6 by chendroid

PS: 再水一下

balabala

Droid 二三事.jpg