如何实现这种类型的布局

Question

在我的应用程序中，我想要如下图所示的布局。

我已经尝试了几个小时，但无法获得理想的结果。

这是我的布局xml：

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingTop="@dimen/activity_vertical_margin" >

    <View
        android:id="@+id/middleSeperator"
        android:layout_width="1dp"
        android:layout_height="fill_parent"
        android:layout_alignParentTop="true"
        android:background="#90909090" />

    <LinearLayout
        android:id="@+id/leftLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@id/middleSeperator"
        android:gravity="right"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/batt_health"
            android:textColor="@color/white" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/activity_vertical_margin"
            android:text="@string/batt_level"
            android:textColor="@color/white" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/activity_vertical_margin"
            android:text="@string/batt_status"
            android:textColor="@color/white" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/activity_vertical_margin"
            android:text="@string/batt_tech"
            android:textColor="@color/white" />

        <TextView
            android:id="@+id/textView5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/activity_vertical_margin"
            android:text="@string/batt_temp"
            android:textColor="@color/white" />

        <TextView
            android:id="@+id/textView6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/activity_vertical_margin"
            android:text="@string/batt_voltage"
            android:textColor="@color/white" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/rightLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/middleSeperator"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textViewHealth"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/activity_horizontal_margin"
            android:layout_marginTop="@dimen/activity_vertical_margin"
            android:textColor="@color/teal"
            android:textStyle="bold"
            tools:ignore="SelectableText" />

        <TextView
            android:id="@+id/textViewLevel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/activity_horizontal_margin"
            android:layout_marginTop="@dimen/activity_vertical_margin"
            android:textColor="@color/teal"
            android:textStyle="bold"
            tools:ignore="SelectableText" />

        <TextView
            android:id="@+id/textViewStatus"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/activity_horizontal_margin"
            android:layout_marginTop="@dimen/activity_vertical_margin"
            android:textColor="@color/teal"
            android:textStyle="bold"
            tools:ignore="SelectableText" />

        <TextView
            android:id="@+id/textViewTech"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/activity_horizontal_margin"
            android:layout_marginTop="@dimen/activity_vertical_margin"
            android:textColor="@color/teal"
            android:textStyle="bold"
            tools:ignore="SelectableText" />

        <TextView
            android:id="@+id/textViewTemp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/activity_horizontal_margin"
            android:layout_marginTop="@dimen/activity_vertical_margin"
            android:textColor="@color/teal"
            android:textStyle="bold"
            tools:ignore="SelectableText" />

        <TextView
            android:id="@+id/textViewVoltage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/activity_horizontal_margin"
            android:layout_marginTop="@dimen/activity_vertical_margin"
            android:textColor="@color/teal"
            android:textStyle="bold"
            tools:ignore="SelectableText" />
    </LinearLayout>
</RelativeLayout>

这样，左侧文本视图不可见。请帮助。

Answer 1

您可以通过多种方式执行此操作，可以使用普通的LinearLayout作为容器，然后将TextView的宽度设置为fill_parent并在android:layout_weight="1"上设置TextView因此它们占用了可用宽度的50％。然后你需要将垂直线放在固定大小之间，如1dp（你可以将ImageView或甚至空FrameLayout添加背景颜色。）

Answer 2

试试这个。

1 - 您可以创建父布局Horizontal

将水平排列所有项目。

2-内layout垂直制作

3-添加View

4-Inner layout垂直制作。

这很简单，可以根据您的需要进行更改，我只是为演示而创建。

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

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

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

    <TextView
        android:id="@+id/textViewStatus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="abc" />
</LinearLayout>

<View
    android:layout_width="1dp"
    android:layout_height="fill_parent" />

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

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

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

    <TextView
        android:id="@+id/textViewStatus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="xyz" />
</LinearLayout>

Answer 3

试试这段代码..

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="2" >

<LinearLayout
    android:id="@+id/first"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1" >

    <RelativeLayout
        android:id="@+id/firstpane"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp" >

        <TextView
            android:id="@+id/ftext1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:text="text 1" />

        <TextView
            android:id="@+id/ftext2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_below="@+id/ftext1"
            android:text="text 2" />

        <TextView
            android:id="@+id/ftext3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_below="@+id/ftext2"
            android:text="text 3" />
    </RelativeLayout>
</LinearLayout>

<LinearLayout
    android:id="@+id/second"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1" >

    <RelativeLayout
        android:id="@+id/secondpane"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp" >

        <TextView
            android:id="@+id/stext1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:text="text 1" />

        <TextView
            android:id="@+id/stext2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_below="@+id/stext1"
            android:text="text 2" />

        <TextView
            android:id="@+id/stext3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_below="@+id/stext2"
            android:text="text 3" />
    </RelativeLayout>
</LinearLayout>

</LinearLayout>

Answer 4

