如何使按钮看起来像一个列表

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

我采取不同的方法来做到这一点。

通常我会创建一个圆角背景，它将与整组按钮的背景相对应。 （通常我有一个线性布局封装它们。）然后，每个按钮之间都有一个分隔符。

应该以简单的方式做你想做的事。