如何在没有背景颜色和边框线仅出现在顶部和底部的情况下垂直对齐按钮彼此靠近

Posted

技术标签:

【中文标题】如何在没有背景颜色和边框线仅出现在顶部和底部的情况下垂直对齐按钮彼此靠近【英文标题】:How to vertically align buttons close to each other with no background colour and border line appears only on the top and bottom 【发布时间】:2015-02-15 18:50:56 【问题描述】:

在 Eclipse 中,我正在尝试制作没有背景颜色的按钮,它们垂直对齐并像这样粘在一起。

https://lh4.ggpht.com/0G1ABsFEDX9diNXPClJhTNsqsl5MF-G49bW1udNcIvOsrBE1boqmLtDrM4X045KfKZk6=h900

由于我真的不知道这个按钮叫什么,所以我的问题是

    如何像上面的链接一样垂直对齐按钮并紧密地粘在一起?

    如何让它们没有上面链接中的背景颜色?

    如何让按钮边框像上面的链接一样只出现在顶部和底部?

我已经在许多网站上搜索了有关此特定类型按钮的所有问题和答案,但似乎没有找到我特别需要的内容。

我尝试使用 listView 和 android:orientation=“horizo​​ntal”,但我尝试的按钮与上面链接中的按钮不同。我认为这两种方法都不是正确的方法,所以我决定最后在这里问。

【问题讨论】:

【参考方案1】:

最好的方法是使用带有透明背景的按钮,并且彼此之间有分隔符:

<LinearLayout
    android:layout_
    android:layout_
    android:layout_marginBottom="10dp"
    android:orientation="vertical" >

    <!-- you might change each Button layout_height and  textSize depending on your needs -->
    <Button
        android:id="@+id/button1"
        android:layout_
        android:layout_
        android:layout_gravity="center"
        android:background="@android:color/transparent"
        android:gravity="center"
        android:text="sometext"
        android:textColor="@android:color/white"
        android:textSize="20sp" />

    <!-- you might change each View separator layout_width depending on your needs -->
    <View
        android:layout_
        android:layout_
        android:background="@drawable/a_drawable_separators" />

    <Button
        android:id="@+id/button2"
        android:layout_
        android:layout_
        android:layout_gravity="center"
        android:background="@android:color/transparent"
        android:gravity="center"
        android:text="sometext"
        android:textColor="@android:color/white"
        android:textSize="20sp" />

    <!-- the rest of buttons also with a separator view between each two buttons -->

</LinearLayout>

这是视图分隔符可绘制布局:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
   <gradient
      android:startColor="#CC242425"
      android:centerColor="#969696"
      android:endColor="#CC242425"
      android:angle="0" />
</shape>

【讨论】:

【参考方案2】:

您需要使用线性布局作为具有背景图像的父布局, 对于中间的线条,您可以使用 imageview 并设置线条图像。 对于没有按钮背景的情况,请在 xml 中添加。

 android:background="@null"

代码会是这样的

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_
android:layout_
android:background="@drawable/your_black_image_with_white_in_middle" >

<Button
    android:id="@+id/btnArtifacts"
    android:layout_
    android:layout_
    android:background="@null"
    android:text="Artifacts and Objects" />

<ImageView
    android:layout_
    android:layout_
    android:background="@drawable/your_line_white_image"
     />

    <Button
    android:id="@+id/btnBeings"
    android:layout_
    android:layout_
    android:background="@null"
    android:text="Beings and Entities" />

 </LinearLayout>

我只展示了两个按钮,您可以像这样前进。 我已将文本硬编码为字符串。

希望你能明白。

【讨论】:

【参考方案3】:

使用listview 代替Buttons。使用静态ArrayList&lt;String&gt;String[] 填充这些值,例如Artifacts &amp; Objects。但是你需要像this 这样自定义listView,因为每一行都有计数器。您还需要将divider(border) 放在drawable-folder 中并像这样使用它

<ListView
    android:id="@+id/listView"
    android:layout_
    android:layout_
    android:divider="@drawable/divider_drawable_name" >
</ListView>

【讨论】:

【参考方案4】:

试试这个:

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

 <Button
        android:id="@+id/button1"
        android:layout_
        android:layout_
        android:background="@null"
        android:text="Button1" />

 <Button
            android:id="@+id/button2"
            android:layout_
            android:layout_
            android:background="@null"
            android:text="Button2" />

 <Button
            android:id="@+id/button3"
            android:layout_
            android:layout_
            android:background="@null"
            android:text="Button3" />

</LinearLayout

【讨论】:

【参考方案5】:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_
    android:layout_
    android:orientation="vertical" >

    <Button
        android:layout_
        android:layout_
        android:background="@color/gray"
        android:textColor="@color/white" />

    <Button
        android:layout_
        android:layout_
        android:background="@color/gray"
        android:textColor="@color/white" />

</LinearLayout>

你需要通过drawables来编辑背景。

【讨论】:

以上是关于如何在没有背景颜色和边框线仅出现在顶部和底部的情况下垂直对齐按钮彼此靠近的主要内容,如果未能解决你的问题,请参考以下文章

表 tr:hover 边框更改的问题

设置背景颜色时 IE 中出现不必要的边框

如何使背景图像顶部的透明背景颜色移至底部?

如何向 Xamarin Forms App Shell Tabbar 添加顶部边框

Jquery数据表对列边框颜色进行排序

有没有一种简单的方法可以在 Android 视图的顶部和底部添加边框?