试试这段代码.. 与您的要求非常相似。

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

            <View
                android:id="@+id/middleSeperator"
                android:layout_width="1dp"
                android:layout_height="fill_parent"
                android:layout_alignParentTop="true"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:background="#90909090" />

            <TextView 
                android:id="@+id/t1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toLeftOf="@+id/middleSeperator"
                android:text="TextView"/>

            <TextView 
                android:id="@+id/t2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toLeftOf="@+id/middleSeperator"
                android:layout_below="@+id/t1"
                android:text="TextView I am no2"/>

            <TextView 
                android:id="@+id/t3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toLeftOf="@+id/middleSeperator"
                android:layout_below="@+id/t2"
                android:text="TextView I am number 3"/>

            <TextView 
                android:id="@+id/t4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toLeftOf="@+id/middleSeperator"
                android:layout_below="@+id/t3"
                android:text="TextView I am number 4"/>

            <TextView 
                android:id="@+id/t5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toLeftOf="@+id/middleSeperator"
                android:layout_below="@+id/t4"
                android:text="TextView I am number 5"/>

            <TextView 
                android:id="@+id/t6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@+id/middleSeperator"
                android:text="TextView"/>

            <TextView 
                android:id="@+id/t7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@+id/middleSeperator"
                android:layout_below="@+id/t6"
                android:text="Another TextView"/>

            <TextView 
                android:id="@+id/t8"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@+id/middleSeperator"
                android:layout_below="@+id/t7"
                android:text="Another TextView"/>

            <TextView 
                android:id="@+id/t9"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@+id/middleSeperator"
                android:layout_below="@+id/t8"
                android:text="TextView"/>

            <TextView 
                android:id="@+id/t10"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@+id/middleSeperator"
                android:layout_below="@+id/t9"
                android:text="TextView"/>

        </RelativeLayout>

Answer 5

试试这段代码：

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
     xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:gravity="center" 
    android:paddingBottom="@dimen/activity_vertical_margin" 
    android:paddingTop="@dimen/activity_vertical_margin" >
<LinearLayout
        android:id="@+id/leftLayout" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_alignParentLeft="true" 
        android:layout_alignParentTop="true" 
        android:layout_marginRight="10dp" 
        android:layout_toLeftOf="@id/middleSeperator" 
        android:orientation="vertical" >
<TextView
            android:id="@+id/textView1" 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:layout_marginTop="@dimen/activity_vertical_margin" 
            android:text="textView" 
            android:textStyle="bold" 
            tools:ignore="SelectableText" 
            android:gravity="right"/>
<TextView
            android:id="@+id/textView2" 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:gravity="right" 
            android:layout_marginTop="@dimen/activity_vertical_margin" 
            android:text="textview am num 1" 
            android:textStyle="bold" 
            tools:ignore="SelectableText" />
<TextView
            android:id="@+id/textView3" 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:layout_marginTop="@dimen/activity_vertical_margin" 
            android:text="textview am number 2" 
            android:textStyle="bold" 
            tools:ignore="SelectableText" 
            android:gravity="right"/>
<TextView
            android:id="@+id/textView4" 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:layout_marginTop="@dimen/activity_vertical_margin" 
            android:text="textview am number 3" 
            android:textStyle="bold" 
            tools:ignore="SelectableText" 
            android:gravity="right"/>
<TextView
            android:id="@+id/textView5" 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:layout_marginTop="@dimen/activity_vertical_margin" 
            android:text="textview am number 4" 
            android:textStyle="bold" 
            tools:ignore="SelectableText" 
            android:gravity="right"/>
<TextView
            android:id="@+id/textView6" 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:layout_marginTop="@dimen/activity_vertical_margin" 
            android:text="textview am number 5" 
            android:textStyle="bold" 
            tools:ignore="SelectableText" 
            android:gravity="right"/>
</LinearLayout>
<View
        android:id="@+id/middleSeperator" 
        android:layout_width="1dp" 
        android:layout_height="fill_parent" 
        android:layout_centerInParent="true" 
        android:background="#90909090" />
<LinearLayout
        android:id="@+id/rightLayout" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_alignLeft="@id/middleSeperator" 
        android:layout_alignParentRight="true" 
        android:layout_alignParentTop="true" 
        android:layout_marginLeft="10dp" 
        android:orientation="vertical" >
<TextView
            android:id="@+id/textViewHealth" 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:layout_marginTop="@dimen/activity_vertical_margin" 
            android:text="textView" 
            android:textStyle="bold" 
            tools:ignore="SelectableText" />
<TextView
            android:id="@+id/textViewLevel" 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:layout_marginTop="@dimen/activity_vertical_margin" 
            android:text="textview am num 1" 
            android:textStyle="bold" 
            tools:ignore="SelectableText" />
<TextView
            android:id="@+id/textViewStatus" 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:layout_marginTop="@dimen/activity_vertical_margin" 
            android:text="textview am number 2" 
            android:textStyle="bold" 
            tools:ignore="SelectableText" />
<TextView
            android:id="@+id/textViewTech" 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:layout_marginTop="@dimen/activity_vertical_margin" 
            android:text="textview am number 3" 
            android:textStyle="bold" 
            tools:ignore="SelectableText" />
<TextView
            android:id="@+id/textViewTemp" 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:layout_marginTop="@dimen/activity_vertical_margin" 
            android:text="textview am number 4" 
            android:textStyle="bold" 
            tools:ignore="SelectableText" />
<TextView
            android:id="@+id/textViewVoltage" 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:layout_marginTop="@dimen/activity_vertical_margin" 
            android:text="textview am number 5" 
            android:textStyle="bold" 
            tools:ignore="SelectableText" />
</LinearLayout>
</RelativeLayout>