将 3 个按钮对齐在一个符号行中，每个按钮都有不同的边框

Question

下午好，

我正在做一个需要在 TabLayout 下对齐 3 个按钮的应用，如下图所示：

我不知道最好的方法是什么，因为每个都有不同的边界。

有人可以帮助我吗？ 谢谢！

---

我终于做到了：

buttons.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:gravity="center_horizontal"
    android:layout_marginLeft="18sp"
    android:layout_marginRight="18sp">

    <Button
        style="?android:textAppearanceSmall"
        android:layout_width="wrap_content"
        android:layout_height="31sp"
        android:id="@+id/one"
        android:text="ONE"
        android:textColor="@color/red"
        android:layout_weight="1"
        android:background="@drawable/button_shape_one" />

    <Button
        style="?android:textAppearanceSmall"
        android:layout_width="wrap_content"
        android:layout_height="31sp"
        android:id="@+id/two"
        android:text="TWO"
        android:textColor="@color/red"
        android:layout_weight="1"
        android:background="@drawable/button_shape_two"/>

    <Button
        style="?android:textAppearanceSmall"
        android:layout_width="wrap_content"
        android:layout_height="31sp"
        android:id="@+id/three"
        android:text="THREE"
        android:textColor="@color/red"
        android:layout_weight="1"
        android:background="@drawable/button_shape_three"/>

</LinearLayout>

button_shape_one.xml

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

    <solid android:color="@color/transparent"/>

    <stroke android:width="1dp"
        android:color="@color/red"
        />

    <corners android:bottomRightRadius="0dp"
        android:bottomLeftRadius="5dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="0dp"/>
</shape>

button_shape_two.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:bottom="0dp"
        android:left="-2dp"
        android:right="-2dp"
        android:top="0dp">
        <shape android:shape="rectangle" >
            <stroke
                android:width="1dp"
                android:color="@color/red" />

            <solid android:color="@color/transparent" />

            <padding android:left="10dp"
                android:right="10dp"
                android:top="5dp"
                android:bottom="5dp" />
        </shape>
    </item>

</layer-list>

button_shape_three.xml

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

    <solid android:color="@color/transparent"/>

    <stroke android:width="1dp"
        android:color="@color/red"
        />

    <corners android:bottomRightRadius="5dp"
        android:bottomLeftRadius="0dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="5dp"/>
</shape>

结果：

谢谢大家！

Answer 1

您需要为所有按钮创建一个 Shape 可绘制对象。例如，中心按钮可以使用下面的drawable作为背景。

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#606060"/>
    <stroke android:color="#303030" android:width="2dp" />
</shape>

对于其他两个，您只需要在左右两侧圆边。为此，您可以关注This 在 SO 上的帖子。

*注意：根据您的需要更改颜色，您还需要在每个按钮上应用选择器以突出显示选择。 左右边框也可以使用shape drawable去除。更多详情请看This post

更简单的方法是使用This Library.

Answer 2

将所有按钮的宽度设置为“0dp”，将重量设置为“1”，并将它们包装在水平线性布局中

Answer 3

roundedbuttons.xml 在可绘制对象中

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

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

<stroke android:width="3dp"
    android:color="#ff000000"
    />

 <corners android:bottomRightRadius="7dp" 
     android:bottomLeftRadius="7dp" 
     android:topLeftRadius="7dp"
     android:topRightRadius="7dp"/> 
 </shape>

根据您的喜好编辑形状

在你的 xml 布局中

LinearLayout(Horizontal)
 - Buttons with background(roundedbuttons.xml) and weight="1"

Answer 4

为什么不使用一个带有蓝色边框的线性布局作为 3 个带有背景的 textView 的父级。无需复杂化。