Android - 仅在顶部可绘制圆角

发布于 2024-12-27 19:17:04 字数 1008 浏览 4 评论 0原文

我有这个可绘制的圆角矩形作为背景:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white" />
    <stroke android:width="1dp" android:color="@color/light_gray" />
    <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
    <corners android:radius="6dp" />
</shape>

这工作正常,正如预期的那样。

现在,我想将其更改为仅将顶角变圆,因此我将其更改为:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white" />
    <stroke android:width="1dp" android:color="@color/light_gray" />
    <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
    <corners android:topLeftRadius="6dp" android:topRightRadius="6dp"
             android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"/>
</shape>

但现在没有一个角是圆角的,并且我得到了一个普通的矩形。我在这里缺少什么?

I had this drawable to have a rounded rectangle as a background:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white" />
    <stroke android:width="1dp" android:color="@color/light_gray" />
    <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
    <corners android:radius="6dp" />
</shape>

This is working fine, as expected.

Now, I want to change this to only round the top corners, so I change it to this:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white" />
    <stroke android:width="1dp" android:color="@color/light_gray" />
    <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
    <corners android:topLeftRadius="6dp" android:topRightRadius="6dp"
             android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"/>
</shape>

But now none of the corners are rounded and I get a plain rectangle. What am I missing here?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(10

演出会有结束 2025-01-03 19:17:04

尝试给出这些值:

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

请注意,我已将 0dp 更改为 0.1dp

编辑:请参阅下面的 Aleks G 评论以获得更清晰的版本

Try giving these values:

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

Note that I have changed 0dp to 0.1dp.

EDIT: See Aleks G comment below for a cleaner version

睫毛溺水了 2025-01-03 19:17:04

就我而言,下面的代码

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="10dp" android:bottom="-10dp"
        >

        <shape android:shape="rectangle">
            <solid android:color="@color/maincolor" />

            <corners
                android:topLeftRadius="10dp"
                android:topRightRadius="10dp"
                android:bottomLeftRadius="0dp"
                android:bottomRightRadius="0dp"
            />
        </shape>

    </item>
    </layer-list>

In my case below code

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="10dp" android:bottom="-10dp"
        >

        <shape android:shape="rectangle">
            <solid android:color="@color/maincolor" />

            <corners
                android:topLeftRadius="10dp"
                android:topRightRadius="10dp"
                android:bottomLeftRadius="0dp"
                android:bottomRightRadius="0dp"
            />
        </shape>

    </item>
    </layer-list>
捂风挽笑 2025-01-03 19:17:04

尝试做这样的事情:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:bottom="-20dp" android:left="-20dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />

            <corners android:radius="20dp" />
        </shape>
    </item>
</layer-list>

似乎不适合设置不同的矩形角半径。所以你可以使用这个技巧。

Try to do something like this:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:bottom="-20dp" android:left="-20dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />

            <corners android:radius="20dp" />
        </shape>
    </item>
</layer-list>

It seems does not suitable to set different corner radius of rectangle. So you can use this hack.

甜味拾荒者 2025-01-03 19:17:04
bg.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <corners android:topLeftRadius="24dp" android:topRightRadius="24dp"
        android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"/>
</shape>

添加到您的布局中:

android:background="@drawable/bg"
bg.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <corners android:topLeftRadius="24dp" android:topRightRadius="24dp"
        android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"/>
</shape>

add in your layout:

android:background="@drawable/bg"
渔村楼浪 2025-01-03 19:17:04

尝试使用 MaterialShapeDrawable 并在 kotlin/java 代码中配置它。

val backgroundShapeModel:ShapeAppearanceModel = ShapeAppearanceModel.builder()
    .setTopLeftCorner(CornerFamily.ROUNDED, 16F.toPx)
    .setTopRightCorner(CornerFamily.ROUNDED, 16F.toPx)
    .build()
textView.background = MaterialShapeDrawable(backgroundShapeModel).apply {
    fillColor = ColorStateList.valueOf(Color.GREEN)
}

在此处输入图像描述

PS:

除了 xmldrawables 提供的功能(fillColor、描边)。 ..),MaterialShapeDrawable 支持:

  1. cornerFamily 分为两个类别:roundedcut
  2. edgeTreatment > 与TriangleEdgeTreatmentOffsetEdgeTreatment、...
  3. 不需要上下文并获取资源

在此处输入图像描述]

val backgroundShapeModel = ShapeAppearanceModel.builder()
    .setTopLeftCorner(CornerFamily.ROUNDED, 16F.toPx)
    .setTopRightCorner(CornerFamily.CUT, 16F.toPx)
    .setAllEdges(TriangleEdgeTreatment(5f.toPx, true))
    .build()
textView.background = MaterialShapeDrawable(backgroundShapeModel).apply {
    fillColor = ColorStateList.valueOf(Color.GREEN)
    setStroke(2f.toPx,Color.RED)
}

try to use MaterialShapeDrawable and configure it in kotlin/java code.

val backgroundShapeModel:ShapeAppearanceModel = ShapeAppearanceModel.builder()
    .setTopLeftCorner(CornerFamily.ROUNDED, 16F.toPx)
    .setTopRightCorner(CornerFamily.ROUNDED, 16F.toPx)
    .build()
textView.background = MaterialShapeDrawable(backgroundShapeModel).apply {
    fillColor = ColorStateList.valueOf(Color.GREEN)
}

enter image description here

P.S:

