Android: An efficient UI is a pull-wind UI (i)

In the blog Park for a long time, think or should be more time to write several small blog to repay the platform.

Opening

Android is a mobile terminal operating system, the biggest difference with the traditional PC is the mobile terminal resource shortage problem "comparison" obvious, of course, for some of the cock silk models, should be "very" to describe the reliable. So often appear in some less youthful vitality of the old machine, run some software is abnormal termination of the situation; However, as the Internet manufacturers, the vast number of cock wire machine Users is certainly a large user resources, this is to give up the market?! Of course not O (╯-╰) o, so we want to improve the efficiency of the software as much as possible to win the customer's smile, Dick Silk is also a customer!

This blog mainly describes how to improve the efficiency of UI design, reduce the use of resources, after all, in the end of the shortage of resources today, efficiency is always king. We judge a UI interface that is not as complex as it is, or how flashy it is, and a simple, yet extraordinary, and efficient UI interface is a very grey and awesome interface design.

Introduced

In Android applications, writing an interface in hard-coded ways is not a recommended approach. Of course, the hard-coded interface is more efficient and flexible than the XML-based soft-coded interface, but it's not easy to maintain, and the intricacies of the code will make the program bury the Thunder, and the application may be blown up in one day. So if it's very necessary to be very sure that you want to write hard-coded interfaces in code, it's better to write in an easy-to-maintain XML.

Therefore, in the context of UI optimization design to the end of the XML layout file optimization design.

In the development environment that Google gives us, there is such a very useful tool-hierarchyviewer, it is estimated that many people do not respond to the hidden in the remote corner of the gadget bar, it can be very easy to help us analyze the UI interface structure and construction efficiency, The location of this tool is in the sdk/tools/folder.

Downstairs:

Hello everyone, I am the figure ~

This is the analysis of a layout of only a TextView component of the XML interface, the figure tells us that the construction of the interface has a total of four components, that is, the need to draw four components, the natural drawing of components each time the need to consume resources.

The following step into the theme part of the crazy drag-and-drop bombing day ....

----------------------------------I am the split line-------------------------the king of the ground tiger---------------------------------------------------- ---------

Try to complete the layout with minimal steps

I am a good youth of the society, I for the country province resources; Of course, as components also need this awareness, each component of the drawing will be more or less cost the terminal resources. So we can not listen to the ancestor's words here: Han Xin soldiers of more and more, streamline is the only way to UI design. Don't believe it? Yes! Let's start with a comparison example.

Suppose the project needs a button like this:

Isn't that easy? A few lines of code is not a matter of minutes?

<RelativelayoutAndroid:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"android:gravity= "Center" >    <ButtonAndroid:id= "@+id/button1"Android:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"Android:background= "@drawable/btn_backgroup"         />    <ImageViewAndroid:id= "@+id/imageview1"Android:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"Android:layout_alignparentleft= "true"android:layout_centervertical= "true"android:src= "@drawable/header_back" /></Relativelayout>

Also don't hurry to see code, more tired more hurt eyes, directly last hierarchyviewer inside of the figure to see Bai

A small button on the use of 3 components to draw, this is the complexity of 3N ah, if there are 5 such a button will be 15 components, if there are 10 buttons will have 30, if there are n++, ah mom, I dare not imagine going on. In this case, we should consider optimization optimization, the data we found that the original can be implemented without so many components of this button.

< Button     Android:id = "@+id/button1"     android:layout_width= "Wrap_content"    android:layout_height= "Wrap_ Content "    android:background=" @drawable/btn_backgroup "    android: Drawableleft= "@drawable/header_back"    android:gravity= "center"     android:padding = "10DP"    />

According to international practice, the second floor

or the original button, or the original flavor, complexity from 3N down to n!!! You dare say such efficiency you do not want to ascend????

Summary One: When we design the UI layout, we should start with as few components as possible , because the packaging of the system components is relatively perfect, a number of simple components to a complex set of components to achieve, it can be better efficiency. Because each component needs to be drawn on its own, multiple components draw a waste of resources not only to kill our application, but also to deeply attack the self-esteem of the user who can't afford the high-end machine-"fuck, this software can't be used!" “。

