2.2.2 RelativeLayout (Relative Layout)
Category Android Basic Tutorial
Introduction to This Section
In the previous section, we conducted a detailed analysis of LinearLayout, which is also a layout we use quite often. We are more fond of its weight attribute, which divides the screen proportionally and is quite helpful for screen adaptation. However, when using LinearLayout, there is a problem: when the interface is more complex, it is necessary to nest multiple layers of LinearLayout, which will reduce the efficiency of UI rendering speed. Moreover, if it is an item on a listview or gridview, the efficiency will be even lower. In addition, too many nested layers of LinearLayout will occupy more system resources and may even cause a stack overflow. But if we use RelativeLayout, it may only take one layer to complete, with reference to the parent container or sibling components + margin + padding to set the display position of the components, which is quite convenient! Of course, it's not absolute, analyze specific problems specifically! In summary: try to use RelativeLayout + the weight attribute of LinearLayout together!
1. Core Attribute Diagram
2. Parent Container Positioning Attribute Diagram
3. Positioning Based on Sibling Components
Let's first talk about what a sibling component is. The so-called sibling component is a component in the same level container, as shown in the figure.
The components 1 and 2 in the figure are sibling components, while component 3 is not a sibling component of component 1 or 2, so component 3 cannot be positioned through component 1 or 2, such as layout_toleftof = "Component 1" which will result in an error! Remember! The most classic example of this sibling component positioning is the "plum blossom layout", the following code implements it:
Running effect picture:
Implementation code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- This is in the center of the container -->
<ImageView
android:id="@+id/img1"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerInParent="true"
android:src="@drawable/pic1"/>
<!-- To the left of the middle picture -->
<ImageView
android:id="@+id/img2"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_toLeftOf="@id/img1"
android:layout_centerVertical="true"
android:src="@drawable/pic2"/>
<!-- To the right of the middle picture -->
<ImageView
android:id="@+id/img3"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_toRightOf="@id/img1"
android:layout_centerVertical="true"
android:src="@drawable/pic3"/>
<!-- Above the middle picture-->
<ImageView
android:id="@+id/img4"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_above="@id/img1"
android:layout_centerHorizontal="true"
android:src="@drawable/pic4"/>
<!-- Below the middle picture -->
<ImageView
android:id="@+id/img5"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_below="@id/img1"
android:layout_centerHorizontal="true"
android:src="@drawable/pic5"/>
</RelativeLayout>
4. The Difference Between Margin and Padding
Beginners may be a bit confused about these two properties, so let's distinguish them here: Firstly, margin represents the offset, such as marginleft = "5dp" which means the component is offset 5dp from the left edge of the container; Padding, on the other hand, represents the filling, and the object of the filling is the element inside the component, such as in a TextView, for example, setting paddingleft = "5dp" is to fill a 5dp space on the left side of the element inside the component! Margin is for the components in the container, and padding is for the elements inside the component, they should be distinguished! The following is a simple code demonstration of the difference
android:background="@drawable/myicon" />
<ImageView
android:id="@+id/imgCancle"
android:layout_width="28dp"
android:layout_height="28dp"
android:layout_alignRight="@id/imgBack"
android:layout_alignTop="@id/imgBack"
android:background="@drawable/cancel"
android:layout_marginTop="-15dp"
android:layout_marginRight="-10dp" />
</RelativeLayout>
Summary of This Section:
That concludes the detailed explanation of RelativeLayout. Any omissions, errors, or good suggestions are welcome.
Finally, here is the demo code from above for download: RelativeLayoutDemo
1.0.1 Latest Android Basic Tutorial Table of Contents for 2015
1.5.1 Git Tutorial on Basic Operations of Local Repositories
1.8 Project-Related Analysis (Various Files, Resource Access)
2.2.2 RelativeLayout
[2
4.4.2 Further Exploration of ContentProvider - Document Provider
5.2.1 Detailed Explanation of Fragment Example - Implementation of Bottom Navigation Bar (Method 1)
5.2.2 Detailed Explanation of Fragment Example - Implementation of Bottom Navigation Bar (Method 2)
5.2.3 Detailed Explanation of Fragment Example - Implementation of Bottom Navigation Bar (Method 3)
5.2.4 Detailed Explanation of Fragment Example - Bottom Navigation Bar + ViewPager for Page Swiping
6.2 Data Storage and Access - SharedPreferences for Saving User Preferences
6.3.1 Data Storage and Access - First Encounter with SQLite Database
6.3.2 Data Storage and Access - Another Look at SQLite Database
7.1.1 Android Network Programming Essentials and Http Protocol Learning
[8.3
11.0 "2015 Latest Android Basic Tutorial" Completion Celebration~
12.2 DrySister Girl Viewing App (First Edition) - 2. Parsing Backend Data
12.4 DrySister Girl Viewing App (First Edition) - 4. Adding Data Caching (Integrating SQLite)