Android AutoLayout is a new fit for Terminator

Source: Internet
Author: User

Reprint please indicate the source:
http://blog.csdn.net/lmj623565791/article/details/49990941;
This article is from: "Zhang Hongyang's Blog"

I. Overview

I believe that Android developers are more distressed about provisioning issues, although Google has given a series of suggestions, but it is very difficult to simply use these suggestions to make the device easy to do. Individuals also pay more attention to the problem of adaptation, before also issued a few articles about adaptation, roughly:

    • Android screen Adaptation Scheme
    • Android percent Layout Library (percent-support-lib) parsing and scaling
    • Android Enhanced percent layout library for adaptation and expansion

OK, I roughly say, did not read the first read this, and then consider not to see the above several, the inspiration is from the above several, but the ease of adaptation, and the effect is far better than the above several effects.

Since the inspiration comes from the above, the following is generally introduced:

    • First: Mainly based on the size of the design drawings, and then the size of the PX identified on the design chart, converted to a percentage, for all the mainstream screen to generate a corresponding percentage of values, each size will have a values folder. There are some problems: generate a large number of folders, not suitable for special size (must establish a default folder)

    • The second and third: these two articles belong to the same, mainly based on the Google launch of the percentage layout, has largely solved the problem of adaptation. There are some problems: used to compare anti-human, because the design diagram is labeled px, so you need to calculate the percentage, and then this percentage is dependent on the parent container, the design may not be the size of each parent container is identified, all difficult to use (of course, someone has been using automated tools to calculate). Another problem is that because of the dependency on the parent container, the percentages are not used in the height of the container such as Scrollview,listview.

You can see that there are some problems, more or less need to do some extra work, but I hope the adaptation is this:

    • Get the design diagram, the meta information into the size of the design drawings, and then do not need additional calculations, layout directly copy the size of the design drawings, do not produce any redundant resources files, complete a variety of resolution of the adaptation!
Second, the intuitive experience

Let's say we get a plan:

This is a common design development, some companies may need to measure themselves.

According to our thinking:

Layout directly copy the dimensions on the design drawing

For, 新增旅客 our layout library should be written like this:

<relativelayoutandroid:layout_width= "match_parent" android:layout_height= "86px" Android:layout_ margintop= "26px" android:background= "#ffffffff"><imageview  android:id  = "@+id/id_tv_add"  android:layout_width  = "34px"  android:layout_height  = "34px"  android:layout_gravity  =     "center_vertical"  android:layout_marginleft  = "276px"  android:layout_margintop  = "26px"  android:src  =" @mipmap/add "/> <textview  android:layout _width  = "wrap_content"  android:layout_height  = "wrap_content"  android:layout_ centervertical  = "true"  android:layout_ MarginLeft  = "26px"  android:layout_torightof  = "@id/id_tv_add"  android:text  = "new Traveler"  android:textcolor  =     "#1fb6c4"  android:textsize  = "32px" /> </relativelayout>

Take a look at the combo chart and feel it:

Feel finished, think about it, write the layout in this way you say it's cool.

OK, so for the item layout file, that's what it says:

<relativelayoutandroid:layout_width="Match_parent"android:layout_height ="108px"android:layout_margintop="26px"android:background="# FFFFFFFF " >                    <textview  android:layout _width  = "wrap_content"  android:layout_height  = "wrap_content"  android:layout_marginleft
      = "22px"  android:layout_margintop  = "16px"  android:text  = "King Cannon WANG. Dapao " android:textcolor  =" #333 " Span class= "Hljs-attribute" >android:textsize  = "28px" />     <textview  android:layout _width  = "wrap_content"  android:layout_height  = "wrap_content"  android:layout_ Alignparentbottom  = "true"  android:layout_ MarginBottom  = "16px"  android:layout_ MarginLeft  = "22px"  android:text  = "Passport: G50786449"  android:textcolor  =" #999 " android:textsize  =" 26px " /span>/> </relativelayout>

See this, I believe, your biggest question now is: You use the PX,PX can complete the adaptation? Funny, huh?

So first of all: this PX does not represent 1 pixels, I will be in the internal percentage processing, that is to say: 720px height of the screen, you fill in 72px, Occupy 10%; When this layout file runs on any resolution of the phone, this 72px represents 10% of the height, This is the principle of adaptation of this library.

Next: Look at the effects at different resolutions:

768*1280,andriod 4.4.4

480*800,android 2.3.7

