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

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或 Right 的radius增加到最大值，以获得半圆形topLeft 。 这就是我尝试这样做的方式

<?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> 

这是它的样子..

Answer 3

您可以使用图层列表制作类似的形状，请在此处阅读有关图层列表的更多信息。 这应该为您提供所需的输出：

<?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

您可以使用带有shapeAppearanceOverlay属性的MaterialButton ：

        <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>