RelativeLayout (relative layout)
Introduction to this section
In the previous section we analyzed LinearLayout in detail, LinearLayout is also our It is a layout that is used more often. We are more fond of its weight attribute. It is divided into equal proportions and adapted to the screen. It is quite helpful; but there is also a problem when using LinearLayout, that is, when the interface is more complex, multiple layers need to be nested. LinearLayout, this will reduce the efficiency (rendering speed) of UI Render, and if it is on a listview or GridView item, the efficiency will be lower, and too many levels of LinearLayout nesting will occupy more system resources and may cause stackoverflow; But if we use RelativeLayout, it may only need one layer to complete, refer to the parent container or sibling component + margin +padding can set the display position of the component, which is more convenient! Of course, it is not absolute. Let’s analyze the specific issues in detail! The summary is: Try to use the weight attribute of RelativeLayout + LinearLayout !
Core attribute diagram
2. Parent container positioning attribute diagram
3. Positioning based on sibling components
Well, let’s first talk about what sibling components are. The so-called sibling components are components in the same level container, as shown in the figure
Components 1 and 2 in the picture are brother components, and component 3 is not a brother component to component 1 or component 2, so component 3 cannot pass Component 1 or 2 for positioning, for example layout_toleftof = "Component 1" will report an error! Remember! The most classic example of the positioning of this brother component is the "plum blossom layout". The following code is implemented:
Running rendering:
Implementation code:
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- 这个是在容器中央的 -->
<ImageView
android:id="@+id/img1"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerInParent="true"
android:src="@drawable/pic1"/>
<!-- 在中间图片的左边 -->
<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"/>
<!-- 在中间图片的右边 -->
<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"/>
<!-- 在中间图片的上面-->
<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"/>
<!-- 在中间图片的下面 -->
<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 little confused about these two attributes. Let’s distinguish them here: First of all, margin represents the offset. For example, marginleft = "5dp" means that the component is offset by 5dp from the left edge of the container; Padding represents filling, and the filling object is for the elements in the component, such as the text in TextView For example, setting paddingleft = "5dp" for TextView will fill 5dp space on the left side of the element in the component! Margin is for the components in the container, while padding is for the elements in the components. They need to be distinguished! The following demonstrates the difference between the two through simple code:
Comparison example code is as follows:
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<Button
android:id="@+id/btn1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button"/>
<Button
android:paddingLeft="100dp"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button"
android:layout_toRightOf="@id/btn1"/>
<Button
android:id="@+id/btn2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button"
android:layout_alignParentBottom="true"/>
<Button
android:layout_marginLeft="100dp"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button"
android:layout_toRightOf="@id/btn2"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
Comparison of running renderings:
5. A very common point: margin can be set to a negative number
I believe many friends don’t know this A little bit, we are usually used to positive numbers when setting margin. In fact, you can use negative numbers. Let’s write a simple program to demonstrate. After entering the software, an advertisement will pop up. On the page, the margin of the cancel button in the upper right corner uses negative numbers!
The renderings are as follows:
The layout code of the advertising Activity posted. Of course, if you are interested in this, you can download the demo. Because it is just to achieve the effect, the code will be a little rough!
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.jay.example.relativelayoutdemo.MainActivity"
android:background="../style/images/android-tutorial-relativelayout.html">
<ImageView
android:id="@+id/imgBack"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
android:background="../style/images/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="../style/images/cancel"
android:layout_marginTop="-15dp"
android:layout_marginRight="-10dp" />
</RelativeLayout>
本节小结：
关于RelativeLayout的详解就到这里，有什么纰漏，错误，好的建议，欢迎提出~ 最后提供下上面的demo代码供大家下载：RelativeLayoutDemo
