如何实现这种类型的布局

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作为容器,然后将两个TextViews的宽度fill_parent设置android:layout_weight="1"为两个TextViews 上的AND设置,以便它们占用可用宽度的50%.然后你需要将垂直线放在固定大小之间1dp(你可以放置ImageView甚至FrameLayout用背景颜色清空).