阅读 974

android 给 View 添加圆角

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

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

设置前后对比图:

  • 设置前 1629524679(1).png
  • 设置后 1629524733(1).png

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 颜色属性,除了上面的方式,还有其他方式:

  1. #rgb 的形式,也就是 red green blue
  2. #rrggbb 的形式,同上
  3. #aarrggbb 的形式,其中 aa 代表的是透明度
  4. 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

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

3. 给图片设置圆角

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

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