【Android开发日记】妙用 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充满上下两个控件中间的区域。