Android user interface design: relative layout

Understanding the layout is important for good Android programming. In this tutorial, you'll learn all about the relative layout, which is used to organize user interface controls or gadgets on the screen relative to other controls or their parent layout. When used correctly, relative layouts can be powerful and flexible layouts, and many interesting Android user interfaces can be designed based on it.

What is the relative layout

In addition to displaying the controls in a row or column of linear layouts, the relative layout is androidhttp://www.aliyun.com/zixun/aggregation/7236.html "> user interface design is a common type of layout." Similar to other layouts, relative layouts can be defined by XML layout resources or by Java programs. The function of a relative layout is the same as its name: it organizes controls relative to other controls or the parent control itself.
What does that mean? It means that child controls, such as Imageview,textview, and button controls, can be placed above another control, below, or to the left or right. Child controls can be placed relative to the parent control (relative to the layout container), including the top of the layout, the bottom, the left, or the right edge.
The relative layout child control location is defined using rules. These rules define how the controls in the relative layout are displayed. A complete list of rules relative to the layout see the Android SDK documentation for the Relativelayout class. Related XML attributes for XML resources can also be found in documents.
Note: The rule requires that each child control properly set its id attribute.

a simple relative layout

The relative layout is best explained using examples. Let's say we're going to design a screen that contains a EditText control and a button control. We want the button to appear to the right of the EditText control. Therefore, we can define a relative layout that contains two child controls: the child controls are EditText and button respectively. The EditText control might have a rule that puts the control on the left hand side of the parent control (layout) and on the left side of the second control (Button). Also, the button control might have a rule that places the control on the right-hand side of the parent control (layout).
The following picture shows a relative layout, which is the vertical screen and the horizontal screen mode. This relative layout has two child controls: a EditText control and a button control.

defines an XML resource file with a relative layout

The most convenient and maintainable way to design a program's user interface is to create an XML layout resource. This approach greatly simplifies the UI design process by moving many static creation and user interface control layouts and the definition of control properties to XML, instead of writing code.
The XML layout resource must be stored in the/res/layout project directory. Let's take a look at the relative layout described in the previous section. This layout resource file, aptly named/res/layout/relative.xml, is defined in XML as follows:

<?xml version= "1.0" encoding= "Utf-8"?> <relativelayout "xmlns:android=" Res/android "android:layout_height=" fill_parent "android:layout_width=" fill_parent "> <EditText android:id=" @ +id/edittext01 "android:hint=" Enter some text ... "android:layout_alignparentleft=" true "android:layout_width=" Fill_ Parent "android:layout_toleftof=" @+id/button01 "android:layout_height=" Wrap_content "></EditText> < Button android:id= "@+id/button01" android:text= "Press here!" android:layout_width= "Wrap_content" Android:layout_ Alignparentright= "true" android:layout_height= "Wrap_content" ></Button> </RelativeLayout>

Recall that in an activity, you simply add a line of code to the OnCreate () method to load and display the layout resources on the screen. If the layout resources are stored in the/res/layout/relative.xml file, this line of code should be:

Setcontentview (r.layout.relative);

This relative layout sets the width and height to fill the entire screen, and its child controls have three rules configured:

EditText01: Align to the left-hand side of the layout EditText01: displayed on the left side of Button01 Button01: Align to the right-hand side of the layout define relative layout by program

You can also use programs to create and configure relative layouts. This is accomplished by using the Relativelayout class (android.widget.Relative). You will find specific parameters in the Relativelayout.layoutparams class. Similarly, the typical layout parameters (Android.view.ViewGroup.LayoutParams), such as Layout_height and Layout_width, and margin parameters (Viewgroup.marginlayoutparams) can also be used on Relativelayout objects.
Instead of using the Setcontentview () method to load a layout resource as shown earlier, you must create the screen content in Java and then provide a Setcontentview () method with a parent layout object that contains all the contents of the control to be displayed as a child view. Here, your parent layout is relative. For example, the following code example shows how to instantiate a relativelayout in an activity with a program and add a TextView and a button control to it in its oncreate () method, just like the layout shown in the previous section:

public void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);//Setcontentview ( r.layout.relative); EditText ed = new EditText (this); Relativelayout.layoutparams params = new Relativelayout.layoutparams (layoutparams.fill_parent, LayoutParams.WRAP_ CONTENT); Params.addrule (Relativelayout.align_parent_left); Use Mahouve ID as tabbed when adding the button Params.addrule (relativelayout.left_of, 1001); Ed.setlayoutparams (params); Ed.sethint ("Enter some text ..."); Button but1 = New button (this); Relativelayout.layoutparams params2 = new Relativelayout.layoutparams (layoutparams.wrap_content, LayoutParams.WRAP_ CONTENT); Params2.addrule (Relativelayout.align_parent_right); But1.setlayoutparams (PARAMS2); But1.settext ("Press here!"); Give the button an ID of that we know But1.setid (1001); Relativelayout layout1 = new Relativelayout (this); Layout1.setlayoutparams (New Layoutparams (Layoutparams.fill_parent, layoutparams.fill_parent)); Layout1.addview (ed); Layout1.addview (BUT1); Setcontentview (LAYOUT1); }

Let's take a closer look at the Java code above. First we create a EditText control as usual. We give it some relativelayout parameters and then set its rules. Here we create 2 rules for the EditText control.
Next, we create a button control and set its rules (Snap to the right edge of the parent layout). Finally, we create a Relativelayout object, set its parameters, use the AddView () method to add two controls, and use the Setcontentview () method to load the display relative layout.
As you can see, as more and more controls are added to the screen, the amount of code grows quickly. For ease of organization and maintainability, it is best to use a program to define and use a layout in a special case rather than a general situation.

discusses the important characteristics and attributes of relative layout

Now let's discuss some of the properties that help configure the relative layout and its child controls. Some specific properties are used for relative layouts, which are child rules, including:

rules for child controls to center in the parent layout, including: horizontally centered, centered vertically, or both. Rules for child controls to be arranged in the parent layout, including: At the top, bottom, left, and right edges. Rules for child controls to be arranged relative to other child controls, including: On top of another control, bottom, left, and right edge. Rules for child controls to place relative to other child controls, including: On top of another control, bottom, left, or right.

Similarly, common Viewgroup-style properties can also be applied to relative layouts. These properties include:

General layout parameters such as layout_height (must) and layout_width (must) (class: Viewgroup.layoutparams) margin layout parameters such as Margin_top, Margin_left, Margin_ Right and Margin_bottom (class: ViewGroup. Marginlayoutparams) layout parameters such as Layout_height and Layout_width (class: Viewgroup.layoutparams)

Now let's practice these rules!

Use layout rules

Let's look at a more complex screen design. For this exercise, we start by looking at the final screen effect and then back to work and discuss the characteristics of the relative layout and the rules used to achieve the final result.

We want to design a screen that looks like this:

To design this screen using a relative layout, refer to the following steps.

Step 1: Define a relative layout in your XML resource file

First, define a relative layout in your XML resource file. Because you want this layout to control the entire screen content, so set its high and wide properties for fill_parent. Your XML resource file should look like this:

<?xml version= "1.0" encoding= "Utf-8"?> <relativelayout "xmlns:android=" Res/android "android:layout_height=" fill_parent "android:layout_width=" Fill_parent "></RelativeLayout> Step 2: Determine the child control

Next, we determine what child controls are needed. Here we need 7 TextView controls (the first color). Configure them as usual, setting the Text property to string, background color, font size, and so on. Place these controls in a relative layout.

Step 3: Define relative layout rules

Next, we define the rules for each child control so that they are drawn to the appropriate location:

RED TextView Control has no special settings. By default, this control is drawn to the upper-left corner of the parent layout. The ORANGE TextView control is centered horizontally in the parent layout. Because all controls default to the upper-left corner of the screen, this effectively navigates the control to the middle of the top edge of the parent layout. The yellow TextView control navigates to the right edge of the parent layout. Because all controls default to the upper-left corner of the screen, this effectively locates the control to the upper-right corner of the parent layout. The GREEN TextView control is centered vertically in the parent layout and is set to appear to the left of the blue TextView control. The BLUE TextView control is positioned at the center of the parent control (horizontal and vertical). This displays it in the center of the screen. The INDIGO TextView control is centered vertically in the parent, and is set to appear to the right of the blue TextView control. The VIOLET TextView control is positioned at the bottom edge of the parent layout. Its width is also set to fill the parent container, allowing it to extend to the bottom edge of the screen.

