Android Basics Getting Started tutorial--2.2.2 relativelayout (relative layout)

Source: Internet
Author: User

Android Basics Getting Started tutorial--2.2.2 relativelayout (relative layout)

tags (space delimited): Android Basics Getting Started Tutorial

Introduction to this section:

In the previous section we made a detailed analysis of LinearLayout, LinearLayout is also our
Using more than one layout, we more often prefer his weight (weight) attributes, such as proportional division, to screen adaptation or
Help pretty big; but when using linearlayout, there is also a problem when the interface is more complex, you need to nest multiple layers of
LinearLayout, which reduces the efficiency of the UI render (rendering speed), and if it is a ListView or a GridView
Item, the efficiency will be lower, and too many layers of linearlayout nesting will occupy more system resources, but also may trigger stackoverflow;
But if we use relativelayout, we may just need one layer to complete, referring to the parent container or sibling component +margin
+padding can set the display location of the component, it is more convenient! Of course, is not absolute, specific problems specific analysis it!
The summary is: try to use Relativelayout + LinearLayout weight properties with it!

1. Core attribute Map

2. Parent Container Positioning Properties

3. Positioning according to sibling components

Well, first of all, what is a brother component, the so-called sibling component is the component of the container at the same level,

The component in the diagram is the sibling component, and component 3 and component 1 or component 2 are not sibling components, so component 3 cannot pass
Component 1 or the other positioning, such as Layout_toleftof = "Component 1" This will be an error! Remember!
The most classic example of this sibling component positioning is the "Plum Blossom Layout", which is implemented under the following code:

Run:

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--        <ImageViewandroid: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--        <ImageViewandroid: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--        <ImageViewandroid:id="@+id/img3"android:layout_width="80DP"  android:layout_height="80DP"android:layout_torightof="@id/img1"  Android:layout_centervertical="true"android:src="@drawable/pic3"/>                                                                                  <!--on top of the middle picture--        <ImageViewandroid:id="@+id/img4"android:layout_width="80DP"  android:layout_height="80DP"android:layout_above="@id/img1"  Android:layout_centerhorizontal="true"android:src="@drawable/pic4"/>                                                                                  <!--in the middle of the picture--        <ImageViewandroid: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>    
The difference between 4.margin and padding

Beginners may be a bit confused about these two properties, which are distinguished here:
First margin represents an offset, such as MarginLeft = "5DP" means that the component is offset from the left edge of the container 5DP;
While padding represents a fill, the filled object is for elements in the assembly, such as the text in TextView
For example, to set paddingleft = "5DP" for TextView, it is to fill 5dp of space on the left side of the element in the component!
Margin is for the components in the container, and the padding is for the elements in the component, to differentiate!
Here's a simple code to demonstrate the difference:

Compare the sample code as follows:

<Relativelayout xmlns:android="Http://schemas.android.com/apk/res/android"        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  =" Bu Tton "/>         <button  android:paddingL EFT  = "100DP"  android:layout_height  =< Span class= "Hljs-value" > "wrap_content"  android:layout_width  = "wrap_content"  android:text  =" button " android:layout_torightof  =" @id/BT N1 "/>         <button  android:id= "@+id/btn2"  android:layout_height  = "wrap_content"  android:layout_width  =" wrap_content " android:text  =" Bu Tton " android:layout_alignparentbottom  =" Tru E "/>         <buttonandroid: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>  

Run comparison:

5. A common point: margin can be set to a negative number

Believe that a lot of friends do not know a bit, usually we set the margin when the habit is positive,
In fact, you can use a negative number, write a simple program below to demonstrate it, after the simulation into the software, pop-up ads
The margin of the Cancle button in the upper-right corner of the page is the use of negative numbers!

As follows:

Put out the layout code of the campaign activity, of course, if you are interested in this can be under the demo,
Because it's just the effect, the code is a bit rough!

<relativelayout  xmlns: Android  = "http://schemas.android.com/apk/res/android"  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  =" #00CCCCFF " >       <imageview  android:id
      = "@+id/imgback"  android:layout_width  =< Span class= "Hljs-value" > "200DP"  android:layout_height  =" 200DP " android:layout_centerinparent  =" true " 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  =/>   </relativelayout>  
This section summarizes:

About the relativelayout of the detailed on to here, there are any flaws, mistakes, good advice, welcome to ask ~
Finally, the following demo code is available for download: Relativelayoutdemo

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Android Basics Getting Started tutorial--2.2.2 relativelayout (relative layout)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.