特殊按钮形状（略微旋转的箭头）

Question

我需要您的帮助，我想在 android 应用程序中使用以下形状作为按钮：

我试过创建自定义 XML 背景并将其用于按钮，但这不是我想要的。

最优雅的实现方式是什么？我在想象这样的事情。

Answer 1

使用与您提到的背景颜色相同的图像。

Answer 2

实现目标的方法有很多种。这是我的解决方案，也许不是最好的，但您可以从中着手：

Main layout

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="40dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:background="@android:color/holo_orange_light">

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <include layout="@layout/arrow_button_layout"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:layout_marginTop="40dp" />

        <include layout="@layout/arrow_button_layout"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:layout_marginTop="40dp" />

        <include layout="@layout/arrow_button_layout"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:layout_marginTop="40dp" />

    </LinearLayout>

</FrameLayout>

arrow_button_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:rotation="-30"
    android:orientation="horizontal"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/button_tv"
        android:layout_centerVertical="true"
        android:layout_marginLeft="-22dp"
        android:rotation="-45">

        <View
            android:layout_width="35dp"
            android:layout_height="36dp"
            android:background="@drawable/right"/>
        <View
            android:layout_width="33dp"
            android:layout_height="36dp"
            android:background="@drawable/bottom"/>
    </FrameLayout>

    <FrameLayout
        android:layout_width="90dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:id="@id/button_tv">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:textColor="@android:color/white"
            android:background="@android:color/holo_red_dark"
            android:text="Button"
            android:layout_centerVertical="true"
            android:gravity="center"
            android:layout_gravity="center_vertical"/>

        <View
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:layout_gravity="top"
            android:background="@android:color/black"/>

        <View
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:layout_gravity="bottom"
            android:background="@android:color/black"/>

        <View
            android:layout_width="2dp"
            android:layout_height="match_parent"
            android:background="@android:color/black" />

    </FrameLayout>

</RelativeLayout>

这是我用于箭头的两个形状：

drawable right.xml

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

    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/black" />
        </shape>
    </item>

    <item android:right="2dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/holo_red_dark" />
        </shape>
    </item>
</layer-list>

drawable bottom.xml

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

    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/black" />
        </shape>
    </item>

    <item android:bottom="2dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/holo_red_dark" />
        </shape>
    </item>
</layer-list>

这是它的样子：

更新

修改主要布局，只需在按钮上添加一个负边距（如您所愿）即可实现您想要的替代布局：

Main layout modified

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_orange_light">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include layout="@layout/arrow_button_layout"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginLeft="-40dp"
        android:layout_marginTop="40dp" />

    <include layout="@layout/arrow_button_layout"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginLeft="-40dp"
        android:layout_marginTop="40dp" />

    <include layout="@layout/arrow_button_layout"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginLeft="-40dp"
        android:layout_marginTop="40dp" />

    </LinearLayout>

</FrameLayout>

这是结果：

特殊按钮形状（略微旋转的箭头）

Special button shape (slightly rotated arrow)

android

android-layout

android-button