如何實現這種佈局

在我的應用程序中，我需要如下圖所示的佈局。 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

如何實現這種佈局

回答

相關問題