"Android Development Diary" magical relativelayout Implementation of 3-segment layout

In the design process, we often encounter such requirements:

Put a line 3 control, left-aligned left control, right-aligned right control, middle control, to fill the remaining space.

Or a column of 3 controls, the top is aligned with the upper, the following sink at the bottom, the middle control is elastic. Fill the remaining space.

situation One: horizontal layout
Icon:

This is the first case. Because it involves ImageView. Want to keep the picture original proportions inconvenient to use LinearLayout's weight attribute.

The workaround:

1. Outer set of a relativelayout

2. Three controls are loaded into 3 linearlayout respectively. If the IDs were leftlayout,midlayout,rightlayout

Leftlayout property: Android:layout_width= "Wrap_content"

Rightlayout property: Android:layout_width= "Wrap_content"

Midlayout property: Android:layout_width= "Match_parent"

android:layout_toleftof= "@+id/rightlayout"
android:layout_torightof= "@+id/leftlayout"

This allows you to align the control to the left and right sides respectively. The middle control fills the effect of the remaining space.

Layout diagram of the effect:

The code for the effect:

<?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" Androi        D: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_heigh t= "30DP" android:layout_gravity= "center_vertical" android:layout_marginbottom= "2DP" Android:layout_ma rginleft= "5DP" android:layout_marginright= "5DP" android:layout_margintop= "2DP" Android:contentdescrip tion= "@string/app_name" android:src= "@drawable/tag_ico_movie"/> </linearlayout><linearlayout and Roid:id= "@+id/choosetags_listview_item_midlayout "android:layout_width=" match_parent "android:layout_height=" Fill_parent "Android:layout_centerVer Tical= "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:focusableintouchmod    E= "true" android:gravity= "center_vertical" android:marqueerepeatlimit= "Marquee_forever" android:paddingEnd= "5DP" Android:paddingstart= "5DP" android:scrollhorizontally= "true" android:singleline= "true" android:textcolor= "#000 "Android:textsize=" 15DP "/> </LinearLayout> <linearlayout android:id=" @+id/choosetags_listvi Ew_item_rightlayout "Android:lAyout_width= "Wrap_content" android:layout_height= "Wrap_content" android:layout_alignparentright= "true" Android:la Yout_centervertical= "true" > <textview android:id= "@+id/taglistview_item_newnum" android:layout _width= "Wrap_content" android:layout_height= "wrap_content" android:layout_gravity= "center_vertical" a ndroid:text= "253" android:textcolor= "#000000" > </TextView> </linearlayout></relativelay     Out>

Scenario Two: Vertical layout diagram:

Vertical Layout scheme:

1. Put a realtivelayout in the outer layer

2. Internal three controls are loaded into 3 linearlayout, with ID set to Topayout. Midlayout,bottomlayout

Toplayout property: Android:layout_width= "Wrap_content"

Bottomlayout property: Android:layout_width= "Wrap_content"

Midlayout property: Android:layout_width= "Match_parent"

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

Layout:

Code:

<?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_widt            H= "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" Andro id:text= "Submit" android:textcolor= "#000000" android:textsize= "16DP"/> </linearlay out> <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" > &lt ; EditText android:id= "@+id/letter_newtext_content" android:layout_width= "Fill_parent" Android:layout_h    eight= "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" and Roid:inputtype= "Textmultiline" android:textcolor= "#000000"/></linearlayout> <view Android Oid: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"/><line Arlayout 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_mar               ginright= "5DP" android:textcolor= "#000000" android:textsize= "15DP"/> </LinearLayout></RelativeLayout>

This is also used when the middle control is a scrollview in such a situation.

You can achieve ScrollView fills the middle of the top and bottom two control areas.

Copyright notice: This article blog original article. Blogs, without consent, may not be reproduced.

"Android Development Diary" magical relativelayout Implementation of 3-segment layout