View实现圆角的几种方式

文章目录

    • 1.通过给view设置background实现圆角
    • 2.通过glide加载图片设置圆角
    • 3.通过CardView实现圆角
    • 4.利用View 的 ViewOutlineProvider 实现圆角

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

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


<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>

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

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

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

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

setCornerRadii(@Nullable float[] radii) 该方法实现某个圆角的设置,对应关系就是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>

需要注意这种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

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) {
                override fun onLoadFailed(errorDrawable: Drawable?) {
                    imageLoaderDrawableListener.onLoadFail()
                }

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

                override fun onResourceCleared(placeholder: Drawable?) {
                }
            }
        )
    }

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

GranularRoundedCorners(
    float topLeft, float topRight, float bottomRight, float bottomLeft) {
  this.topLeft = topLeft;
  this.topRight = topRight;
  this.bottomRight = bottomRight;
  this.bottomLeft = bottomLeft;
}

GranularRoundedCorners可以设置单个圆角

RoundedCorners(int roundingRadius)

RoundedCorners是直接设置4个圆角

3.通过CardView实现圆角

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

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())
            
        }
        }
}

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

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

你可能感兴趣的:(kotlin,android)