android - 如何在 Android XML 中创建固定高度的垂直线？

Question

想要创建一个像这张照片中的用户界面，我尝试了相对布局中的带背景的 View ，这不适用于固定高度，在下面给出的用户界面中构建左侧红色垂直线的最佳方法是什么？

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#f5f5f5"
android:orientation="vertical"
tools:ignore="MissingPrefix">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#a9382b">

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

        <ImageView
            android:layout_marginLeft="14dp"
            android:layout_marginTop="14dp"
            android:layout_marginBottom="14dp"
            android:layout_marginRight="9dp"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:src="@drawable/globe"/>

        <TextView
            android:layout_marginTop="9dp"
            android:layout_weight="7"
            android:layout_marginBottom="9dp"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:textSize="13sp"
            android:textColor="#b3ffffff"
            fontPath="fonts/montserrat-medium.ttf"
            android:letterSpacing="-0.03"
            android:lineSpacingExtra="2sp"
            tools:text="Farmer Suicides, Agitations The Indian Agrarian 
    Crisis"
            />

        <LinearLayout
            android:layout_weight="3"
            android:layout_width="0dp"
            android:layout_marginRight="16dp"
            android:layout_height="wrap_content">
        <Button
            android:layout_width="87dp"
            android:layout_height="32dp"
            android:background="@drawable/button"
            android:text="FOLLOW"
            android:textColor="#FFFFFF"
            fontPath="fonts/montserrat-medium.ttf"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:layout_marginLeft="12dp"
            android:textSize="12sp"
            android:lineSpacingExtra="0sp"
            android:gravity="center_horizontal||center_vertical"
            />
        </LinearLayout>



    </LinearLayout>



</RelativeLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="0dp"
    android:layout_marginTop="17dp"
    android:layout_marginLeft="15dp">

    <LinearLayout
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_marginRight="15dp">

    <ImageView
        android:layout_gravity="center"
        android:layout_width="10dp"
        android:layout_height="10dp"
      android:background="@drawable/ic_radio_button_unchecked_black_24dp"
        />


    </LinearLayout>



<TextView
    android:layout_gravity="center"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="13sp"
    android:textColor="#757575"
    android:letterSpacing="-0.03"
    android:lineSpacingExtra="0sp"
    tools:text="8 hours ago"
    />

</LinearLayout>

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

    <view
        android:layout_width="2dp"
        android:layout_height="match_parent"
        android:layout_marginLeft="19dp"
        android:background="#a9382b"
        android:layout_marginRight="19dp"/>

    <ImageView
        android:layout_marginTop="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="20dp"
        android:src="@drawable/background_splash" />

</LinearLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <view
        android:layout_width="2dp"
        android:layout_alignParentTop="true"
        android:layout_height="wrap_content"
        android:layout_marginLeft="19dp"
        android:background="#a9382b" />

    <TextView
        android:id="@+id/seeall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="20dp"
        android:textColor="#a9382b"
        android:textSize="11sp"
        tools:text="SEE ALL" />

    <TextView
        android:id="@+id/articles"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="10dp"
        android:layout_toLeftOf="@id/seeall"
        android:textColor="#757575"
        android:textSize="11sp"
        tools:text="7 Articles"

        />


</RelativeLayout>

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

    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="20dp"
        android:background="#a9382b"/>

</LinearLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="15dp">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_alignParentLeft="true"
        android:layout_centerInParent="true"
        android:layout_marginRight="15dp">


        <ImageView
            android:layout_gravity="center"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@drawable/ic_add_circle_outline_black_24dp"
            />

    </LinearLayout>

    <TextView
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:id="@+id/view_more"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="11sp"
        android:textColor="#a9382b"
        android:layout_marginRight="20dp"
        android:layout_alignParentRight="true"
        android:gravity="end"
        tools:text="VIEW FULL STORY"
        android:layout_marginTop="15dp"

        />




</RelativeLayout>



</LinearLayout>

Answer 1

你可以尝试两个答案

1) 你可以创建 View

 <View
                android:layout_width="1dp"
                android:layout_height="50dp" 
                android:background="#cdcdcd" />

2) 您可以创建线性布局并为线性布局设置左边距颜色，为此请遵循以下方法。

在drawable文件夹下创建这个xml文件margin_color.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">


<item>
    <shape android:shape="rectangle" >
        <solid android:color="#FFF" />
    </shape>
</item>

<item android:bottom="-4dp" android:right="-4dp" android:left="1dp"
    android:top="-4dp">
    <shape>
        <solid android:color="@android:color/transparent" />
        <stroke
            android:dashGap="0px"
            android:dashWidth="0px"
            android:width="2dp"
            android:color="#EF5350" />
    </shape>
</item>

然后将此边距应用到线性布局作为背景

<LinearLayout
            android:layout_width="5dp"
            android:layout_height="100dp"
            android:id="@+id/tactic_linear_layout"
            android:background="@drawable/margin_color"
            android:orientation="horizontal"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="0dp"
            android:paddingBottom="0dp">

这个方法对我有用试试这个....