Question

我需要你对以下形状的帮助我想用于Android应用中的按钮：

我尝试创建自定义XML背景并将其用作按钮，但这不是我所希望的。

实现这一目标最优雅的方法是什么？我想象的是这样的事情。

Answer 1

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

Answer 2

有很多方法可以实现您的目标。在这里我的解决方案，也许不是最好的，但它可以从你开始：

主要布局

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

这是它的样子：

<强>更新

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

主要版面修改

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

结果如下：

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

2 个答案: