Android basics: relative layout manager RelativeLayout

Relative layout manager is a layout manager based on a reference point. Just like the relative path concept in Web development, it is created based on a certain reference point. In Android, the relative layout manager is the layout manager on the top, bottom, left, right of a reference point.

The following describes the document of RelativeLayout:

Its Inheritance structure is:

 
 

  
  
java.lang.Object 
  
  
   ↳ android.view.View 
  
  
   ↳ android.view.ViewGroup 
  
  
   ↳ android.widget.RelativeLayout 
 
 

Next, we will create a new project in Eclipse to see how to use the relative layout manager RelativeLayout:

 
 

  
  
<?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:orientation="vertical" > 
  
  
    <ImageView 
  
  
        android:id="@+id/img1" 
  
  
        android:layout_width="wrap_content" 
  
  
        android:layout_height="wrap_content" 
  
  
        android:src="@drawable/ic_launcher" /> 
  
  
    <ImageView 
  
  
        android:id="@+id/img2" 
  
  
        android:layout_width="wrap_content" 
  
  
        android:layout_height="wrap_content" 
  
  
        android:src="@drawable/google_plus" 
  
  
        android:layout_toRightOf="@+id/img1" /> 
  
  
</RelativeLayout> 
 
 

In main. in xml, the layout manager is declared as RelativeLayout, and two ImageView components are created to display two images. The layout_toRightOf attribute is set on the second ImageView component, that is to say, set the value of the component ID relative to the right of a component. In this case, the position of img2 relative to img1 is the right. Run the program below and we can see the following results:

Obviously, the second image is placed on the right of the first image, and a TextView component is added to the Code below:

 
 

  
  
<TextView android: id = "@ + id/txt"
  
  
Android: layout_width = "wrap_content"
  
  
Android: layout_height = "wrap_content"
  
  
Android: text = "some text is displayed here"
  
  
Android: layout_below = "@ + id/img2"/>
 
 

This component is also very simple. We have set the layout_below attribute, which indicates that it should be placed under the second image. Then, run the program and we will get the following display results:

No problem. The text is indeed below the second image, but it is displayed at the top. If the first image is smaller than the second one, it will produce a coverage effect, let's take a look at the adjusted position. The adjusted code is:

 
 

  
  
<ImageView
  
  
Android: id = "@ + id/img1"
  
  
Android: layout_width = "wrap_content"
  
  
Android: layout_height = "wrap_content"
  
  
Android: src = "@ drawable/ic_launcher"
  
  
Android: layout_toRightOf = "@ + id/img2"/>
  
  
<ImageView
  
  
Android: id = "@ + id/img2"
  
  
Android: layout_width = "wrap_content"
  
  
Android: layout_height = "wrap_content"
  
  
Android: src = "@ drawable/google_plus"/>
  
  
<TextView android: id = "@ + id/txt"
  
  
Android: layout_width = "wrap_content"
  
  
Android: layout_height = "wrap_content"
  
  
Android: text = "some text is displayed here"
  
  
Android: layout_below = "@ + id/img1"/>
 
 

Here we will not explain the meaning of the code and run it directly. We can see that:

If the first image is displayed, you need to set it again:

 
 

  
  
<TextView android: id = "@ + id/txt"
  
  
Android: layout_width = "wrap_content"
  
  
Android: layout_height = "wrap_content"
  
  
Android: text = "some text is displayed here"
  
  
Android: layout_below = "@ + id/img1"
  
  
Android: layout_toRightOf = "@ + id/img2"/>
 
 

Run the program again and we can see the following results:

The text is under img1 and on the right of img2. At this time, there is space on the lower side of the text and on the right side of img2. We will place another Button component:

 
 

  
  
<Button
  
  
Android: id = "@ + id/btn"
  
  
Android: layout_width = "wrap_content"
  
  
Android: layout_height = "wrap_content"
  
  
Android: text = "button"
  
  
Android: layout_below = "@ + id/txt"
  
  
Android: layout_toRightOf = "@ + id/img2"/>
 
 

Run the program again and we will get the following results:

Like other layout managers, we can use Java code to control the relative layout manager. The following describes the document of RelativeLayout. LayoutParams:

Its Inheritance structure is:

 
 

  
  
java.lang.Object 
  
  
   ↳ android.view.ViewGroup.LayoutParams 
  
  
   ↳ android.view.ViewGroup.MarginLayoutParams 
  
  
   ↳ android.widget.RelativeLayout.LayoutParams  
 
 

You only need to set some rules when controlling the relative layout manager in the code, that is, the layout_toRightOf and layout_below shown above. Let's take a look at the code below:

 
 

  
  
Package org. ourpioneer;
  
  
Import android. app. Activity;
  
  
Import android. OS. Bundle;
  
  
Import android. view. ViewGroup;
  
  
Import android. widget. EditText;
  
  
Import android. widget. RelativeLayout;
  
  
Public class RelativeLayoutDemoActivity extends Activity {
  
  
@ Override
  
  
Public void onCreate (Bundle savedInstanceState ){
  
  
Super. onCreate (savedInstanceState );
  
  
Super. setContentView (R. layout. main); // read the existing layout manager
  
  
RelativeLayout relativeLayout = (RelativeLayout) super
  
  
. FindViewById (R. id. rLayout); // obtain the relative layout manager rLayout
  
  
RelativeLayout. LayoutParams params = new RelativeLayout. LayoutParams (
  
  
ViewGroup. LayoutParams. FILL_PARENT,
  
  
ViewGroup. LayoutParams. FILL_PARENT); // you can specify the parameters of the layout manager.
  
  
Params. addRule (RelativeLayout. BELOW, R. id. btn); // you can specify a placement rule.
  
  
EditText edit = new EditText (this); // create the EditText component
  
  
RelativeLayout. addView (edit, params );
  
  
}
  
  
}
 
 

Before writing code, we need. in xml, add the ID attribute (rLayout) for our layout manager. Then we can control it in the Code. Here, we add components in the existing layout manager, that is, to place an edit box under the button, we set the layout manager parameters to FILL_PARENT, that is, to fill the entire screen, and then the rule is located at the lower side of btn, then add the component to the layout manager and run the program. We can see that: