android 给 View 添加圆角

这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战

给 View 添加圆角；都是设置 4dp 大小的圆角为例，为了分辨同时也会设置 #cccccc 的背景颜色

设置前后对比图：

设置前
设置后

1. 通过在 xml 文件中设置 background 属性

1）. 首先在 `res/drawable` 中新建一个 xml 文件，由于是设置 4dp 同时有一个背景颜色，所以我取名为 `radius_4_bg_cccccc.xml`，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ccc" />
    <corners android:radius="4dp" />
</shape>

shape 标签下的标签说明：

corners 为形状产生圆角。仅当形状为矩形时适用。

属性：

android:radius 所有角的半径，下面具体的角描述会这个对应的值覆盖。
android:topLeftRadius 左上角的圆角半径。
android:topRightRadius 右上角的圆角半径。
android:bottomLeftRadius 左下角的圆角半径。
android:bottomRightRadius 右下角的圆角半径。至于什么是圆角半径，看下图：

1629525964(1).jpg

solid 用于填充形状的纯色。

属性：

android:color 应用于形状的颜色，以十六进制值或颜色资源表示。

stroke 设置边框，也就是前端中的 border

属性：

android:width 边框的宽度
android:color 边框的颜色
android:dashGap 每一段之间的间距
android:dashWidth 每一段的长度

最后两个属性可能不是很明白，在不设置 dashGap 的时候是看不出任何区别的，即便把 dashWidth 设置得很大，但是一旦将 dashGap 设置了一个大于 1dp 的值，那么就能看出差别了，具体看下图：

1629537680(1).png

padding 内边距

跟我们平时设置的 padding 是一样的；

属性：

android:left 左边的内边距
android:right 右边的内边距
android:top 上边的内边距
android:bottom 下边的内边距

gradient 渐变色

属性：

android:angle 渐变的角度，我测试了只有当 type 为 linear 有效
android:centerX 渐变的中心位置的 x 方向，取值： 0-1.0 。只有 type 为 radial 和 sweep 有效
android:centerY 渐变的中心位置的 y 方向，取值： 0-1.0 。同上
android:startColor
android:centerColor
android:endColor 渐变的颜色，从开始到结束
android:gradientRadius 渐变半径，只有 type 为 radial 有效
android:type 渐变类型，总共有三个类型： linear, radial 和 sweep
android:useLevel 如果此属性用作 LevelListDrawable，则值为“true”。

三种类型的具体效果：

1629540525(1).png 这里的效果图我只是设置了 android:startColor 和 android:endColor 。

2）. 说一说可以设置的值

那上面的 xml 代码为例：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ccc" />
    <corners android:radius="4dp" />
</shape>

这里的 android:color 颜色属性，除了上面的方式，还有其他方式：

#rgb 的形式，也就是 red green blue
#rrggbb 的形式，同上
#aarrggbb 的形式，其中 aa 代表的是透明度
在 colors.xml 中定义的颜色，也就是这样 <solid android:color="@color/teal_200" />

这里的 android:radius="4dp" 属性，同样可以使用 dimen.xml 文件中定义的值，像这样： <corners android:radius="@dimen/test_4dp" /> 。

3）. 如何使用上面定义好的 xml 文件

在布局文件中找到那个 View ，代码如下：

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:padding="50dp"
        android:background="@drawable/reduis_4_bg_ccc" /> <!-- 这里在这里使用 -->

2. 使用 `CardView` 来实现圆角

要想实现上面相同的圆角，只需要按下面的代码就行：

<!-- 关键属性是 cardCornerRadius -->
<androidx.cardview.widget.CardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:cardBackgroundColor="#ccc"
    app:cardCornerRadius="@dimen/test_4dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:padding="50dp" />
</androidx.cardview.widget.CardView>

我们发现这种方式也是非常的简单，只不过要嵌套一层。下面我们看看 CardView 还提供了那些属性：

cardCornerRadius 设置圆角的半径
cardBackgroundColor 设置背景色
cardElevation 设置 Z 轴阴影
cardMaxElevation 设置 Z 轴的最大高度值
cardUseCompatPadding 是否使用 CompadPadding 。如果设置为 true ，会有一个内边距
cardPreventCornerOverlap 是否使用 PreventCornerOverlap
contentPadding 内容的 padding
contentPaddingLeft 左方向的 padding
contentPaddingRight 右方向的 padding
contentPaddingTop 上方向的 padding
contentPaddingBottom 下方下的 padding

其中关于 cardUseCompatPadding 和 cardPreventCornerOverlap 的理解，可以参照这篇： CardView属性app:cardUseCompatPadding和app:cardPreventCornerOverlap ；关于 Z 轴阴影和最大高度，具体这样理解，相当于屏幕上方有一个太阳，当 View 离这个太阳越近，产生的阴影的越明显。

3. 给图片设置圆角

使用第一种方式是不能给图片添加圆角的；只能使用第二种方式，但我看网上很多都说第二种方式在有些手机上不兼容，所以如果你在使用的过程中也遇到了，那么就考虑其他方式吧。

在约束布局中，有这么一个 ImageFilterView 可以帮助我们轻松完成这个功能，我在项目中使用过，目前还没有反馈不兼容的，只不过使用这个有一个条件，那就是 ConstraintLayout-v2.0 中才有提供。
可以使用 ShapeableImageView 这个，目前我们项目也有使用，也暂时没有发现有不兼容的情况。
CardView 也是一个不错的选择。