Android layout optimization.

Come from:

Introduction

With a Android screen must be a nightmare, like those who engage in webpage design to toss about all kinds of browsers, and to set up with, in fact, think of it this way, with the Android screen really and the webpage design to set with no different from the &hellip browser; recently, in the writing of a small frame by binding tag command in view, specific to the API document, for those who sleep in the API document with the method!

1 do not put things right once and for all solution!

There are often concerned about the Android official documents, must know that soon after the release of android4.0, officially launched a set of UI design tutorials,

The official original: Android Design

Non official simplified Chinese version: non simplified Chinese version of the official

6 inch e-ink PDF version: 6 inch version

Some people will say, this is not a UI design? This is art and design to do, what is the relationship with our program piano ape!!!!

Want to know about a program ape design, this problem, do not discuss, however, personal experience, sometimes, may be a flash of inspiration, solve a problem..

A lot of people are trying to set up the screen, to find a general solution, it is a pity, even if is the official could not provide such help, not to mention our bitter forced programmers, there is a small story, we all know that Instagram, Android version of it, have a interview, the initial Instagram he said, every day I received the most user feedback is why can't run, in his Android mobile phone. However, I have arranged with hundreds of Android mobile phone.!!!

So, want to find a broad road is almost impossible, however, we can fix the internal strength, appear problem, not terrible, terrible is unable to solve the problem, then, I will talk about some of the screen with the wise remark of an experienced person.

How many kinds of screen has 2 of the world?

Every day we how to set up the match screen, then this world has how many screens to let us go with? The following application of the latest information of an official: interested can directly to the:Screen distribution of official statistics

Take 2012/5/7

chart

ldpi    mdpi    hdpi    xhdpi
small    2.3%        2.4%   
normal    0.7%    26.2%    57.8%    0.9%
large    0.3%    2%       
xlarge        7.4%       


At first many people this figure must be wondering, why not resolution? What the hell is this data, the people how to set up the match screen! When buying a mobile phone can no one will say ” Hello, I want a Normal screen size, density is the best hdpi mobile phone”.

The description is too vague!!! This is probably why with a Android screen is a very difficult matter, what is Normal, what is hdpi, if not understand, friends, I recommend you go to have a look of official documents:Supporting Multiple Screens

Some things even official told us, why bother to repeat.?

By the way, a DPI online tools: DPI Calculator / PPI Calculator probably calculate, the resolution of the mobile phone at any interval, as for the details, I suggest you go to the official document, which has been made very clear.!!

Unexpectedly, the official document writing, and you write what ah! Then began to say some development encountered.

3 a Bureau

1,Create a new Android project, to create a new Activity that options! And then use the simulator to run the project what!?!!

You're not wrong, remember to do is right … because, today, we are going to talk about how to optimize and compatible with View, so, all starting from the study of View!

2,Open the hierarchyviewer

This is a help to optimize the view very important tool, most of the time the next, will stay on the tool, this tool hierarchyviewer.bat Android SDK sleep in the directory tools, or search the hard disk that Everything tools directly to find!

3,Analysis

Remember our first step operation of the project? Then artifact that use hierarchyviewer, you can export the chart!

H


This picture is one of our Hello, View layout and structure of the World project, on HierarchyViewer you click on each button will have layout information, very detailed, so, here for an introduction to hierarchyViewer so far! Detailed use about this tool, please refer toDebugging and Profiling User Interfaces Do not repeat them here!

4,How good a bureau of cloth?

Of this I am in development sums up some

1 read API document!

The layout of this thing is not cool things, than who layout more complex, the man is good, complete with a minimum number of steps, the design requirements, it should be every Android programmer purpose!!

Case one: do a back button with the arrow

Manager: that little and ah, you according to this design make a button

   image

Small and: This is not a simple three minutes

So less than Bob, knocking the following code

<RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" > <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/btn_headtita" android:textColor="#ffffff" android:text="@string/back" /> <ImageView android: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>


Look at the code is tired, we just introduced hierarchyviewer to analyze, this button to have what problem!

image

