【问题标题】:How to create curved bottom border rectangle in android?如何在android中创建弯曲的底部边框矩形?
【发布时间】:2017-10-31 16:01:49
【问题描述】:

如何使用这样的 xml 创建具有完美弯曲底部的 android drawable:

我试过这个xml,但结果并不完美

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

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

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

有什么想法吗?

谢谢

【问题讨论】:

标签: android android-xml android-drawable xml-drawable


【解决方案1】:

您可以使用oval 形状,如下所示。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
            android:bottom="0dp"
            android:left="-160dp"
            android:right="-160dp"
            android:top="-80dp">
        <shape android:shape="oval">
            <solid android:color="@color/colorPrimary"/>
        </shape>
    </item>
</layer-list>

您可以更改left,right,top 的值来制作或多或少的曲线。

【讨论】:

    【解决方案2】:

    我认为您正在寻找这样的东西:-

    <?xml version="1.0" encoding="utf-8"?>
    <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="48dp"
            android:height="48dp"
            android:viewportHeight="12"
            android:viewportWidth="12">
    
        <path
            android:fillColor="@android:color/holo_red_light"
            android:pathData="M 2,9 C 2,9 4,10 6,10 C 8,10 10,9 10,9 L 10,0 2,0 2,8"
            android:strokeWidth="0.1"/>
    
    </vector>
    

    使用最新的 Android 矢量可绘制对象,让您的绘图功能更强大,效果更佳。您可以逐像素管理绘图。

    让我附上多个选项,这样您就可以清楚地了解矢量绘图中的小变化可以做什么

    <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="48dp"
            android:height="48dp"
            android:viewportHeight="12"
            android:viewportWidth="12">
    
        <path
            android:fillColor="@android:color/holo_red_light"
            android:pathData="M 2,9 C 2,9.5 4,10 6,10 C 8,10 10,9.5 10,9 L 10,0 2,0 2,8"
            android:strokeWidth="0.1"/>
    
    </vector>
    

    在第二张图片中,您可以通过更改小值看到曲线更加圆润。如果你真的想了解vector drawable,请参考here,它将为你提供使用vector drawable的丰富经验。

    【讨论】:

    • yeeyy,它对我有用。惊人的。非常感谢你。你拯救了我的一天。 :) @avi
    • @avi 这可行,但我需要设置此形状的宽度以匹配父级。我该怎么做?
    • 你想从左右移除填充还是需要其他东西?
    • 只需将上面代码中的这一行替换为 *android:pathData="M 0,0 L 0,11 C 1,12 5,12 8,12 C 12,12 12,11 12,11 L 12,0 0,0" * 来实现这一点。
    • 如何在此处添加渐变色,而不是纯色?
    【解决方案3】:

    将您的更改为:

        <corners
        android:radius="200dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="0dp"
        />
    

    它将是完美的圆角,也许不是你想要的水平。

    【讨论】:

    • 刚试过android:radius="200dp"。但仍然没有达到我的预期,比如i.stack.imgur.com/UMvDq.png。顺便说一句,谢谢你的想法。 :)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-01-16
    • 1970-01-01
    相关资源
    最近更新 更多