Question

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

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

我能够使用png图像作为背景来实现这一点，但我更愿意知道如何在xml中完成它。

Answer 1

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

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

右指，

Promise<boolean>

左指点，

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

Answer 2

不确定这样做的确切方法，但您可以随时将radius topLeft和bottomLeft的{{1}}增加到最大值，以获得半圆形指向结束。这就是我尝试这样做的方式

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

如何使按钮指向右或左？

4 个答案: