ViewOutlineProvider设置圆角矩形等形状
在项目开发中,为了让图片显示得更加美观,通常 UI 会设计成圆角矩形或圆形效果。介绍一种简单的原生方法设置圆角。
ViewOutlineProvider是Android 5.x引入的新特性(SDK_INT >= 21),它是View包中的类,用于实现View的阴影和轮廓。用ViewOutlineProvider可以快捷地实现控件的圆角(Kotlin实现),通过Outline中的setRoundRect/setOval方法来设置圆角矩形、椭圆等形状,还有其它API方法可以自行了解。
val outlineProvider = object : ViewOutlineProvider() {
override fun getOutline(view: View, outline: Outline) {
// 设置圆角率为
outline.setRoundRect(0, 0, view.width, view.height, radius)
//或者设置圆形
outline?.setOval(0, 0, it.width, it.height)
}
}
再通过View的setOutlineProvider(ViewOutlineProvider provider)方法将自定义的ViewOutlineProvider设置给View:
view.outlineProvider = outlineProvider
最后别忘了启用Outline:
//视图会根据outlineProvider提供的轮廓进行裁剪。任何超出轮廓的部分都会被裁剪掉
view.clipToOutline = true
ViewOutlineProvider内置三种默认的实现BACKGROUND、BOUNDS、PADDED_BOUNDS:
①BACKGROUND:使用视图的背景(Background)来确定轮廓边界(如果视图没有背景,则轮廓将不会生效)。视图的背景可以是一个 Drawable,例如 ShapeDrawable 或 BitmapDrawable。轮廓会根据背景的形状进行调整。适用场景:当你需要根据视图的背景来设置轮廓时,例如背景是一个圆形或椭圆形的 Drawable。
/**
* Default outline provider for Views, which queries the Outline from the View's background,
* or generates a 0 alpha, rectangular Outline the size of the View if a background
* isn't present.
*
* @see Drawable#getOutline(Outline)
*/
public static final ViewOutlineProvider BACKGROUND = new ViewOutlineProvider() {
@Override
public void getOutline(View view, Outline outline) {
Drawable background = view.getBackground();
if (background != null) {
background.getOutline(outline);
} else {
outline.setRect(0, 0, view.getWidth(), view.getHeight());
outline.setAlpha(0.0f);
}
}
};
②BOUNDS:使用视图的边界(Bounds)来确定轮廓边界。轮廓会根据视图的宽高来设置,形成一个矩形轮廓。适用场景:当你需要一个简单的矩形轮廓时,例如给一个普通的View添加圆角效果。
/**
* Maintains the outline of the View to match its rectangular bounds,
* at <code>1.0f</code> alpha.
*
* This can be used to enable Views that are opaque but lacking a background cast a shadow.
*/
public static final ViewOutlineProvider BOUNDS = new ViewOutlineProvider() {
@Override
public void getOutline(View view, Outline outline) {
outline.setRect(0, 0, view.getWidth(), view.getHeight());
}
};
③PADDED_BOUNDS:使用视图的边界加上内边距(Padding)来确定轮廓边界。轮廓会根据视图的宽高和内边距来设置,形成一个矩形轮廓。适用场景:当你需要在视图的内边距之外添加轮廓时,例如给一个有内边距的View添加圆角效果。
/**
* Maintains the outline of the View to match its rectangular padded bounds,
* at <code>1.0f</code> alpha.
*
* This can be used to enable Views that are opaque but lacking a background cast a shadow.
*/
public static final ViewOutlineProvider PADDED_BOUNDS = new ViewOutlineProvider() {
@Override
public void getOutline(View view, Outline outline) {
outline.setRect(view.getPaddingLeft(),
view.getPaddingTop(),
view.getWidth() - view.getPaddingRight(),
view.getHeight() - view.getPaddingBottom());
}
};