Android - 如何在线性布局之间生成线条答案

【问题标题】：Android - How to generate lines between linearlayoutsAndroid - 如何在线性布局之间生成线条
【发布时间】：2013-12-05 18:46:06
【问题描述】：

我正在尝试使用 XML 来生成一个看起来像这样的 UI。

蓝色的勾号按钮和TextView是和一个垂直放置的LinearLayout对齐的，所以一个RelativeLayout里一共有3个LinearLayout。现在我需要在每个刻度按钮之间添加一条线，对齐方式看起来像这样。

图像看起来像这样：

Image UI

我应该使用什么布局来实现这一点？

这是我当前的代码：（解决方案）

我已经根据@Piyush Gupta 提供的解决方案修改了我的解决方案！感谢大家的帮助！

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp" >

        <LinearLayout
            android:id="@+id/linearlayout1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="horizontal"
            android:weightSum="3" >

            <ImageButton
                android:id="@+id/button01"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:background="@drawable/button" />

            <Button
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="1dp"
                android:layout_weight="1"
                android:background="#000"
                android:src="@android:color/transparent" />

            <ImageButton
                android:id="@+id/button02"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:background="@drawable/button" />

            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="1dp"
                android:layout_weight="1"
                android:background="#000"
                android:src="@android:color/transparent" />

            <ImageButton
                android:id="@+id/button03"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:background="@drawable/button" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/linearlayout2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/linearlayout1"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/textView1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:gravity="left"
                android:text="TextView" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:gravity="center"
                android:text="TextView" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:gravity="right"
                android:text="TextView" />
        </LinearLayout>
    </RelativeLayout>

【问题讨论】：

标签： android android-layout android-xml

【解决方案1】：

使用这个：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/custom_toast_layout"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="#F14E23"
  android:orientation="vertical" >

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="horizontal" >

    <ImageButton
        android:id="@+id/button01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@drawable/ic_launcher" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="1dp"
        android:layout_gravity="center"
        android:background="#000"
        android:src="@android:color/transparent" />

    <ImageButton
        android:id="@+id/button02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@drawable/ic_launcher" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="1dp"
        android:layout_gravity="center"
        android:background="#000"
        android:src="@android:color/transparent" />

    <ImageButton
        android:id="@+id/button03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@drawable/ic_launcher" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:text="TextView" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:text="TextView" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:text="TextView" />
 </LinearLayout>

</LinearLayout>

【讨论】：

感谢您的帮助！

【解决方案2】：

用以下代码替换您的 xml。您可以根据需要调整重量。

<LinearLayout
    android:id="@+id/ll1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:weightSum="10"
    android:orientation="horizontal" >

    <ImageButton
        android:id="@+id/button01"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:background="@android:color/transparent"
        android:src="@drawable/ic_add" />

    <View
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_gravity="center"
        android:layout_weight="2"
        android:background="@android:color/black" />

    <ImageButton
        android:id="@+id/button02"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:background="@android:color/transparent"
        android:src="@drawable/ic_add" />

    <View
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_gravity="center"
        android:layout_weight="2"
        android:background="@android:color/black" />

    <ImageButton
        android:id="@+id/button03"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:background="@android:color/transparent"
        android:src="@drawable/ic_add" />
</LinearLayout>

<LinearLayout
    android:id="@+id/ll2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:weightSum="10"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/TextView01"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:layout_weight="2"
        android:text="TextView" />

    <View
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="2" />

    <TextView
        android:id="@+id/TextView02"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:layout_weight="2"
        android:text="TextView" />

    <View
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="2" />

    <TextView
        android:id="@+id/TextView03"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:layout_weight="2"
        android:text="TextView" />
</LinearLayout>

希望对你有帮助。

【讨论】：

感谢您的帮助！这实际上也有效，但线条和按钮之间存在间隙。但是对于需要此实现的另一个实现也可能会有所帮助！

【解决方案3】：

您可以使用视图来显示这种线。在线性布局之间显示视图并使用android:layout_toRightOf="" 属性来保持布局井井有条。

  <View  android:layout_width="fill_parent"
         android:background="@color/black"
         android:layout_height="1dip" />

【讨论】：

是的，我可以生成线条，我只是不知道如何将它放在按钮之间并将其垂直居中。线条还需要具有动态宽度，因为它还应该缩放以适合平板电脑。

【解决方案4】：

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_margin="20dp" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:orientation="vertical" >

        <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >

        <ImageButton
            android:id="@+id/button01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@android:color/transparent"
            android:src="@drawable/button" />

            <View  android:layout_width="60dp"
             android:background="@color/black"
             android:layout_height="1dip"
             android:layout_gravity="center_vertical"
             />

         </LinearLayout>

        <TextView
            android:id="@+id/TextView02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_centerHorizontal="true" >

        <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >

        <View  android:layout_width="60dp"
         android:background="@color/black"
         android:layout_height="1dip"
         android:layout_gravity="center_vertical"
         />

        <ImageButton
            android:id="@+id/button02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@android:color/transparent"
            android:src="@drawable/button" />

            <View  android:layout_width="60dp"
             android:background="@color/black"
             android:layout_height="1dip"
             android:layout_gravity="center_vertical"
             />

         </LinearLayout>

        <TextView
            android:id="@+id/TextView02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:orientation="vertical" >

        <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >

        <View  android:layout_width="60dp"
             android:background="@color/black"
             android:layout_height="1dip"
             android:layout_gravity="center_vertical"
             />

        <ImageButton
            android:id="@+id/button03"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:background="@android:color/transparent"
            android:src="@drawable/button" />

            </LinearLayout>

        <TextView
            android:id="@+id/TextView02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />

    </LinearLayout>

</RelativeLayout>

【讨论】：

感谢样品！但是现在看起来像这样......cl.ly/image/0K0U1p0z3o0a 仍然不是我希望实现的目标，我希望线条能够接触按钮，并且线条在按钮层内垂直居中，而不是 TextView 包括在内。
嗨，哈里，我试过了，但它仍然看起来很奇怪，因为线条粘在按钮的左侧并且与右侧的按钮分离......
@cokeby 你能显示屏幕截图吗？因为我在我的电脑上试过了，它看起来工作正常
Hari，我的错误，我再次尝试了第二次，现在看起来像这样：cl.ly/image/2v3A2A410K2r 但是，它对于所有屏幕尺寸都不是动态的，因为线条的像素宽度是固定的。跨度>
@cokeby 是的，我知道，我只是举例说明了如何实现这一目标

【解决方案5】：

根据您的要求，在您需要的任何地方尝试下面提到的 xml 文件中的代码。这将为您创建线路。

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:layout_marginBottom="2dp"
        android:background="@color/black" >
    </LinearLayout>

希望你能管理线性布局的“权重”选项。

【讨论】：