特殊按鈕形狀（稍微旋轉箭頭）

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

使用的圖像與你所說的相同的背景顏色。