View实现圆角的几种方式_view 圆角

1.通过给view设置background实现圆角

这种方式是通过shape设置背景色的方式实现圆角，不影响view的绘制区域，只是通过设置背景色影响显示区域来实现圆角

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:bottomLeftRadius="11dp"/>
    <solid android:color="@color/element_tcl_navigation_item_bg_middle_focus_color" />
</shape>
1
2
3
4
5
6

corner标签代表圆角，支持设置4个圆角一个单个圆角设置

bottomLeftRadius ：左下圆角

bottomRightRadius : 右下圆角

topLeftRadius : 左上圆角

topRightRadius :右上圆角

solid标签代表填充色，纯色填充

gradient标签代表渐变色填充

shape也支持java代码创建：

GradientDrawable在Android 中便是shape标签的代码实现，

val gradientDrawable = background as GradientDrawable
gradientDrawable.setColor(Color.GRAY)
gradientDrawable.cornerRadius = 10F
view.background = gradientDrawable
1
2
3
4

上述就是代码动态创建shape的示例

想要设置某个圆角可以使用

val radii = floatArrayOf(corner,corner,0f,0f,0f,0f,corner,corner)
gradientDrawable.cornerRadii = radii
1
2

setCornerRadii(@Nullable float[] radii) 该方法实现某个圆角的设置，对应关系就是8位数组是左上，右上，右下，左下，两位对应一个圆角，值就是想要的圆角值。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:left="5dp"
        android:right="5dp">
        <shape>
            <solid android:color="@color/white" />
            <corners
                android:bottomLeftRadius="10dp"
                android:topLeftRadius="10dp" />
        </shape>

    </item>

</layer-list>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

需要注意这种layer-list的写法，这种需要代码动态创建时需要用到LayerDrawable

这种方式需要动态修改shape的时候需要

 val layerDrawable = background as LayerDrawable
 val drawable = layerDrawable.getDrawable(0)
 val drawables = arrayOf(drawable)
 val realLayoutDrawable = LayerDrawable(drawables)
        //layer drawable left 和 right的值
 realLayoutDrawable.setLayerInset(0, 5,0,5,0 )
 view.background = realLayoutDrawable
1
2
3
4
5
6
7

layerDrawable相当于一个数组中包含了很多GradientDrawable，需要修改时，需要先get出来 修改后再放入即setLayerInset(int index, int l, int t, int r, int b)

2.通过glide加载图片设置圆角

    fun loadImageIntoBackgroundWithSomeCorner(
        view: View,
        context: Context,
        url: String,
        topLeftCorner: Int,
        topRightCorner: Int,
        bottomLeftCorner: Int,
        bottomRightCorner: Int,
        imageLoaderDrawableListener: ImageLoaderDrawableListener
    ) {
        val roundedCorners = GranularRoundedCorners(
            topLeftCorner.toFloat(),
            topRightCorner.toFloat(),
            bottomRightCorner.toFloat(),
            bottomLeftCorner.toFloat()
        )
        val requestOptions =
            RequestOptions().transform(CenterCrop(), roundedCorners)
        Glide.with(context).asBitmap().load(url).apply(requestOptions).into(
            object : CustomViewTarget<View, Bitmap>(view) {
                override fun onLoadFailed(errorDrawable: Drawable?) {
                    imageLoaderDrawableListener.onLoadFail()
                }

                override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) {
                    if (resource != null && !resource.isRecycled) {
                        imageLoaderDrawableListener.onLoadImageSuccess(url, BitmapDrawable(context.resources, resource))
                    }
                }

                override fun onResourceCleared(placeholder: Drawable?) {
                }
            }
        )
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

Glide加载图片圆角通过设置RequestOptions来实现

GranularRoundedCorners(
    float topLeft, float topRight, float bottomRight, float bottomLeft) {
  this.topLeft = topLeft;
  this.topRight = topRight;
  this.bottomRight = bottomRight;
  this.bottomLeft = bottomLeft;
}
1
2
3
4
5
6
7

GranularRoundedCorners可以设置单个圆角

RoundedCorners(int roundingRadius)
1

RoundedCorners是直接设置4个圆角

3.通过CardView实现圆角

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

<?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="10dp"
   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintTop_toTopOf="parent" / 

</androidx.constraintlayout.widget.ConstraintLayout 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

CardView是原生组件，缺点是只支持四个圆角设置

4.利用View 的 ViewOutlineProvider 实现圆角

ViewOutlineProvider 是Android 5.0之后新增的设置圆角的方式。

@RequiresApi(Build.VERSION_CODES.LOLLIPOP)
class VideoListOutlineProvider(private val radius: Int, private val ancorView: View?) :
    ViewOutlineProvider() {

    companion object {
        const val radiusLeft = 1
        const val radiusRight = 2
    }

    //圆角左边或者右边
    private var radiusDirection = radiusLeft

    constructor(radiusDirection: Int, radius: Int, ancorView: View?) : this(radius, ancorView) {
        this.radiusDirection = radiusDirection
    }


    override fun getOutline(view: View, outline: Outline?) {

        if (radiusDirection == radiusLeft) {
          
            outline?.setRoundRect(0, 0, view.width + radius, view.height, radius.toFloat())
            
        } else if (radiusDirection == radiusRight) {
                outline?.setRoundRect(-radius, 0, view.width, view.height, radius.toFloat())
            
        }
        }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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

本质来说，此种方式只支持设置4个圆角，但是可以控制裁剪区域实现单个圆角的绘制，需要注意识别清楚裁剪区域，不然会导致view直接被裁剪丢弃。具体参照上述实现。