如何在两个文本行android之间绘制垂直分隔线？答案

【问题标题】：How to draw vertical separation line between two text line android?如何在两个文本行android之间绘制垂直分隔线？
【发布时间】：2018-03-12 22:39:03
【问题描述】：

我在相对布局的顶部和底部之间使用了两条水平视图线（id 是 view2 和视图 3）。如何在两个文本之间垂直放置视图线。这是预期输出的代码和屏幕截图。

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

<RelativeLayout
    android:id="@+id/delivery_address"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/address_layout"
    android:layout_margin="10dp"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/delivery_phone"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/delivery_country"
        android:layout_marginLeft="7dp"
        bold=""
        android:paddingLeft="6dp"
        android:paddingTop="5dp"
        android:text="Phone: 12345678
        android:textStyle=" />
</RelativeLayout>

<View
    android:id="@+id/view2"
    android:layout_width="wrap_content"
    android:layout_height="1dp"
    android:layout_below="@+id/delivery_address"
    android:layout_centerVertical="true"
    android:background="#cfcfcf" />

<RelativeLayout
    android:id="@+id/delivery_edit_delete_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/view2"
    android:layout_margin="8dp"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/delivery_edit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="7dp"
        android:drawableLeft="@drawable/delivery_edit"
        android:drawablePadding="5dp"
        android:paddingLeft="20dp"
        android:text="Edit"
        android:textColor="#555555" />

    <TextView
        android:id="@+id/delivery_delete"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginRight="7dp"
        android:layout_toLeftOf="@+id/delivery_edit"
        android:drawableLeft="@drawable/delivery_delete"
        android:drawablePadding="5dp"
        android:paddingRight="20dp"
        android:text="Delete"
        android:textColor="#555555" />
</RelativeLayout>

<View
    android:id="@+id/view3"
    android:layout_width="wrap_content"
    android:layout_height="1dp"
    android:layout_below="@+id/delivery_edit_delete_layout"
    android:layout_centerVertical="true"
    android:background="#cfcfcf" />

预期输出：

My output is:

【问题讨论】：

标签： android android-layout android-relativelayout

【解决方案1】：

我会做什么：

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

    <RelativeLayout
    android:id="@+id/delivery_address"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/address_layout"
    android:layout_margin="10dp"
     android:orientation="horizontal" >

        <TextView
        android:id="@+id/delivery_phone"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/delivery_country"
        android:layout_marginLeft="7dp"
        android:paddingLeft="6dp"
        android:paddingTop="5dp"
        android:text="Phone: 12345678
        android:textStyle="bold" />
    </RelativeLayout>

    <View
    android:id="@+id/view2"
    android:layout_width="wrap_content"
    android:layout_height="1dp"
    android:layout_below="@+id/delivery_address"
    android:layout_centerVertical="true"
    android:background="#cfcfcf" />

    <RelativeLayout
    android:id="@+id/delivery_edit_delete_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/view2"
    android:orientation="horizontal" >

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

            <TextView
            android:id="@+id/delivery_edit"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_gravity="center" (Or try android:gravity)
            android:layout_marginLeft="7dp"
            android:drawableLeft="@drawable/delivery_edit"
            android:drawablePadding="5dp"
            android:paddingLeft="20dp"
            android:text="Edit"
            android:textColor="#555555" />

            <View
            android:id="@+id/innerLine"
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#cfcfcf" />

            <TextView
            android:id="@+id/delivery_delete"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_gravity="center" (Or try android:gravity)
            android:layout_marginRight="7dp"
            android:layout_toLeftOf="@+id/delivery_edit"
            android:drawableLeft="@drawable/delivery_delete"
            android:drawablePadding="5dp"
            android:paddingRight="20dp"
            android:text="Delete"
            android:textColor="#555555" />

        </LinearLayout>
    </RelativeLayout>

    <View
    android:id="@+id/view3"
    android:layout_width="wrap_content"
    android:layout_height="1dp"
    android:layout_below="@+id/delivery_edit_delete_layout"
    android:layout_centerVertical="true"
    android:background="#cfcfcf" />
</RelativeLayout>

尝试使用 LinearLayout，因为这样会将它放在两者的中间。希望这段代码会有所帮助！我自己还没有尝试过，所以你必须为我测试它！

编辑：更新以使它们居中（如果 layout_gravity/gravity 都失败，请尝试在 LinearLayout 中使用 android:gravity）。

【讨论】：