From this picture, we can see that, for such a button we used three node of view to finish! Hypothesis, a view we have three similar button means that we should use the 9 node to complete, we can simply that this is a 3N class complexity layout, we can try to optimize it?

Skills: familiar with the official API documentation!

Personal advice, all parameters of common Widget try to understand again! When reading the official document we found Button, a can put the drawing on the left side of the parameter: android:drawableLeft

Then, we optimized the little and code

<Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/btn_headtita" android:drawableLeft="@drawable/header_back" android:gravity="center" android:padding="10dp" android:text="@string/back" android:textColor="#ffffff" />

Using hierarchyviewer to analyse

image

The moment a 3N layout complexity, turned into a N complex! So, I suggest you Android development friends, considering the optimization of time the content well and the API document inside the heart, otherwise, so toss down, it is a waste of time!

Careful friends may ask: android:padding= "10dp" this used to do.?

I want to tell you, do not use this parameter: you will see:

image

Used after the:

image

This you can see?

So, when you lay out, if when more complicated, you think will have API itself has such parameters.?

Simple is the most important principle of all the layout started!

Simple means not prone to compatibility problems!

Simplicity means that good performance!

2 modular layouts

480x800_MarkMan

The so-called, modular layouts is that you are familiar with the use of <include /> this tag!

A classical class Tab layout consists of three parts, the three part we can create three can reuse the layout according to the

head_menu.xml

content_showweibo.xml

bottom_menu.xml

Then we can be a very flexible combination we want to display, for example, to finish the Weibo layout.

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <include android:id="@+id/head_menu" layout="@layout/head_menu" /> <include android:id="@+id/content" layout="@layout/content_showweibo" /> <include android:id="@+id/bottom_menu" layout="@layout/bottom_menu" /> </LinearLayout>

Skilled use <include /> tags can greatly reduce our future all maintenance work!

Node 3 with unnecessary

Remember the project we started.?

image


In the efficient layout inside, there is a rule is, as far as possible to reduce node!!!! as shown in the figure, we find, in fact LinearLayout is actually what didn't do, but we spent so little performance to draw the node so useless!

Next, we in order to eliminate this node, we need such a tag

<merge ></merge>

Modify our code to make it, better performance!

<?xml version="1.0" encoding="utf-8"?> <merge xmlns:android="http://schemas.android.com/apk/res/android" > <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/btn_headtita" android:drawableLeft="@drawable/header_back" android:gravity="center" android:layout_gravity="center_vertical|center_horizontal" android:padding="10dp" android:text="@string/back" android:textColor="#ffffff" /> </merge>

Open the hierarchyviewer at!

image

Oh also! Optimization of a node! And show a little bit faster then...

5 Summary

Speak, so a lot of things, like, not how to how to optimize? Is that some practical things, in fact, no optimization scheme is absolute in the world, the optimization scheme called are starting, a basic principle based on the initial memory for example, with a bit less! So how the memory can be used again a bit less to do, so we need some of the most basic method, basic methods about the layout of this part, I already very detailed said again, when the layout you remember

1,To make use of view's parameters

2,Reduce unnecessary node a layout

3,Try to reuse a layout file

Compatibility compatible with all sorts of strange things? The reason of the problem, not a set of general rules! On this point to talk about his own views

1,To reduce complexity, often, compatibility problems, is the layout is too complex, for example, the button layout I cite, originally a View can be done, but you used three view, when in use, problems of concept also greatly enhance! So, layout as simple as this so compatibility problems, you can try to avoid!

2,Proficiency in the use of tools, remember hierarchyviewer? When the compatibility issues, using this software you can quickly locate the fault position!


By the way…

If you think this article to help you … just you have a eoeandroid account … then go to support it…

http://www.eoeandroid.com/thread-171427-1-1.html


Authors: the game ah Chai
Source:
This paper uses the Creative Commons Attribution noncommercial share alike 2.5 China Mainland License, welcome to reprint, but without the permission of the author must keep this statement, and the connection in the article page is the apparent position.
Micro-blog contact: Sina micro-blog
Use Alipay sponsorship Blogger

Posted by Eilian at November 20, 2013 - 12:35 PM