【Android開發日記】妙用 RelativeLayout 實現3段式布局

標籤：relativelayout一排3個控制項   relativelayout垂直布局3個   

在設計的過程中我們一定經常會遇到這樣的需求：

一行內放3個控制項，左邊控制項靠左對齊，右面控制項靠右對齊，中間控制項來填充剩下的空間。

或者一列內放3個控制項，上面的與頂部對齊，下面的沉在最底部，中間控制項是彈性的，充滿剩餘空間。

情況一：水平布局
圖示:

這是第一種情形。由於涉及到ImageView，想保持圖片原比例不便使用LinearLayout的weight屬性。

解決辦法：

1.外層套一個RelativeLayout

2.三個控制項分別裝進3個LinearLayout中，假如id分別為leftlayout，midlayout，rightlayout

    leftlayout屬性：android:layout_width="wrap_content"

    rightlayout屬性：android:layout_width="wrap_content"

    midlayout屬性： android:layout_width="match_parent"

                                   android:layout_toLeftOf="@+id/rightlayout"
                                   android:layout_toRightOf="@+id/leftlayout" 

這樣就可以達到兩端控制項分別左靠右對齊，中部控制項填充剩餘空間的效果。

效果的布局圖示：

效果的代碼：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="34dp"    android:background="#FFFFFF"    android:orientation="horizontal" >          <LinearLayout    android:id="@+id/choosetags_listview_item_leftlayout"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_alignParentLeft="true">        <ImageView        android:id="@+id/taglistview_item_ico"        android:layout_width="30dp"        android:layout_height="30dp"        android:layout_gravity="center_vertical"        android:layout_marginBottom="2dp"        android:layout_marginLeft="5dp"        android:layout_marginRight="5dp"        android:layout_marginTop="2dp"        android:contentDescription="@string/app_name"        android:src="@drawable/tag_ico_movie" />    </LinearLayout><LinearLayout    android:id="@+id/choosetags_listview_item_midlayout"    android:layout_width="match_parent"    android:layout_height="fill_parent"    android:layout_centerVertical="true"    android:layout_toLeftOf="@+id/choosetags_listview_item_rightlayout"    android:layout_toRightOf="@+id/choosetags_listview_item_leftlayout" >    <com.coolletter.util.MarqueeTextView    android:id="@+id/taglistview_item_name"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:layout_gravity="center_vertical"    android:checkMark="?android:attr/textCheckMark"    android:ellipsize="marquee"    android:focusableInTouchMode="true"    android:gravity="center_vertical"    android:marqueeRepeatLimit="marquee_forever"    android:paddingEnd="5dp"    android:paddingStart="5dp"    android:scrollHorizontally="true"    android:singleLine="true"    android:textColor="#000000"    android:textSize="15dp" />     </LinearLayout>     <LinearLayout    android:id="@+id/choosetags_listview_item_rightlayout"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_alignParentRight="true"    android:layout_centerVertical="true" >        <TextView        android:id="@+id/taglistview_item_newnum"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_vertical"        android:text="253"        android:textColor="#000000" >    </TextView>       </LinearLayout></RelativeLayout>    

情形二：垂直布局圖示：

垂直布局方案：

1.外層放一個RealtiveLayout

2.內部三個控制項分別裝進3個LinearLayout中，id設為topayout，midlayout，bottomlayout

   toplayout屬性：android:layout_width="wrap_content"

   bottomlayout屬性：android:layout_width="wrap_content"

   midlayout屬性： android:layout_width="match_parent"

                                   android:layout_below="@+id/toplayout"
                                   android:layout_above="@+id/bottomlayout"

布局：

                             

代碼：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:background="#DCDCDC"    android:orientation="vertical" >        <LinearLayout    android:id="@+id/letter_newtext_toplayout"    android:layout_width="fill_parent"    android:layout_height="45dp"    android:layout_alignParentTop="true"    android:background="#FFFAF0"    android:orientation="horizontal" >                        <TextView            android:id="@+id/letter_newtext_cancel"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center_vertical"            android:layout_marginBottom="5dp"            android:layout_marginTop="5dp"            android:layout_weight="1"            android:gravity="center_horizontal"            android:text="Cancel"            android:textColor="#000000"            android:textSize="16dp" />    <TextView        android:id="@+id/letter_newtext_submit"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_vertical"        android:layout_marginBottom="5dp"        android:layout_marginTop="5dp"        android:layout_weight="1"        android:gravity="center_horizontal"        android:text="Submit"        android:textColor="#000000"        android:textSize="16dp" />                    </LinearLayout>          <LinearLayout          android:id="@+id/letter_newtext_mainlayout"          android:layout_width="fill_parent"          android:layout_height="match_parent"          android:layout_above="@+id/letter_newtext_deliver"          android:layout_below="@+id/letter_newtext_toplayout"          android:orientation="vertical"         >            <EditText        android:id="@+id/letter_newtext_content"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:layout_marginBottom="5dp"        android:layout_marginLeft="5dp"        android:layout_marginRight="5dp"        android:layout_marginTop="5dp"        android:background="@drawable/corners_bg"         android:gravity="top"        android:inputType="textMultiLine"        android:textColor="#000000" /></LinearLayout>       <View           android:id="@+id/letter_newtext_deliver"           android:layout_above="@+id/letter_newtext__bottomlayout"            android:layout_width="fill_parent"            android:layout_height="0.5dp"            android:background="#00BFFF" /><LinearLayout    android:id="@+id/letter_newtext__bottomlayout"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:layout_alignParentBottom="true"    android:layout_marginBottom="5dp"    android:layout_marginTop="5dp"    android:gravity="bottom"    android:orientation="horizontal" >                        <ImageView                    android:id="@+id/letter_newtext_ico_tag"                    android:layout_width="30dp"                    android:layout_height="30dp"                    android:layout_marginLeft="5dp"                    android:background="@drawable/letter_new_ico_maintag" />                                <TextView                    android:id="@+id/letter_newtext_tag_content"                    android:layout_width="match_parent"                    android:layout_height="wrap_content"                    android:layout_gravity="bottom"                    android:layout_marginLeft="5dp"                    android:layout_marginRight="5dp"                    android:textColor="#000000"                    android:textSize="15dp" />               </LinearLayout></RelativeLayout>

當這種情況中間的控制項是一個ScrollView時，也使用這種辦法。就能實現ScrollView充滿上下兩個控制項中間的地區。

 

【Android開發日記】妙用 RelativeLayout 實現3段式布局