You're not working? Quit you.

Do we still remember a picture we just started? What we use in the layout is just a textview, and relativelayout looks like nothing's working ...

We have never advocated the non-work of rates and the unspoken rules of the software industry. Because of the sense of justice in building a harmonious society, we certainly cannot sit idly by and relativelayout this kind of rogue behavior standing manger, so we need to use a solution--<merge> tag, it can help us to kill some unnecessary root node. In order to have a better sense of vision, so I used a more complex layout (in fact, it is not complicated),

Main layout XML file:

<Framelayoutxmlns:android= "Http://schemas.android.com/apk/res/android"Android:id= "@+id/layout1"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent"    >    <ImageViewAndroid:id= "@+id/image1"Android:layout_width= "Match_parent"Android:layout_height= "Wrap_content"android:src= "@drawable/bg"        />    <Com.net168.text.MyLayoutAndroid:id= "@+id/layout2"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent"        >    </Com.net168.text.MyLayout></Framelayout>

Composite control layout XML file:

<LinearLayoutxmlns:android= "Http://schemas.android.com/apk/res/android"Android:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"android:orientation= "Horizontal"    >    <ButtonAndroid:id= "@+id/button2"Android:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"Android:text= "Button2"        />    <TextViewAndroid:id= "@+id/text1"Android:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"Android:text= "Text1"Android:textcolor= "#ff0000"        /></LinearLayout>

This interface is ugly, can't bear to look directly at:

Ugly and ugly, we still need to continue to use the artifact Hierarchyviewer look at this XML generated interface structure to explore the colorful world of the ugly woman's heart ~~~~~~~

Holy.... Three components of the layout of the use of six layers of nested layout, an instant with a big flower girl married to the old Bachelor of a deep sense of waste. We start to look at the diagram, the first and second layer of the components are automatically generated by the system, this is a certainty cannot discuss things, unless you go to the bottom to talk to them. but the third layer of the framelayout and the fifth floor of the linearlayout is completely in the self-show existence , so we want to ruthless down their hearts to do away with them, how to come? Use <merge> tags.

Since the <merge> tag can only be used as the root element, we can modify the two root elements slightly, as follows:

Main layout XML file:

<Mergexmlns:android= "Http://schemas.android.com/apk/res/android"Android:id= "@+id/layout1"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent"    >    <ImageViewAndroid:id= "@+id/image1"Android:layout_width= "Match_parent"Android:layout_height= "Wrap_content"android:src= "@drawable/bg"        />    <Com.net168.text.MyLayoutAndroid:id= "@+id/layout2"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent"        >    </Com.net168.text.MyLayout></Merge>

Composite control layout XML file:

<Mergexmlns:android= "Http://schemas.android.com/apk/res/android"Android:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"    >    <ButtonAndroid:id= "@+id/button2"Android:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"Android:text= "Button2"        />    <TextViewAndroid:id= "@+id/text1"Android:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"Android:text= "Text1"Android:textcolor= "#ff0000"        /></Merge>

PS: Note the need to add a sentence setorientation (linearlayout.horizontal) to the class of the combined control to guarantee the horizontal arrangement of the components.

Continue to use the artifact to look at the structure:

Exhale ~ ~ is not from the six floor down to four layers of structure, good a small fresh feeling ah, I feel very comfortable, natural efficiency of ascension is no doubt drip ....

Summary One:<merge> tags can be replaced <FrameLayout> this layout component, for non-complex other layout components such as linear layout and other composite components, you can set their properties in the inheritance subclass can also be used <merge> tags,<merge> tags do not account for resources, naturally in the generation of the interface will not generate corresponding components . It is also important to note that <merge> can only be used as a root element , and for a layout file to be generated with inflate, you must specify a viewgroup as its parent element. And to set the Attachtoroot parameter of inflate to true. (Refer to inflate (int, ViewGroup, Boolean)).

Enjoy wind chimes
Source: http://www.cnblogs.com/net168/
This article is copyright to the author and the blog Park, Welcome to reprint, but without the consent of the author must retain this paragraph statement, and in the article page obvious location to the original connection, or next time not to you reproduced.

Android: An efficient UI is a pull-wind UI (i)