[英]Use clipping to round corners of ViewGroup
I have a RelativeLayout
that needs to have rounded upper left and upper right corners. 我有一个RelativeLayout
,需要圆角左上角和右上角。 I can do this with a drawable background defined in XML with corners topLeftRadius and topRightRadius. 我可以使用XML定义的可绘制背景来实现这一点,其中包含角topLeftRadius和topRightRadius。 But... This RelativeLayout
also need to have a background that is a layer-list with a tiled bitmap and shape combo, and the tiled bitmap does not have a corners parameter in the drawable XML. 但是......这个RelativeLayout
还需要一个背景,它是一个带有平铺位图和形状组合的图层列表,并且平铺位图在可绘制XML中没有角参数。 So my idea was to to make a RelativeLayout
with the following code: 所以我的想法是使用以下代码创建RelativeLayout
:
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
path.reset();
rect.set(0, 0, w, h);
path.addRoundRect(rect, radius, radius, Path.Direction.CW);
path.close();
}
@Override
protected void dispatchDraw(Canvas canvas) {
int save = canvas.save();
canvas.clipPath(path);
super.dispatchDraw(canvas);
canvas.restoreToCount(save);
}
Sadly no clipping is happening, I was expecting it to clip all four corners of my RelativeLayout, but nothing is happening. 可悲的是没有剪辑发生,我期待它剪辑我的RelativeLayout的所有四个角落,但没有任何事情发生。 The "onSizeChanged" and "dispatchDraw" methods are both called, I tested that. “onSizeChanged”和“dispatchDraw”方法都被调用,我测试过。 I have also tried to turn off hardware acceleration, but it does nothing. 我也试图关闭硬件加速,但它什么也没做。
My RelativeLayout
is part of a larger layout, and that layout is inflated in a subclass of FrameLayout
, and that subclass is then used aa row in a RecyclerView
, if that changes anything. 我的RelativeLayout
是更大布局的一部分,并且该布局在FrameLayout
的子类中膨胀,然后该子类在RecyclerView
用作一行,如果它改变了什么。
Having defined this layout: 定义了这个布局:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorAccent">
<com.playground.RoundedRelativeLayout
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:background="@color/colorPrimary" />
</FrameLayout>
Where RoundedRelativeLayout
has following implementation: RoundedRelativeLayout
具有以下实现:
public class RoundedRelativeLayout extends RelativeLayout {
private RectF rectF;
private Path path = new Path();
private float cornerRadius = 15;
public RoundedRelativeLayout(Context context) {
super(context);
}
public RoundedRelativeLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public RoundedRelativeLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
rectF = new RectF(0, 0, w, h);
resetPath();
}
@Override
public void draw(Canvas canvas) {
int save = canvas.save();
canvas.clipPath(path);
super.draw(canvas);
canvas.restoreToCount(save);
}
@Override
protected void dispatchDraw(Canvas canvas) {
int save = canvas.save();
canvas.clipPath(path);
super.dispatchDraw(canvas);
canvas.restoreToCount(save);
}
private void resetPath() {
path.reset();
path.addRoundRect(rectF, cornerRadius, cornerRadius, Path.Direction.CW);
path.close();
}
}
You'll get following output: 你会得到以下输出:
The implementation is shamelessly stolen from RoundKornerLayouts project. RoundKornerLayouts项目的实施被无耻地窃取。
Here is a Kotlin version of azizbekian's answer: 这是azizbekian的答案的Kotlin版本:
class RoundedRelativeLayout(context: Context, attrs: AttributeSet) : RelativeLayout(context, attrs) {
private lateinit var rectF: RectF
private val path = Path()
private var cornerRadius = 15f
override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
super.onSizeChanged(w, h, oldw, oldh)
rectF = RectF(0f, 0f, w.toFloat(), h.toFloat())
resetPath()
}
override fun draw(canvas: Canvas) {
val save = canvas.save()
canvas.clipPath(path)
super.draw(canvas)
canvas.restoreToCount(save)
}
override fun dispatchDraw(canvas: Canvas) {
val save = canvas.save()
canvas.clipPath(path)
super.dispatchDraw(canvas)
canvas.restoreToCount(save)
}
private fun resetPath() {
path.reset()
path.addRoundRect(rectF, cornerRadius, cornerRadius, Path.Direction.CW)
path.close()
}
}
As a bonus here's how to add the cornerRadius as an extra xml attribute you can set, just add this to res/values/styleable.xml
: 作为奖励,这里是如何将cornerRadius添加为您可以设置的额外xml属性,只需将其添加到res/values/styleable.xml
:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="RoundedRelativeLayout">
<attr name="cornerRadius" format="float"/>
</declare-styleable>
</resources>
and then add this init method to the RoundedRelativeLayout
class: 然后将此init方法添加到RoundedRelativeLayout
类:
init {
val ta = getContext().obtainStyledAttributes(attrs, R.styleable.RoundedRelativeLayout)
cornerRadius = ta.getFloat(R.styleable.RoundedRelativeLayout_cornerRadius, 15f)
ta.recycle()
}
And now when you use the layout you can set the cornerRadius in the xml like this: 现在,当您使用布局时,您可以在xml中设置cornerRadius,如下所示:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" <-- Make sure you include this line
android:layout_width="80dp"
android:layout_height="80dp">
.
.
.
<your.package.name.RoundedRelativeLayout
android:id="@+id/roundedRect"
app:cornerRadius="24"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
.
.
.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.