如何使按鈕看起來像一個列表

Question

在我的應用我有按鈕，它看起來像這樣：

我想讓他們看起來像這樣：

我background.xml如下：

<?xml version="1.0" encoding="utf-8"?> 
<layer-list 
    xmlns:android="http://schemas.android.com/apk/res/android" > 
    <item android:drawable="@drawable/solid" />   
    <item android:drawable="@drawable/shape" /> 
</layer-list> 

solid.xml如下：

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <solid android:color="#ababab" /> 
</shape> 

而且shape.xml如下：

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <solid android:color="#ffffff" /> 
    <stroke android:width="3dp" color="#ff000000" /> 
    <corners android:radius="15dp" /> 
    <padding 
     android:left="10dp" 
     android:top="10dp" 
     android:right="10dp" 
     android:bottom="10dp" /> 
</shape> 

我怎樣才能獲得按鈕所需的外觀？

Answer 1

頂形狀：

<shape 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 
    <corners 
     android:topLeftRadius="5dp" 
     android:topRightRadius="5dp" /> 
    <padding 
     android:left="3dp" 
     android:top="3dp" 
     android:right="3dp" 
     android:bottom="3dp" /> 
    <solid 
     android:color="#ffffffff" /> 
    <stroke 
     android:width="2dp" 
     android:color="#ff000000" /> 
</shape> 

中間形狀：

<shape 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 
    <padding 
     android:left="3dp" 
     android:top="3dp" 
     android:right="3dp" 
     android:bottom="3dp" /> 
    <solid 
     android:color="#ffffffff" /> 
    <stroke 
     android:width="2dp" 
     android:color="#ff000000" /> 
</shape> 

底部形狀：

<shape 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 
    <corners 
     android:bottomLeftRadius="5dp" 
     android:bottomRightRadius="5dp" /> 
    <padding 
     android:left="3dp" 
     android:top="3dp" 
     android:right="3dp" 
     android:bottom="3dp" /> 
    <solid 
     android:color="#ffffffff" /> 
    <stroke 
     android:width="2dp" 
     android:color="#ff000000" /> 
</shape> 

實施例：

<Button 
    android:background="@drawable/top" 
    android:layout_width="150dp" 
    android:layout_height="wrap_content" 
    android:text="Top" /> 
<Button 
    android:background="@drawable/middle" 
    android:layout_width="150dp" 
    android:layout_height="wrap_content" 
    android:layout_marginTop="-2dp" 
    android:text="Middle" /> 
<Button 
    android:background="@drawable/bottom" 
    android:layout_width="150dp" 
    android:layout_height="wrap_content" 
    android:layout_marginTop="-2dp" 
    android:text="Bottom" /> 

看android:layout_marginTop="-2dp" - 你需要它重疊頂部按鈕的邊框與底部按鈕的邊框

結果（圖形也不是那麼好，SRY）：

經過一些調整，你就會有一個形狀如你所料。

我扭捏：

Answer 2

你可以用位圖或圖像來做到這一點。你需要三張圖片。一個用於頂部按鈕，一個用於中間按鈕，另一個用於底部按鈕。然後只需將按鈕設置爲適當的背景圖像。

Answer 3

我採取不同的方法來做到這一點。

通常我會創建一個圓角背景，它將與整組按鈕的背景相對應。 （通常我有一個線性佈局封裝它們。）然後，每個按鈕之間都有一個分隔符。

應該以簡單的方式做你想做的事。