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

Question

我在相对布局的顶部和底部之间使用两条水平视图线（id 是 view2 和 view 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:

Answer 1

您可以在文本视图周围绘制边框。为此，您可以在 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>

如果您只想要 one/specific 边的边框，您可以这样做：

<?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>

Answer 2

您的代码甚至在 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 提供固定高度，并为该分隔视图提供 [=16] =]身高。

Answer 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"
        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）。

Answer 4

看看你希望实现什么，最好使用权重和线性布局。
这将确保您的垂直分隔线正好位于水平布局的中间。
Here 是一个很好的 post 解释权重与线性布局的用法。

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

     <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>

Answer 5

试试这个

<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>

divider.xml 在你的 drawables

<?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>

希望对你有用...

Answer 6

只需将此代码放入文本视图之间的行分隔符即可。

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

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

How to draw vertical separation line between two text line android?

android

android-layout

android-relativelayout