按钮间距答案

【问题标题】：Buttons spacing按钮间距
【发布时间】：2012-11-26 02:47:13
【问题描述】：

我正在尝试将按钮的边距设置为 0，（因此按钮之间没有间距）。

基本上，我希望我的按钮看起来像这样（具有以下样式和颜色）：

知道如何完成这种任务吗？我不想自己创建一个 9 补丁图像（因为我对此一无所知）。

【问题讨论】：

标签： android layout button margin

【解决方案1】：

在这种特定情况下，您可以使用 XML 轻松完成此任务。这是您可以分两步实现它的方法：

步骤 1

在drawable文件夹中创建3个形状：

第一个形状用于左按钮：shape_button_left.xml。此形状具有径向左角和渐变背景。

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

    <stroke
        android:width="1dp"
        android:color="#BFBFBF" >
    </stroke>

    <corners
        android:bottomLeftRadius="10dp"
        android:topLeftRadius="10dp" >
    </corners>

    <gradient android:startColor="#D2D2D2" android:endColor="#F2F2F2" android:angle="90"/>

</shape>

第二个形状用于中心按钮：shape_button_center.xml。这个形状没有定义任何角落，也有渐变背景。

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

    <stroke
        android:width="1dp"
        android:color="#BFBFBF" >
    </stroke>

    <gradient android:startColor="#D2D2D2" android:endColor="#F2F2F2" android:angle="90"/>

</shape>

第三个形状用于右键：shape_button_right.xml。此形状具有径向右角和渐变背景。

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

    <stroke
        android:width="1dp"
        android:color="#BFBFBF" >
    </stroke>

    <corners
        android:bottomRightRadius="10dp"
        android:topRightRadius="10dp" >
    </corners>

    <gradient android:startColor="#D2D2D2" android:endColor="#F2F2F2" android:angle="90"/>

</shape>

第二步

现在，我们可以在简单的视图中使用这些形状来获得按钮的效果。在您的布局 XML 中添加以下代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center" >

    <!-- Button Left -->

    <LinearLayout
        android:id="@+id/button_left"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:background="@drawable/shape_button_left"
        android:gravity="center"
        android:padding="10dp" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Left"
            android:textColor="#333333"
            android:textSize="20sp" />
    </LinearLayout>
    <!-- End Button Left -->


    <!-- Button Center -->

    <LinearLayout
        android:id="@+id/button_center"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:background="@drawable/shape_button_center"
        android:gravity="center"
        android:padding="10dp" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Center"
            android:textColor="#333333"
            android:textSize="20sp" />
    </LinearLayout>
    <!-- End Button Center -->


    <!-- Button Right -->

    <LinearLayout
        android:id="@+id/button_right"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:background="@drawable/shape_button_right"
        android:gravity="center"
        android:padding="10dp" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Right"
            android:textColor="#333333"
            android:textSize="20sp" />
    </LinearLayout>
    <!-- End Button Right -->

</LinearLayout>

就是这样 现在，您可以在代码中将 onClick 侦听器添加到 LinearLayouts 并像按钮一样使用它。

在我的手机上测试这段代码会得到下一个结果：

【讨论】：

【解决方案2】：

知道如何完成这种任务吗？我不想自己创建一个 9 补丁图像（因为我对此一无所知）。

恐怕您可能没有太多选择。每个按钮之间的固有间距是直接内置到框架使用的现有 9-patch 背景中的额外透明像素的结果。要替换此行为，您必须将按钮的背景设置为不包含此固有间距的不同 Drawable。

您可以在代码中完成的另一个选项是创建 XML 可绘制形状以用于每个背景。您可以创建具有圆角半径、填充渐变和笔触的单个形状，就像您的图像一样。您可以阅读有关创建 XML Drawables in the docs 的更多信息。

【讨论】：