如何使按钮指向右侧或左侧？

Question

我希望在我的应用程序中使用这种形状的按钮，指向右侧或左侧。

按钮的两个角是圆的，另一边是三角形的。

我可以使用 png 图像作为背景来完成此操作，但我更想知道如何在 xml 中进行操作。

Answer 1

通常的做法是对复杂的形状使用图像。如果您试图控制应用程序的大小，您可以使用一个指向一个方向的图像并在可绘制的 xml 中旋转它以指向另一个方向。

但是，如果您真的想在 xml 中实现它，我在下方有一个指向左/右的三角形。您可以尝试对此进行改进以满足您的要求。

右指，

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <rotate
        android:fromDegrees="45"
        android:pivotX="0%"
        android:pivotY="0%"
        android:toDegrees="0">
        <shape android:shape="rectangle">

            <solid android:color="@color/colorAccent" />
        </shape>
    </rotate>
</item>
</layer-list>

左指，

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <rotate
        android:fromDegrees="-45"
        android:pivotX="100%"
        android:pivotY="0%"
        android:toDegrees="0">
        <shape android:shape="rectangle">

            <solid android:color="@color/colorAccent" />
        </shape>
    </rotate>
</item>
</layer-list>

Answer 2

不确定具体的方法，但您始终可以将 topLeft 和 bottomLeft 的 radius 或右侧增加到最大，以获得半圆形指向端. 这就是我尝试做的方式

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:topLeftRadius="100dp"
android:topRightRadius="31dp"
android:bottomLeftRadius="100dp"
android:bottomRightRadius="31dp"
/>
<gradient
android:angle="45"
android:centerX="35%"
android:centerColor="#7995A8"
android:startColor="#E8E8E8"
android:endColor="#000000"
android:type="linear"
/>
<size
android:width="172dp"
android:height="60dp"
/>
<stroke
android:width="3dp"
android:color="#878787"
/>
</shape>

This is how it looks..

Answer 3

您可以使用图层列表制作类似的形状，阅读有关图层列表的更多信息here。这应该会给你想要的输出：

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

    <item>
        <shape android:shape="rectangle">
            <size
                android:width="100dp"
                android:height="40dp" />
            <solid android:color="#5e88b8" />
            <corners android:topRightRadius="3dp" android:bottomRightRadius="3dp" android:radius="0dp"/>
        </shape>
    </item>

    <item
        android:top="-40dp"
        android:bottom="65dp"
        android:left="-30dp">
        <rotate
            android:fromDegrees="-45">
            <shape android:shape="rectangle">
                <solid android:color="#ffffff" />
            </shape>
        </rotate>
    </item>

    <item
        android:top="65dp"
        android:bottom="-40dp"
        android:left="-30dp">
        <rotate
            android:fromDegrees="45">
            <shape android:shape="rectangle">
                <solid android:color="#ffffff" />
            </shape>
        </rotate>
    </item>

</layer-list>

然后设置为按钮背景:

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/button_background"
    android:text="button" />

输出：

更新

更改拐角半径以获得所需的拐角外观。

Answer 4

您可以将 MaterialButton 与 shapeAppearanceOverlay 属性一起使用：

        <com.google.android.material.button.MaterialButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="BUTTON"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.CutAndRound"
            />

与：

<style name="ShapeAppearanceOverlay.App.CutAndRound" parent="">
    <item name="cornerFamilyBottomLeft">cut</item>
    <item name="cornerFamilyTopLeft">cut</item>
    <item name="cornerSizeBottomLeft">50%</item>
    <item name="cornerSizeTopLeft">50%</item>
</style>

如何使按钮指向右侧或左侧？

How to make a button pointing towards right or left?

xml

android

button

rounded-corners

android-button