The 13th chapter, the layout layouts the Relativelayout relative layout (from the zero start learns Android)

Source: Internet
Author: User

  Relativelayout Relative layout

Relativelayout is a relative layout, where the position of the control is calculated according to the relative position, where the next control depends on the base position of the previous control, which is the most frequently used and flexible layout of the layout.

  

We have the following examples of XML layout and Java code layout:

First, the layout of XML mode

1. Create a blank activity

  

2. Open the "res/layout/activity_main.xml" file and change it into the following code.

  

(1) Section ①

<?xml version= "1.0" encoding= "Utf-8"; each XML document starts with the XML prologue, and the first line in the preceding code is the XML preamble, <?xml version= "1.0" >. This line of code represents parsing according to the 1.0 version number of the XML rule. encoding = "Utf-8" means that this XML file is encoded in UTF-8 format. The encoding format can also be GB2312.

If you are not sure about this, please refer to the relevant XML document.

(2) Section ②

<relativelayout ... Represents the use of the relative layout manager.

(3) Section ③

Android:layout_width= "Match_parent" android:layout_height= "match_parent" means that the layout manager width and high charge will fill the entire screen width and height.

3. Insert a three button.

Insert three buttons and set their text as "first button", "second button", and "third button", respectively.

  

We next set the first button distance to the left, the top 20DP, the second button to the left of the first button, the top 10DP; the third button is 10DP from the second button and aligns to the left of the second button.

4. Open the "res/layout/activity_main.xml" file and change it into the following code.

  

(1) Section ①

Sets the first button, with the parent element as the datum, snaps to the top left, and the distance is 20DP.

<button        android:id= "@+id/button1"      android:layout_width= "wrap_content"//Width matching content        Android:layo ut_height= "wrap_content"//Height match content        android:layout_alignparentleft= "true"                         //snaps to the left of parent element        Android:layo Ut_alignparenttop= "true"//Snap to parent element top        android:layout_marginleft= "20DP"                              //Set left pitch 20DP        Android:layout_ margintop= "20DP"                               //Set up pitch 20DP        android:text= "first button"/>

(2) Section ②

Set the second button, with the first button as the base, and the first button below, align to the right of the first button, and the distance is 15DP.

<button        android:id= "@+id/button2"        android:layout_width= "wrap_content"//Width matching content        Android:layout_ height= "wrap_content"//Height match content        android:layout_below= "@+id/button1"//Position the following Android on the first button        : layout_torightof= "@+id/button1"//Align to the right of the first button        android:layout_margintop= "15DP"                            //Set up pitch 15DP android: Text= "A second button"/>

(3) Section ③

Set the third button, base on the second button, and below the second button, align to the left of the second button and distance 15DP.

    <button        android:id= "@+id/button3"        android:layout_width= "wrap_content"//Width matching content        Android:layout_ height= "wrap_content"//Height match content        android:layout_below= "@+id/button2"//Position the following Android on the second button        : layout_toleftof= "@+id/button2"//Align to the left of the second button        android:layout_margintop= "15DP"//Set up spacing 15dp
   android:text= "A third button"/>


Finally show effects such as the following:

  

  Attached: relative layout often uses attribute introduction

These attributes are grouped into groups for easy comprehension and memory.
A), first Class: property value is True or False
Android:layout_centerhrizontal Horizontal Center
Android:layout_centervertical Vertical Center
Android:layout_centerinparent is completely centered relative to the parent element
Android:layout_alignparentbottom snaps to the bottom edge of the parent element
Android:layout_alignparentleft snaps to the left edge of the parent element
Android:layout_alignparentright snaps to the right edge of the parent element
Android:layout_alignparenttop snaps to the top edge of the parent element

b), Class II: The attribute value must be the reference name of the id "@id/id-name"
Android:layout_below at the bottom of an element
Android:layout_above at the top of an element
Android:layout_toleftof on the left side of an element
Android:layout_torightof on the right side of an element
Android:layout_aligntop aligns the top edge of this element with the top edge of an element
Android:layout_alignleft aligns the left edge of this element with the left edge of an element
Android:layout_alignbottom aligns the bottom edge of this element with the bottom edge of an element
Android:layout_alignright aligns the right edge of this element with the right edge of an element



c), class III: Attribute values are detailed pixel values, such as 30dip,40px
Android:layout_marginbottom distance from the bottom edge of an element
Android:layout_marginleft distance from the left edge of an element
Android:layout_marginright distance from the right edge of an element
Android:layout_margintop distance from the top edge of an element

The ability to combine these properties to achieve a variety of layouts.

 

The 13th chapter, the layout layouts the Relativelayout relative layout (from the zero start learns Android)

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.