If you define these rules in your XML resource file, the XML file code looks like this:

<?xml version= "1.0" encoding= "Utf-8"?> <relativelayout xmlns:android= "http://schemas.android.com/apk/res/" Android "android:layout_height=" Fill_parent "android:layout_width=" fill_parent "><textview android:text=" RED "Android:id=" @+id/textview01 "android:layout_height=" wrap_content "android:background=" #f00 "android:gravity=" Center "android:textcolor=" #000 "android:layout_width=" wrap_content "android:padding=" 25DP "></TextView> <textview android:text= "ORANGE" android:layout_height= "wrap_content" android:background= "#ffa500" Android: gravity= "center" android:textcolor= "#000" android:id= "@+id/textview02" android:layout_width= "Wrap_content" Android : Layout_centerhorizontal= "true" android:padding= "25DP" ></textview><textview android:text= "YELLOW" android:layout_height= "Wrap_content" android:background= "#ffff00" android:gravity= "center" android:textcolor= "# "Android:id=" @+id/textview03 "android:layout_width=" wrap_content "android:layout_alignparentright=" TruE "android:padding=" 25DP "></textview><textview android:text=" GREEN "android:layout_height=" Wrap_ Content "android:background=" #0f0 "android:gravity=" center "android:textcolor=" #000 "android:id=" @+id/textview04 " Android:layout_width= "Wrap_content" android:layout_toleftof= "@+id/textview05" android:padding= "25DP" Android: Layout_centervertical= "true" ></textview><textview android:text= "BLUE" android:layout_height= "Wrap_ Content "android:background=" #00f "android:gravity=" center "android:textcolor=" #fff "android:id=" @+id/textview05 " Android:layout_width= "Wrap_content" android:layout_centerinparent= "true" android:layout_margin= "10DP" Android: padding= "25DP" ></textview><textview android:text= "INDIGO" android:layout_height= "Wrap_content" android:gravity= "center" android:textcolor= "#fff" android:id= "@+id/textview06" android:layout_width= "wrap_content "Android:layout_torightof=" @+id/textview05 "android:background=" "#4b0082" android:padding= "25DP" Android:layout_ CenTervertical= "true" ></textview><textview android:text= "VIOLET" android:layout_height= "Wrap_content" Android:background= "#ee82ee" android:gravity= "center" android:textcolor= "#000" android:id= "@+id/textview07" Android:layout_alignparentbottom= "true" android:layout_width= "Fill_parent" android:padding= "25DP" ></ Textview></relativelayout>

relative layout using tips

Here are some tips for using relative layouts.

a child control relative to a layout must have a unique id attribute to make the rule apply correctly. Beware of circular rules. A circular rule occurs when two controls have rules that point to each other. If you use the circular rule in the layout design, you will get the following error message:

illegalstateexception:circular dependencies cant exist in a relativelayout (no cyclic dependencies are allowed in the relative layout)

recall that the application of relative layout rules is very useful to keep your relative layout rules minimized. This reduces the probability of looping rules and makes your layout more maintainable and flexible. In general, remember to test your layout design in both horizontal and vertical mode, as well as in different screen sizes and solutions that are not in line with expectations. Use relative layouts instead of nested linear layouts to improve program performance and responsiveness. Summary

The Android user interface is defined using layouts, which are one of the types of layouts that make the program screen more flexible and powerful. Relative layouts allow child controls to be organized relative to other child controls and relative to the parent control (the edge and center horizontally and vertically). Once you have mastered the rules of how to use relative layouts, they can be very useful, enabling you to create complex layouts without having to embed different layouts and therefore improve performance. [中文版]

Reprint Please specify:
Author: rockux–web Front end
From: Android user interface design: relative layout