Shulou(Shulou.com)06/02 Report--

Today, I will talk to you about the layout basis of Android user interface design, which may not be well understood by many people. in order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

Understanding layout is very important for good Android application design. We provide an overview of how the layout fits into the Android application architecture. We also explored specific layout controls that can be used to organize application screen content in a variety of ways.

What is layout?

Android developers use the term "layout" to refer to one of two meanings. Both definitions will be used in this tutorial, and unfortunately they are mixed in the Android development community. The two definitions of layout are as follows:

A resource that defines what to draw on the screen. Layout resources are stored in the XML file under the / res/layout resource directory of the application. A layout resource is simply a template for a user interface screen, or part of a screen, as well as content.

A view class that organizes other controls. These layout classes (LinearLayout,RelativeLayout,TableLayout, etc.) are used to display child controls, such as text controls or buttons or pictures, on the screen.

The Android user interface can be defined as dynamically created by layout resources or programs in XML.

Use Eclipse to design layout resources

Eclipse's Android development plug-in includes a convenient layout resource designer for designing and previewing layout resources. The tool includes two tab views: layout view allows you to preview how it will be displayed under different screens and for each orientation control; and XML view tells you the XML definition of the resource. The layout resource designer is shown below:

Here are some tips for using the layout Resource Editor in Eclipse:

◆ uses the Outline pane to add and remove controls from your layout resources.

◆ selects a specific control (in the preview or summary window) and uses the properties pane to adjust the properties of the specific control.

◆ uses the XML tag to edit the XML definition directly.

It is important to keep in mind that the Eclipse layout resource editor cannot accurately simulate the presentation of the layout to the end user. For this, you must test it in a properly configured simulator and, more importantly, on the target device. And some "complex" controls, including tags or video viewers, cannot be previewed in Eclipse.

Define XML layout resources

The most convenient and maintainable way to design a program's user interface is to create XML layout resources. This access greatly simplifies the UI design process, replacing writing code with the static artifacts and layouts of many user interface controls, as well as the definition of control properties in the XML. It adapts to the potential differences between UI designers (who care more about layout) and developers (understanding Java and implementing application functionality). Developers can still dynamically change the content of the screen when necessary. Complex controls, such as ListView or GridView, usually use programs to process data dynamically.

XML layout resources must be stored under / res/layout in the project directory. It is a common practice to create an XML layout resource for each screen (closely associated with an activity), but it is not necessary. In theory, you can create a XML layout resource and use it in different activities to provide different data for the screen. If necessary, you can also spread out your layout resources and include them in another file.

Here is a simple XML layout resource. A LinearLayout template contains a TextView and an ImageView, defined in XML:

This layout resource indicates that the screen contains two controls: first there is some text, and then there is a picture under it. These controls are organized in a vertical LinearLayout. The following two pictures show the possible styles of this layout under horizontal and vertical screens:

Displaying a layout resource on the screen can be done with a single line of code including onCreate (). If the layout resources are stored in the / res/layout/main.xml file, the code might be:

SetContentView (R.layout.main)

Define layout dynamically with program

You can also use the program to create user interface components. For ease of organization and maintainability, do so only on special occasions, not in general. Instead of directly using the setContentView () method to load layout resources, you must create the screen content and then provide the setContentView () method with a parent layout object containing all the child control content to be displayed.

For example, the following code shows how to instantiate a LinearLayout view with a program and place two TextView inside it. No resources are used.

Public void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); / / setContentView (R.layout.main); TextView label = new TextView (this); label.setText (R.string.my_text_label); label.setTextSize (20); label.setGravity (Gravity.CENTER_HORIZONTAL); ImageView pic = new ImageView (this); pic.setImageResource (R.drawable.matterhorn); pic.setLayoutParams (new LayoutParams (LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); pic.setAdjustViewBounds (true)) Pic.setScaleType (ScaleType.FIT_XY); pic.setMaxHeight (250); pic.setMaxWidth (250); LinearLayout ll = new LinearLayout (this); ll.setOrientation (LinearLayout.VERTICAL); ll.setLayoutParams (new LayoutParams (LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); ll.setGravity (Gravity.CENTER); ll.addView (label); ll.addView (pic); setContentView (ll);}

As you can see, the size of this code will increase rapidly as more control is added to the screen, making the screen content more difficult to maintain and reuse.

Explore different layout types

Now let's turn our attention to layout controls that are useful for organizing other controls. The most commonly used layout classes are:

◆ FrameLayout-used to display a stack of child view controls. Multi-view controls can be added to this layout. It can be used to display multiple controls in the same screen space.

◆ LinearLayout-used to display child view controls in a single row or column. This is a very convenient layout method for creating forms.

◆ RelativeLayout-used to display child view controls relative to each other. For example, you can set one control to be "above" or "below" or "on the left" or "on the right" relative to another control. You can also place child view controls relative to the boundaries of the parent element.

◆ TableLayout-used to organize child view controls into rows or columns. For each row of the table, a single view control is added to each row of the table using the TableRow layout view.

Organize controls with composite layouts

Layout (LinearLayout,TableLayout,RelativeLayout, etc.) is a control like other controls. This means that layout controls can be nested. For example, to organize controls on the screen, you can use a RelativeLayout in a LinearLayout, and vice versa. The following figure shows a screen with a LinearLayout (parent), a TableLayout (top child node), and a FrameLayout (bottom child node).

But be careful! Make sure your screen is relatively simple, complex layouts load slowly and can cause performance problems.

Provide optional layout resources

Consider the differences of devices when you design your program to lay out resources. It is usually possible to design flexible layouts that look good on a variety of devices, whether in vertical or mold mode. If necessary, you can introduce optional layout resources to handle special situations. For example, you can provide different layouts for loading depending on the direction of the device or whether the device has a large screen (such as a network tablet).

For more information on how to use optional resources, check out the documentation on Android SDK's Android resources.

Layout tools and optimization

Android SDK includes several tools that can help us design, debug and optimize layout resources. In addition to the layout resource designer built into Eclipse's Android plug-in, you can use the Hierarchy Viewer (hierarchy Viewer) and layoutopt provided by Android SDK. These tools can be found in your Android SDK / tools directory.

You can use Hierarchy Viewer to see the details of the layout runtime. You can learn more in the Hierarchy Viewer section of the Android developer website.

You can use the layoutopt command line tool to optimize your layout files. Optimizing the layout is important because complex layout files are slow to load. The layoutopt tool simply scans the XML layout file and finds unnecessary controls. See the layoutopt section of the Android developer website for more information.

The Android application user interface is defined using layouts. There are many different types of layout types that can be used to organize controls on the screen. Layouts can be defined using XML resources or by Java programs at run time. Optional layouts can be loaded under special circumstances, such as providing an optional user interface in landscape and vertical mode. A well-designed layout is important for application performance; use Android SDK tools like Hierarchy Viewer and layoutopt to debug and optimize your application layout.

After reading the above, do you have a better understanding of the layout basis of Android user interface design? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.