[Android development diary] uses RelativeLayout to implement a three-segment layout and relativelayout layout.

[Android development diary] uses RelativeLayout to implement a three-segment layout and relativelayout layout.
During the design process, we will often encounter the following requirements:

Three controls are placed in one row. The control on the left is left aligned, and the control on the right is right aligned. The middle control fills in the remaining space.

Or put three controls in a column. The above is aligned with the top, and the bottom is sunk at the bottom. The middle control is elastic and full of space.

Case 1: horizontal layout
Figure:

This is the first case. Because ImageView is involved, it is inconvenient to use the weight attribute of LinearLayout to maintain the original proportion of the image.

Solution:

1. The outer layer is set to RelativeLayout.

2. Add the three controls to three LinearLayout, for example, leftlayout, midlayout, and rightlayout.

Leftlayout attribute: android: layout_width = "wrap_content"

Rightlayout property: android: layout_width = "wrap_content"

Midlayout attribute: android: layout_width = "match_parent"

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

In this way, the controls at both ends are aligned left and right, and the central control is filled with the remaining space.

Effect layout:

Result 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="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>    

Case 2: vertical layout diagram:

Vertical layout scheme:

1. Put a RealtiveLayout on the outer layer.

2. The three internal controls are loaded into three LinearLayout, And the id is set to topayout, midlayout, and bottomlayout.

Toplayout property: android: layout_width = "wrap_content"

Bottomlayout attribute: android: layout_width = "wrap_content"

Midlayout attribute: 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_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>

This method is also used when the intermediate control is a ScrollView. ScrollView is full of the upper and lower control areas.

 

Android development RelativeLayout

RelativeLayout (relative layout), the so-called relative layout, is the position of the above control as a reference, to set the position of the current control.
Common relative layout attributes:
Category 1: true or false (for screen reference)
Android: layout_centerHrizontal
Android: layout_centerVertical
Android: layout_centerInparent
Android: layout_alignParentBottom
Android: layout_alignParentLeft
Android: layout_alignParentRight
Android: layout_alignParentTop
Android: layout_alignWithParentIfMissing
Class 2: the property value must be the reference name "@ id/id-name" of the id (the preceding control is used as a reference)
Android: layout_below
Android: layout_abve
Android: layout_toLeftOf
Android: layout_toRightOf
Android: layout_alignTop
Category 3: attribute values are specific pixel values, such as 30dip and 40px.
Android: layout_marginBottom
Android: layout_marginLeft
Android: layout_marginRight
Android: layout_marginTop

Read the references below and you will know where the error is.
Developer.hi.baidu.com/#/detail/24553059
Reference: 2.16.hi.baidu.com/#/detail/24553059

RelativeLayout in Android Development

// Relative to the given ID Control
Android: layout_above: place the bottom of the control on the control with the given ID;
Android: layout_below: place the bottom of the control under the control with the given ID;
Android: layout_toLeftOf align the right edge of the control with the left edge of the control with the given ID;
Android: layout_toRightOf align the left edge of the control with the right edge of the control with the given ID;

Android: layout_alignBaseline: Align the baseline of the control with the baseline of the given ID;
Android: layout_alignTop: Align the top edge of the control with the top edge of the given ID;
Android: layout_alignBottom: Align the bottom edge of the control with the bottom edge of the given ID;
Android: layout_alignLeft: Align the left edge of the control with the left edge of the given ID;
Android: layout_alignRight: Align the right edge of the control with the right edge of the given ID;
// Relative to the parent component
Android: layout_alignParentTop if it is true, align the top of the control with the top of its parent control;
Android: layout_alignParentBottom: If this parameter is set to true, the bottom of the control is aligned with the bottom of its parent control;
Android: layout_alignParentLeft: if it is true, align the left of the control with the left of its parent control;
Android: layout_alignParentRight: if it is set to true, align the right of the control with the right of its parent control;
// Center
Android: layout_centerHorizontal if true, place the control horizontally in the center;
Android: layout_centerVertical if true, place the control vertically in the center;
Android: layout_centerInParent if true, place the control in the center of the parent control;
// Specify the moving Pixel
Android: layout_marginTop offset value;
Android: layout_marginBottom offset value;
Android: layout_marginLeft value of the left offset;
Android: value of the right offset of layout_marginRight;

Example:
Android: layout_below = "@ id /***"
Android: layout_alignBaseline = "@ id /***"
Android: layout_alignParentTop = true
Android: layout_marginLeft = "10px"

Easy to use