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

Question

我需要用下面的形状，我想在一个Android应用程序使用一个按钮的帮助：

我试图创建一个自定义XML的背景，并用它来一个按钮，但这不是我所希望的。

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

Answer 1

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

主要布局

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

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

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

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

这里怎么它看起来像：

UPDATE

修改主要布局，简单地增加阴性切缘（根据自己的喜好）的按钮，你可以达到你想要的替代布局：

主要布局修改

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

这是结果：

Answer 2

使用的图像与你所说的相同的背景颜色。