Android Adaptation Instructions

Source: Internet
Author: User

First, this adaptation of the description is from the technical group to share, here to save, for a rainy future!

Only for mobile app adaptation

Current Android phone resolution mainstream has

480*800 480*854 540*960

720*1280

1080*1920

1440*2560

The above does not include in-screen virtual machine keys. General 540*960 plus virtual machine 540*800 more than 720p is more than 1100

First, it is not enough to consider the resolution, but also to consider the resolution of the DPI

Android phones are mainly in two directions, one is a mobile phone type is a pad-type

The DPI is different, the same resolution of the phone DPI is different

For example: 1, 4.3 inch 4.6 inch 720*1280 resolution of the mobile phone their DPI is 2 with the figure of xdpi

2, 6.0 inch 5.8 inch 720*1280 resolution of the phone their DPI is 1.5 with the figure of hdpi

This leads to the 480*854 of the 2nd set of diagrams with the normal 480*800 if multiple sets of graphs are used 540*960

Conflict, you can add a set of graphs ... But this diagram adds to the endless, and many sets of diagram words seemingly 540*960 mobile phone if with a virtual key, the reference diagram may have a problem. Can take the HTC 540*960 with the virtual machine of the phone under test

So the key adaptation is rigged on the layout.

It's not hard to fit on a layout,

Mainstream of

540*960

720*1280

1080*1920

These 3 resolutions are in fact proportional, so a dip is suitable for one of the other 3 will fit the premise is the mobile phone-type adaptation.

Pad-type adaptation is actually narrowing the control, or you can understand the layout of the elongated, relative how to understand the line.

Control narrowing is so understood that the diagram left

Like the layout of your 100dip*100dip.

Above the xdpi, it shows 200px*200px.

The 150px*150px is shown on the HPI.

Understanding of layout stretching

For example, you have a 4.3-inch cell phone showing a width of 2/3, but on a large screen it may account for 1/2 feeling the layout is stretched horizontally.

First of all to understand the pad-type and mobile phone-type difference the rest of it.

The next step is the application of the actual layout.

Remember the point is layout of the time Imagine the where the layout is displayed after it is stretched

and there's no doubt about it. the units of the layout are dip

Example 1. Head Bar

This is the two kinds of understanding display, the left is the assumption that two screen size is the same as the resolution of the same DPI when the display, the right side is the actual display of the appearance

First look at the left side, such as the navigation bar height is 100dip then the 1th image on the left is 200px, the 2nd figure is 150px

This is reasonable, because you look at the actual display of the graph on the right, although the height is 150px but in fact the area he shows is almost as large as the area shown in 200px.

so pad the definition of type is to Show more content .

Not to spend two kinds of pictures in the back is too tired,

So the layout of the head bar is a high dip fixed value, wide with fill, if the width does not fill with a fixed value, it will appear such as left 1 width 360dip just 720px but left 2 360dpi only 360*1.5<720p,

so it fits the general background of what width is fill High is fixed dip value

Then see the specific Control icon icon on the right is actually the icon size is also reasonable, so the size of the icon is also the fixed value of dip, the key is the layout.

On the left is the left-justified distance to the right of how many pixels to the right, so even if the control is elongated and aligned,

If the current right side of the layout is not right-aligned, there will be more blank on the right side of the button.

So the layout of the time is still said before the sentence to consider the position after stretching, and then use the left margin right or weight

2. Stretched layout or unchanging layout with the screen

This is very common, such as

Figure Layout 1 2 3

Layout 1 for the normal effect, 2 3 for the large screen phone display,

If the layout of 1 for each item layout has a fixed value for the width of the screen is 720px is 360dip, such as setting the 340dip Center, the left margin to the right is probably left 10dip,

If it is to let the above writing center width 340dip, then run to a large screen is the 2nd figure of the effect is obviously not what we want

If it is a direct write wide fill margin around 10dip, then that is the effect of Figure 3

According to their own situation, the first thing to think about the layout after the elongated look!

3. Comparison of special grid layouts or waterfall flow layouts

For example, a square of the GridView painting of the less square = that he is certainly a square after the adaptation. Just the GridView.

Layout inside is not aware of the width of the phone screen, and if it is in DPI units then the width will be smaller, some people will use the weight weight, wide is possible. but high = =.

In this case, the width/column count of the screen can only be set by the code in adapter, which is the value of item's wide height.

In particular, this kind of column must be the code inside the layout of the calculation must not be done.

That's the instant you fit the width but the high will shrink.

Summary is the layout of the time to Imagine the layout is stretched after the location of the display

and there is . consider a virtual keyboard, Some heights don't have a virtual keyboard. just one screen. Remember to add ScrollView outside scrolling: Otherwise the height is not enough after fitting.

Tween

As for which set of charts, the current tradeoff with the 720p figure, because to be backward compatible, if directly with the 1080p figure low-resolution memory, and then use 480 or 540 of the figure 1080p or the following 2k display may be blurred,

In a compromise, use 720*1280 's picture.

After 2k 1080k popular words may not be 720p of the figure. With a 1080 figure, it's possible.

Android Adaptation Instructions

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.