您好，感谢您的回复。我应用了您的代码，输出看起来像这样。tiikoni.com/tis/view/?id=e75394c 视图线没有上下接触。它在中间
从RelativeLayout 中移除边距并将其分别应用到textviews。应该让它填满盒子，并在边框和 textView 之间创建一些距离。查看更新的编码。将添加一些更改以使删除和编辑中心。

【解决方案2】：

只需将此代码用于文本视图之间的行分隔符。

<View
   android:layout_width="wrap_content"
   android:layout_height="1dp"
   android:background="#979797"/>

【讨论】：

【解决方案3】：

您可以在文本视图周围绘制边框。为此，您可以在 drawables 文件夹中创建边框样式，然后将 textview 背景设置为指向此样式：

//your textview
<TextView android:text="Hi there" android:background="@drawable/my_border/>

然后你的边框为 drawable/my_border:

//you can set the border colors, width, and which sides should have borders.
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
  <solid android:color="#ffffff" />
  <stroke android:width="1dip" android:color="#e2e2e2"/>
</shape>

如果你只想要一个/特定边的边框，你可以这样做：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    //this is your textview main background
    <shape android:shape="rectangle">
        <solid android:color="#ffffff" />
    </shape>
</item>
//this will then draw only left border with specified colour and width
<item android:left="1dp">
    <shape android:shape="rectangle">
        <solid android:color="#e1e1e1" />
    </shape>
</item>

【讨论】：

您好，感谢您的回复。我需要申请哪个文本视图？两个文本视图？
没有问题，如果您将其应用于左侧文本视图，您可以使用我的底部解决方案，只需将 android:left="1dp" 更改为 android:right="1dp" 以便您设置右边框。这应该足够了，不需要将它放在两个文本视图上。很高兴知道这一点，因为您会发现很多情况下您需要在视图周围设置边框，甚至必须创建自己的按钮！

【解决方案4】：

您的代码甚至在RelativeLayout 的中间都没有视图，因此将以下视图放在相对布局delivery_edit_delete_layout 中的视图delivery_edit 之后：

<View
android:id="@+id/view_separator"
android:layout_width="1dp"
android:layout_height="30dp"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:background="#cfcfcf" />

但请记住，您必须为此提供一个固定的高度，这里我指定了30dp，或者至少为RelativeLayout 提供一个固定的高度，并给这个分隔视图一个match_parent 的高度。

【讨论】：

【解决方案5】：

查看您希望实现的目标，最好将权重与线性布局一起使用。
这将确保您的垂直分隔线正好放置在水平布局的中间。
Here 是一篇非常好的帖子，解释了在线性布局中使用权重。

您可以参考此代码以了解如何使用它来满足您的要求。

     <LinearLayout
        android:id="@+id/delivery_edit_delete_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/view2"
        android:layout_margin="8dp"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/delivery_edit"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:drawableLeft="@drawable/delivery_edit"
            android:gravity="center"
            android:layout_weight="1"
            android:text="Edit"
            android:textColor="#555555" />

        <View
            android:id="@+id/verticalLine"
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#cfcfcf" >
        </View>

        <TextView
            android:id="@+id/delivery_delete"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:drawableLeft="@drawable/delivery_delete"
            android:gravity="center"
            android:text="Delete"
            android:textColor="#555555" />
    </LinearLayout>

【讨论】：

您好，感谢您的回复。还是同样的问题。它看起来像这样。 tiikoni.com/tis/view/?id=e75394ci 需要查看上下线。视图线位于两个文本视图之间。

【解决方案6】：

试试这个

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

        <TextView
            android:id="@+id/delivery_edit"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="7dp"
            android:layout_weight="1"
            android:background="@drawable/divider"
            android:drawableLeft="@drawable/delivery_edit"
            android:drawablePadding="5dp"
            android:gravity="center"
            android:paddingLeft="20dp"
            android:text="Edit"
            android:textColor="#555555" />

        <TextView
            android:id="@+id/delivery_delete"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="7dp"
            android:layout_weight="1"
            android:drawableLeft="@drawable/delivery_delete"
            android:drawablePadding="5dp"
            android:gravity="center"
            android:paddingRight="20dp"
            android:text="Delete"
            android:textColor="#555555" />
    </LinearLayout>

你的drawables中的divider.xml

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

<item
    android:bottom="-2dp"
    android:left="-2dp"
    android:right="1dp"
    android:top="-2dp">
    <shape android:shape="rectangle" >
        <stroke
            android:width="1dp"
            android:color="#cfcfcf" />

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

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

希望它对你有用...

【讨论】：