2017-12-27 59 views
0

我需要用下面的形狀,我想在一個Android應用程序使用一個按鈕的幫助: enter image description here特殊按鈕形狀(稍微旋轉箭頭)

我試圖創建一個自定義XML的背景,並用它來一個按鈕,但這不是我所希望的。

什麼是最優雅的方式來實現這個? 我在想像這樣的事情。

enter image description here

+1

看看這個:: https://stackoverflow.com/questions/26143905/android-make-an-arrow-shape-with-xml - 你也許能夠給整個箭頭旋轉你需要。您也可以應用漸變來獲取您希望實現的着色着色。 – Barns

+0

你能發佈你的佈局xml文件嗎? – petey

+0

@Barns,感謝您的輸入。在發佈之前,我已經查看了該線程,但是解決方案(在兩個其他矩形的幫助下切割矩形)在我的情況下沒有用處,因爲我將有背景作爲背景,而不僅僅是簡單的顏色。 –

回答

0

有很多方法可以獲得您的目標。在這裏我的解決方案,也許不是最好的,但它是你可以從開始:

主要佈局

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

這是結果:

enter image description here

+0

如果我想要像第一張圖片(https://i.stack.imgur.com/Il0re.jpg)那樣的格式,那麼我必須創建一個全新的「形狀」? 我想要實現的是讓按鈕來自屏幕的左側。第二張照片是我想象它會起作用的。 –

+0

我用第二種格式的更改更新了答案。這只是利潤率的問題。你不需要一個新的佈局。 –

0

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