当前位置:   article > 正文

View实现圆角的几种方式_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直接被裁剪丢弃。具体参照上述实现。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/816398
推荐阅读
相关标签
  

闽ICP备14008679号