In addition to abilities that xml drawables provides (fillColor, stroke...), MaterialShapeDrawable supports:

  1. cornerFamily in two category: rounded and cut
  2. edgeTreatment with TriangleEdgeTreatment, OffsetEdgeTreatment, ...
  3. doesn't need to context and getting resource

enter image description here]

val backgroundShapeModel = ShapeAppearanceModel.builder()
    .setTopLeftCorner(CornerFamily.ROUNDED, 16F.toPx)
    .setTopRightCorner(CornerFamily.CUT, 16F.toPx)
    .setAllEdges(TriangleEdgeTreatment(5f.toPx, true))
    .build()
textView.background = MaterialShapeDrawable(backgroundShapeModel).apply {
    fillColor = ColorStateList.valueOf(Color.GREEN)
    setStroke(2f.toPx,Color.RED)
}
不醒的梦 2025-01-03 19:17:04

基于 busylee 的回答,您可以通过以下方式制作一个只有一个 drawable 的方法: >un圆角(在本例中为左上角):

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
            <!-- A numeric value is specified in "radius" for demonstrative purposes only,
                  it should be @dimen/val_name -->
            <corners android:radius="10dp" />
        </shape>
    </item>
    <!-- To keep the TOP-LEFT corner UNROUNDED set both OPPOSITE offsets (bottom+right): -->
    <item
        android:bottom="10dp"
        android:right="10dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
        </shape>
    </item>
</layer-list>

请注意,上面的drawable在Android Studio预览中正确显示(2.0.0p7)。要预览它,请创建另一个视图并将其用作 android:background="@drawable/..."

Building upon busylee's answer, this is how you can make a drawable that only has one unrounded corner (top-left, in this example):

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
            <!-- A numeric value is specified in "radius" for demonstrative purposes only,
                  it should be @dimen/val_name -->
            <corners android:radius="10dp" />
        </shape>
    </item>
    <!-- To keep the TOP-LEFT corner UNROUNDED set both OPPOSITE offsets (bottom+right): -->
    <item
        android:bottom="10dp"
        android:right="10dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
        </shape>
    </item>
</layer-list>

Please note that the above drawable is not shown correctly in the Android Studio preview (2.0.0p7). To preview it anyway, create another view and use this as android:background="@drawable/...".

吃颗糖壮壮胆 2025-01-03 19:17:04

您可能需要阅读此https://developer.android.com/ guide/topics/resources/drawable-resource.html#Shape

下面有一个注释。

注意 每个角(最初)都必须提供大于 1 的角半径,否则不会有任何角是圆角的。如果您不希望特定的角为圆角,解决方法是使用 android:radius 设置大于 1 的默认角半径,然后用您真正想要的值覆盖每个角,提供零(“0dp”) )您不需要圆角的地方。

You may need read this https://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

and below there is a Note.

Note Every corner must (initially) be provided a corner radius greater than 1, or else no corners are rounded. If you want specific corners to not be rounded, a work-around is to use android:radius to set a default corner radius greater than 1, but then override each and every corner with the values you really want, providing zero ("0dp") where you don't want rounded corners.

你的呼吸 2025-01-03 19:17:04

在可绘制对象上创建 roung_top_corners.xml 并复制以下代码

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
    android:topLeftRadius="22dp"
    android:topRightRadius="22dp"
    android:bottomLeftRadius="0dp"
    android:bottomRightRadius="0dp"
    />
<gradient
    android:angle="180"
    android:startColor="#1d2b32"
    android:centerColor="#465059"
    android:endColor="#687079"
    android:type="linear" />
<padding
    android:left="0dp"
    android:top="0dp"
    android:right="0dp"
    android:bottom="0dp"
    />
<size
    android:width="270dp"
    android:height="60dp"
    /></shape>

Create roung_top_corners.xml on drawable and copy the below code

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
    android:topLeftRadius="22dp"
    android:topRightRadius="22dp"
    android:bottomLeftRadius="0dp"
    android:bottomRightRadius="0dp"
    />
<gradient
    android:angle="180"
    android:startColor="#1d2b32"
    android:centerColor="#465059"
    android:endColor="#687079"
    android:type="linear" />
<padding
    android:left="0dp"
    android:top="0dp"
    android:right="0dp"
    android:bottom="0dp"
    />
<size
    android:width="270dp"
    android:height="60dp"
    /></shape>
指尖凝香 2025-01-03 19:17:04

我尝试了你的代码并得到了一个顶部圆角按钮。我将颜色指定为@ffffff,并将描边指定为#C0C0C0

尝试

  1. 提供 android : BottomLeftRadius="0.1dp" 而不是 0。如果它不起作用
  2. 检查什么可绘制和模拟器的分辨率。我在 res 下创建了一个可绘制文件夹并使用它。 (hdpi, mdpi ldpi) 文件夹中有此 XML。
    这是我的输出。

在此处输入图像描述

I tried your code and got a top rounded corner button. I gave the colors as @ffffff and stroke I gave #C0C0C0.

try

  1. Giving android : bottomLeftRadius="0.1dp" instead of 0. if its not working
  2. Check in what drawable and the emulator's resolution. I created a drawable folder under res and using it. (hdpi, mdpi ldpi) the folder you have this XML.
    this is my output.

enter image description here

青瓷清茶倾城歌 2025-01-03 19:17:04

尝试完全删除这些属性。

android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"

Try removing these attributes altogether.

android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文