文章目录
- 1.通过给view设置background实现圆角
- 2.通过glide加载图片设置圆角
- 3.通过CardView实现圆角
- 4.利用View 的 ViewOutlineProvider 实现圆角
1.通过给view设置background实现圆角
这种方式是通过shape设置背景色的方式实现圆角,不影响view的绘制区域,只是通过设置背景色影响显示区域来实现圆角
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"><cornersandroid: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位数组是左上,右上,右下,左下,两位对应一个圆角,值就是想要的圆角值。
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:left="5dp"android:right="5dp"><shape><solid android:color="@color/white" /><cornersandroid:bottomLeftRadius="10dp"android:topLeftRadius="10dp" /></shape></item></layer-list>
需要注意这种layer-list的写法,这种需要代码动态创建时需要用到LayerDrawable
这种方式需要动态修改shape的时候需要
val layerDrawable = background as LayerDrawableval 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, 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?) {}})}
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” 即可。
<?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.CardViewandroid: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
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 = 1const val radiusRight = 2}//圆角左边或者右边private var radiusDirection = radiusLeftconstructor(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直接被裁剪丢弃。具体参照上述实现。