首页 > 代码库 > 【Android开发日记】妙用 RelativeLayout 实现3段式布局
【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=http://www.mamicode.com/"@drawable/tag_ico_movie" />>情形二:垂直布局
图示:
垂直布局方案:
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段式布局