Android切圆角的几种常见方式总结

时间:2021-05-20

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

本文总结一下常用的方式。

以下内容分为以下几部分:

  • 利用 Drawable 的 shape xml 实现
  • CardView 实现圆角
  • fresco 中的 SimpleDraweeView 实现圆角
  • 利用 View 的 ViewOutlineProvider 实现圆角
  • 总结
  • 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, 对轮廓进行剪切,高效且方便。

    好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对的支持。

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章