按鈕設計就像在吉普車

Question

我想在Android中創建按鈕，就像使用線性佈局的iPhone的吉普車應用程序一樣，但沒有成功。我得到的最大值是三個相同大小的分離按鈕。 我需要三個按鍵沒有背景，只能通過其邊界分隔當兩個人有一個圓角像下面的截圖：

這是我最後一次嘗試：

<LinearLayout android:id="@+id/LinearLayout02" android:layout_height="wrap_content" android:layout_width="match_parent"> 
    <Button android:id="@+id/Button04" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content"></Button> 
    <Button android:id="@+id/Button05" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content"></Button> 
    <Button android:id="@+id/Button06" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content"></Button> 
</LinearLayout> 

我也嘗試過GridLayout，但沒有成功。

Answer 1

這是我如何實現它：

up_left_button_selector.xml

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:drawable="@drawable/up_left_button_shape_pressed" 
     android:state_pressed="true" /> 
    <item android:drawable="@drawable/up_left_button_shape_pressed" 
     android:state_selected="true" /> 
    <item android:drawable="@drawable/up_left_button_shape_released" /> 
</selector> 

up_left_button_shape_pressed.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle"> 
<gradient 
    android:startColor="#ff0000ff" 
    android:endColor="#ff0000ff" 
    android:angle="45"/> 
<padding android:left="0dp" 
    android:top="0dp" 
    android:right="0dp" 
    android:bottom="0dp" /> 
<corners android:radius="8dp" 
    android:bottomRightRadius="0dp" android:bottomLeftRadius="0dp" 
    android:topLeftRadius="8dp" android:topRightRadius="0dp"/> 
<stroke android:width="2dp" android:color="#ff444444"/> 
</shape> 

up_center_button_shape_released.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle"> 
<gradient 
    android:startColor="#00000000" 
    android:endColor="#00000000" 
    android:angle="45"/> 
<padding android:left="0dp" 
    android:top="0dp" 
    android:right="0dp" 
    android:bottom="0dp" /> 
<corners android:radius="8dp" 
    android:bottomRightRadius="0dp" android:bottomLeftRadius="0dp" 
    android:topLeftRadius="8dp" android:topRightRadius="0dp"/> 
<stroke android:width="2dp" android:color="#ff444444"/> 
</shape> 

• 中心和右邊的按鈕形狀是一樣的，只是需要與圓這角落玩。

最後視圖佈局：

<TableRow android:id="@+id/buttonsRow" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:paddingTop="10dp"> 
    <RelativeLayout android:id="@+id/buttonsRowRelativeLayout" 
     android:layout_height="wrap_content" 
     android:layout_width="match_parent"> 

    <Button 
     android:id="@+id/leftButton" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="@string/save" 
     android:textColor="#ffffffff" 
     android:background="@drawable/up_left_button_selector" 
     android:layout_toLeftOf="@+id/centerButton" /> 
    <Button 
     android:id="@+id/centerButton" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="@string/change" 
     android:textColor="#ffffffff" 
     android:background="@drawable/up_center_button_selector" 
     android:layout_centerHorizontal="true"/> 
    <Button 
     android:id="@+id/rightButton" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="@string/send" 
     android:textColor="#ffffffff" 
     android:background="@drawable/up_right_button_selector" 
     android:layout_toRightOf="@+id/centerButton" /> 
    </RelativeLayout >  
</TableRow> 

它看起來相當不錯。

Answer 2

剛剛創建的形狀與彎道半徑爲兩壓/釋放效果..

<solid android:color="#77000000" /> 

<corners android:radius="10dip" /> 

<gradient 
    android:angle="-90" 
    android:endColor="#44FF0000" 
    android:startColor="#CCFF0000" /> 

<padding 
    android:bottom="10dip" 
    android:left="10dip" 
    android:right="10dip" 
    android:top="10dip" /> 

<stroke 
    android:width="1dip" 
    android:color="#000000" > 
</stroke> 

更多信息有關的形狀是指this

表示按下創建圖形後/釋放的效果爲按鈕選擇器創建一個XML文件，如以下示例

<selector 
    xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item 
     android:state_pressed="true" 
     android:drawable="@drawable/prs_arrival_fb_btn" /> <!-- pressed --> 
    <item 
     android:state_focused="true" 
     android:drawable="@drawable/prs_arrival_fb_btn" /> <!-- focused --> 
    <item 
     android:drawable="@drawable/arrival_fb_content_btn" /> <!-- default --> 
</selector> 

那麼這個選擇設置爲您的背景按鈕..像下面的例子..

<Button android:text="Play" android:id="@+id/playBtn" 
      android:background="@drawable/button_selector" 
      android:textColor="#ffffff" />