Android - 使用xml制作箭头形状

Question

我想为我的形状制作一个像这样的按钮： 有没有一种方法可以使用xml实现这个功能？ 例如设置一些点，我的情况下有5个点。

- Boldijar Paul

---

如果背景是动态布局，则会显示其白色通道。 - Muhammad Asif

Answer 1

您需要在项目的 drawable-xxx 文件夹中创建一个形状 XML 文件，然后将该形状用作按钮的背景。

这里是名为arrow_shape.xml的形状文件：

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

<!-- Colored rectangle-->
<item>
    <shape android:shape="rectangle">
        <size 
            android:width="100dp"
            android:height="40dp" />
        <solid android:color="#5EB888" />
        <corners android:radius="0dp"/>
    </shape>
</item>

<!-- This rectangle for the top arrow edge -->
<!-- Its color should be the same as the layout's background -->
<item
    android:top="-40dp"
    android:bottom="65dp"
    android:right="-30dp">
    <rotate
        android:fromDegrees="45">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
        </shape>
    </rotate>
</item>

<!-- This rectangle for the lower arrow edge -->
<!-- Its color should be the same as the layout's background -->
<item
    android:top="65dp"
    android:bottom="-40dp"
    android:right="-30dp">
    <rotate
        android:fromDegrees="-45">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
        </shape>
    </rotate>
</item>

</layer-list>

然后将其用作按钮的背景，例如

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/arrow_shape"/>

以下是截图：

关于Layer-List的更多信息可以在这里找到。

编辑：

请注意，我对形状的宽度和高度使用了特定的值。如果您更改了这些值，您可能需要更改top, bottom and right attributes的值。因此，在这种情况下，请考虑在您项目的values目录中使用不同的值。

- Onik

Answer 2

<?xml version="1.0" encoding="UTF-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:width="50dp" android:height="10dp" android:right="6dp">
        <shape>
            <solid android:color="@android:color/holo_green_dark"/>
            <corners
                android:bottomLeftRadius="2dp"
                android:topLeftRadius="2dp"/>
        </shape>
    </item>

    <item android:width="7dp" android:height="7dp"
        android:left="50dp">
        <rotate android:fromDegrees="45"
            android:pivotX="0"
            android:pivotY="0">
            <shape>
                <solid android:color="@android:color/holo_green_dark"/>
            </shape>
        </rotate>
    </item>

</layer-list>

- XimenaB

Answer 3

使用Material Components库，您只需使用标准MaterialButton定义shapeAppearanceOverlay属性即可：

类似这样：

  <com.google.android.material.button.MaterialButton
      app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Button.Triangle"
      ...      />

并定义你的样式：

  <style name="ShapeAppearanceOverlay.Button.Triangle" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopLeft">0dp</item>
    <item name="cornerSizeBottomLeft">0dp</item>

    <item name="cornerFamilyTopRight">cut</item>
    <item name="cornerFamilyBottomRight">cut</item>
    <item name="cornerSizeTopRight">50%</item>
    <item name="cornerSizeBottomRight">50%</item>
  </style>

- Gabriele Mariotti

---

有没有一种方法可以在不改变形状的情况下添加按下状态的颜色？ - Reejesh PK

@ReejeshPK 是的。您可以使用 app:backgroundTint 属性。它可以与选择器一起使用。 - Gabriele Mariotti