The resolution gap between the two machines is quite large, and according to the rule of percentages, the perfect adaptation is achieved, and most importantly:

    • No longer need to take the design to figure out how much DP the control's width is going to take.
    • No more need to write multiple dimens for multiple screens
    • You don't have to calculate the percentage anymore (if you use a percent control to complete the adaptation)
    • I don't have to explain to the UI mm what DP is anymore.

Next use.

Address of this library: Https://github.com/hongyangAndroid/AndroidAutoLayout

Iii. usage (1) Register design drawing Size

Introducing AutoLayout into the

dependencies {    compile project(‘:autolayout‘)}

For Eclipse Partners, only to copy the source ~ ~

Indicate your size in the androidmanifest of your project 设计稿 .

<meta-data android:name="design_width" android:value="768"></meta-data><meta-data android:name="design_height" android:value="1280"></meta-data>
(2) Opening and matching in activity
    • Let your activity go to the inheritanceAutoLayoutActivity
    • Write in the oncreate of your activity:

AutoLayout.getInstance().auto(this, true);For example:

@Overrideprotected void onCreate(Bundle savedInstanceState){    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    AutoLayout.getInstance().auto(this);}

OK, a very simple two can be introduced into the project, then, then why?

Then start playing as you wrote the last chapter.

OK, above is the simplest usage, of course you can not inherit AutoLayoutActivity to use.

AutoLayoutActivityThe usage is actually a matter of accomplishing:

    • LinearLayout-Autolinearlayout
    • Relativelayout-Autorelativelayout
    • Framelayout-Autoframelayout

If you do not want to inherit AutoLayoutActivity , then you have to like the percentage of Google Library, to use Autoxxxlayout instead of the system's original xxxlayout. Of course, you can rest assured that all the properties of the original system properties will be supported, but the root layout does not support the auto-percent PX, but the general root layout is match_parent, and the above way, the root layout can be directly px percent.

Iv. Precautions (1) How to open preview

We all know that when writing layout files, can not be real-time to preview the effect, then the experience is really very bad, but also to a large extent to reduce the development efficiency, so the following teach you how to use good, with the preview (for the library).

First, you need to remember the size of your design, such as768 * 1280

Then in your preview panel, select the device with the same resolution:

Then you can see 最为精确的 the preview:

Two items to note:

    1. The size of the design you gave to the UI is not a mainstream design, this size is not found, you can take the monitor hit him to create a new device.
    2. Don't look at all the resolutions in preview, it's not going to fit, because some of the calculations are dynamic.
(2) About TextView

TextView This control, there may be some discrepancy in the design manuscript, not the reason for this library, but the inherent characteristics.

Like what:

<TextView textSize="32px" layout_height="wrap_contnt" />

You go to run certainly not the height of 32px, the text of the upper and lower sides will have a certain gap. How you will be highly written dead, also will find the text display is not complete.

Well, so, to be flexible with this problem, for a value that has a very precise font identity, you can choose: for TextView and other controls, the upper and lower margins, as much as possible to write a little bit smaller.

In fact, the above example, almost all textview, all I write in the item, but also deliberately reduced the value of margintop. However, there is no such problem with other controls.

PS: Because textview the above problem: So for the center, although you can use this library by writing margin_left , margin_top and so very easy to complete the center. But for the sake of accuracy, it is recommended gravity to use, and centerInXXX so on, properties.

V. Other currently supported attributes
    • Layout_width
    • Layout_height
    • Layout_margin (Left,top,right,bottom)
    • Pading (Left,top,right,bottom)
    • TextSize
    • Does not affect all other properties of the system, and does not affect the use of DP,SP
Performance improvements

The way to write code through this library, can be used in a very large program, that is margin , the location of the view is very good control, which can reduce a lot of nesting, even any complex interface to do without nesting.

And, almost no need to use the rules of relativelayout, such as Rightof, can be marginLeft done completely, the other rule the same way.

For linearlayout weight, almost no need to use, such as screen width of 720px, want to four controls horizontally evenly, can writelayout_width="180px"

I believe that through the above introduction, you already understand the practice of the library adaptation, and can be said to be the most convenient adaptation program I have seen, to maximize the ease of adaptation of the burden, even more than when you do not fit the UI to write convenient. Currently this library has been tried for projects, as far as possible to identify some potential problems.

Address of this library: https://github.com/hongyangAndroid/AndroidAutoLayout, welcome you to perfect together, let the adaptation problem disappear in our pain.

OK, finally, only to experience, to discover the advantages and disadvantages ~ ~

Welcome to follow my Weibo:
http://weibo.com/u/3165018720

Group No.: 463081660, welcome into the group

Public Number: Hongyangandroid
(Welcome attention, the first time to push the blog post information)

Android AutoLayout is a new fit for Terminator

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.