android - 如何在 XML drawable 中创建一个具有两个弯曲边的矩形？

Question

我希望矩形的左侧和右侧（而不是角）弯曲。或者说椭圆形的顶部和底部是直的。

我怎样才能实现这样的目标？

Answer 1

在 textview 上试试这个，对于单个字符，它将显示一个圆圈，对于多个数字，它将自动扩展为您在上面显示的形状，但如果您严格想要上面的形状，只需在左侧和右侧提供更大的填充

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <padding
        android:top="3dp"
        android:left="8dp"
        android:right="8dp" 
        android:bottom="3dp"/>

    <solid android:color="#E6121A" />

    <corners
        android:bottomLeftRadius="12dp"
        android:bottomRightRadius="12dp"
        android:topLeftRadius="12dp"
        android:topRightRadius="12dp" />

</shape> 

Answer 2

效果很好！

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">

    <solid
        android:color="@color/color_red"/>
    <corners
        android:radius="10000dp" /> 
</shape>

Answer 3

我来的有点晚，答案一定不是完全完整的（我不考虑灵活的高度），但至少如果我们事先知道 dp 中的高度，诀窍是将半径作为按钮高度的一半. 例如，如果高度是 48dp，我们可以这样做：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="#ff0000"/>
    <corners android:radius="24dp" />
</shape>

Answer 4

我认为最好的想法之一是使用 xml 字段创建形状。

创建Drawable->ovalshape.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="#ff0000" />

    <corners
        android:bottomLeftRadius="8dp"
        android:bottomRightRadius="8dp"
        android:topLeftRadius="8dp"
        android:topRightRadius="8dp" />

    <padding
        android:bottom="5dip"
        android:left="10dip"
        android:right="10dip"
        android:top="5dip" />

</shape>

现在您可以轻松使用它xml instead of image了。我认为这对you and new SO user.

Answer 5

尝试将边框半径设置为高度的一半。在 CSS 中，border-radius:50%创建一个椭圆，所以我猜如果它只有高度的 50%，那么你会得到类似的东西。

Answer 6

形状中允许的最大半径似乎是波纹管形状中总高度的一半，因此您可以使用它来获得具有灵活高度的形状以保持期望比率：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#ffffff" />
    <size android:height="@dimen/height" />
    <corners
        android:radius="@dimen/height"
        />
</shape>

Answer 7

简单的方法是使用9-patch 图像（以 image.9.png 结尾的 png 图像）并有一个额外的像素边框来定义如何缩放图像。

另一种方法是在 res/drawable 文件夹中创建一个形状文件，就像这样。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="#ff0000"/>
</shape>

有关形状的更多信息在这里

Answer 8

定义高度并使半径为高度的一半。

Answer 9

您可以将半径大小增加到 200dp 并将可绘制对象设置为 textview 的背景

<solid android:color="#E6121A" />

<corners
    android:bottomLeftRadius="12dp"
    android:bottomRightRadius="12dp"
    android:topLeftRadius="12dp"
    android:topRightRadius="12dp" />

Answer 10

为了使两边在任何高度下始终保持弯曲，我最终必须像下面这样以编程方式创建形状（Kotlin 中的代码）

class CurvedSidesShape : RectShape() {
    override fun draw(canvas: Canvas, paint: Paint?) {
        var path = Path()
        path.addRoundRect(rect(), rect().height(), rect().height(), Path.Direction.CW)
        canvas.drawPath(path, paint)
    }
}

这是我如何使用形状作为按钮背景

class CurvedSidesButton : Button {
    private var mHeight: Int = 0

    constructor(context: Context?) : super(context) {
        init(context, null, 0, 0)
    }

    .
    .
    .

    override fun draw(canvas: Canvas?) {
        setCurvedSidesBackground(height)
        super.draw(canvas)
    }

    private fun setCurvedSidesBackground(height: Int) {
        if (height != mHeight) {
            val curvedSidesShape = ShapeDrawable(CurvedSidesShape())
            curvedSidesShape.intrinsicWidth = width
            curvedSidesShape.intrinsicHeight = height
            curvedSidesShape.paint.color = Color.RED
            background = curvedSidesShape
            mHeight = height
        }
    }
}