如何实现这种布局

在我的应用程序中，我需要如下图所示的布局。 enter image description here 如何实现这种布局

我一直在尝试这个小时，但无法获得理想的结果。

这里是我的布局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>

有了这个，左侧textviews是不可见的。请帮忙。

来源

2013-04-05 Amit Jayant

使用表格布局.... – 2013-04-05 09:37:35

您可以在许多方面做到这一点，可以使用普通的LinearLayout作为容器，那么你的这两个TextView小号宽度设置为fill_parent，对双方TextView S设定android:layout_weight="1"所以他们可用宽度的50％。然后你需要把竖线放在像1dp这样的固定尺寸之间（你可以把ImageView，甚至是空的FrameLayout与背景颜色）。

来源

2013-04-05 09:40:03

非常感谢这一点。我只是喜欢你说的和瞧。现在就像我想要的一样。 – 2013-04-05 10:01:08

试试这个代码..

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

来源

2013-04-05 09:48:58

尝试这个代码.. 非常相似，你的要求。

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

来源

2013-04-05 09:52:42 Laksh

试试这个。

1，您可以创建父布局Horizontal

将水平排列的所有项目。

2-内layout使其垂直

3-添加View

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

来源

2013-04-05 09:52:53 Unknown

试试这个代码：

&lt;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" > 
&lt;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" > 
&lt;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"/> 
&lt;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" /> 
&lt;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"/> 
&lt;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"/> 
&lt;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"/> 
&lt;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"/> 
&lt;/LinearLayout&gt; 
&lt;View 
     android:id="@+id/middleSeperator" 
     android:layout_width="1dp" 
     android:layout_height="fill_parent" 
     android:layout_centerInParent="true" 
     android:background="#90909090" /> 
&lt;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" > 
&lt;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" /> 
&lt;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" /> 
&lt;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" /> 
&lt;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" /> 
&lt;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" /> 
&lt;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" /> 
&lt;/LinearLayout&gt; 
&lt;/RelativeLayout&gt;

来源

2013-04-05 14:38:24 QArea

如何实现这种布局

回答

相关问题