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

Android screen adaptation how to analyze, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

Why should the screen fit?

Fragmentation

Brand model fragmentation

Screen size fragmentation

Operating system fragmentation

In order to ensure that users get a consistent user experience and make an element have the same display effect on mobile phones with different sizes and resolutions of Android, we need to adapt the screen.

Basic concept

Screen size

Screen size refers to the length of the diagonal of the screen, in inches, 1 inch=2.54 cm

Screen resolution

The total number of pixels in the horizontal and vertical direction of the phone is pixel, 1px = 1 pixel, for example, Chestnut, 1080x1920, that is, there are 1080 pixels in the width direction and 1920 pixels in the height direction.

Screen pixel density

The number of pixels per inch, in dpi,dots per inch. For simplicity, Android groups all screen densities into six general densities: low, medium, high, ultra-high, ultra-high, and ultra-high.

Ldpi (low) ~ 120dpi

Mdpi (medium) ~ 160dpi

Hdpi (high) ~ 240dpi

Xhdpi (Superelevation) ~ 320dpi

Xxhdpi (superelevation) ~ 480dpi

Xxxhdpi (ultra-high) ~ 640dpi

Dpi_example

Screen density independent pixel dp (dip)

Density Independent Pixels, that is, density independent pixels.

160dpi, 1dp = 1px

240dpi, 1dp = 1.5px

320dpi, 1dp = 2px

480dpi, 1dp = 3px

640dpi, 1dp = 4px

The effect of using px at low, medium and high screen density

Density-test-bad

The effect of using dp at low, medium and high screen density

Dimen_example2

Independent proportional pixel sp

Scale Independent Pixels, which is sp or sip.

When developing Android, use this unit to set the text size, which can be scaled according to the font size. It is recommended to use 12sp, 14sp, 18sp and 22sp as the font size. Odd and decimal numbers are not recommended, which can easily lead to the loss of precision. Fonts smaller than 12sp will be too small for users to see clearly.

Picture adaptation for screen adaptation

When designing icons, the five mainstream pixel densities (mdpi,hdpi,xhdpi,xxhdpi and xxxdpi) should be scaled according to the ratio of 2, 3, 4, 4, 6, 8. For example, a startup image ic_launcher.png, whose size under each pixel density folder is:

Ldpi (low)

Mdpi (medium) 48,48

Hdpi (High) 72mm 72

Xhdpi (Superelevation) 960096

Xxhdpi (Superelevation) 144cm 144

Xxxhdpi (Ultra Superelevation) 192

Existing problems

There is a set of pictures for each set of resolution, which adds a lot of work to the artist or design.

The apk package for Android project files has become very large

Solution method

Android SDK loading Picture flow

Android SDK will automatically select the corresponding resource file to render and load according to the screen density. For example, if SDK detects that the resolution of your phone is xhdpi, it will first go to the xhdpi folder to find the corresponding image resources.

If there is no image resource in the xhdpi folder, then look for it under a high-resolution folder, such as xxhdpi, until you find the image resource with the same name and scale it down to xhpi images.

If you look up for an image and still can't find it, then you will look in a low-resolution folder, such as hdpi, until you find an image resource of the same name and enlarge it proportionally to a xhpi image.

According to the process of loading pictures, it can be concluded that a set of pictures can be provided in theory.

So which resolution specification should be provided?

In principle, the higher the better, combined with the current mainstream resolution screen

Automatically stretch the picture

Ninepatch_raw

Ninepatch_examples

Layout adaptation of screen adaptation

Layout parameters

Use wrap_content, match_parent, layout_weight.

The use of weight

Weight_examples

When layout_width is 0dp, the layoutweight is 1 and 2, respectively.

When layout_width is 1 and match_parent,layout_weight is 2

Calculation of weight

Width = original width + weight ratio * remaining width

When layout_width is 0dp, the layoutweight is 1 and 2, respectively.

* Button: width = 0 + 1 * screen width = 1 * screen width

The second button: width = 0 + 2 + 3 * screen width = 2 + 3 screen width

When layout_width is match_parent, layout_weight is 1 and 2, respectively

* Button: width = screen width + 1 screen width 3 (screen width-2 screen width) = 2 screen width

Second button: width = screen width + 2pm 3 (screen width-2 screen width) = 1pm 3 screen width

Layout usage

Use relative layout to disable absolute layout.

Qualifier

Size qualifier

On the smaller screen of the phone, load the layout folder layout

Load the layout of the layout-large folder on the screen of the tablet and TV (> 7 inches)

Before the Android3.2 version

Minimum width qualifier

On the smaller screen of the phone, load the layout folder layout

Standard 7-inch flat panel with a minimum width of 600dp, loading the layout of the layout-sw600dp folder

In Android3.2 version and later version

Layout alias

Adapts to the single-panel (default) layout of the phone: res/layout/activity_main.xml

Double panel layout with size > 7 inch (before Android 3.2): res/layout-large/activity_main.xml

Double panel layout with size > 7 inch (after Android 3.2): res/layout-sw600dp/activity_main.xml

The xml contents of the two files are exactly the same, which will lead to: the duplication of file names will lead to some problems in later maintenance. If you modify one file, you may forget to modify the other. So in order to solve this repetition problem, we introduce layout aliases.

Adapts to the single-panel (default) layout of the phone: res/layout/activity_main.xml

Double panel layout with size > 7 inch: res/layout/activity_twopanes.xml

Resalues/layout.xml

@ layout/activity_main

Resalues-large/layout.xml

@ layout/activity_twopanes

Resalues-sw600dp/layout.xml

@ layout/activity_twopanes

SetContentView (R.layout.main)

Screen orientation qualifier

Res/layout-land

Res/layout-port

Res/layout-sw600dp-land

Res/layout-sw600dp-port

Dimen adaptation for screen adaptation

Nexus 4 (4.7in 768x1280:xhdpi)

Nexus S (4-inch 480x800:hdpi)

Dimen_example2

Even if we use dp, we still can't solve the problem of screen resolution adaptation. We can create different dimensions for different screens.

Resalues/dimens.xml

180dp 160dp

Resalues-480x800/dimens.xml

113dp 100dp

Percentage layout adapted to the screen

Official document

Github Sample

Adaptive user interface for screen adaptation

Newsreader_land

Newsreader_port

When the NewsReader is on the landscape screen, there are dual panels, HeadLinesFragment on the left and ArticleFragment on the right. Click on the news title and switch the content of ArticleFragment. When the NewsReader is a single panel on the vertical screen, with only a HeadLinesFragment, click on the news title and jump to ArticleActivity to display the news content. Therefore, to achieve such horizontal and vertical screen adaptation, only through the layout can not be completed, different business logic processing, but also need to write code to complete, this is our adaptive user interface.

Use layout alias

Resalues/layouts.xml

@ layout/onepane_with_bar false

Resalues-sw600dp-land/layouts.xml

@ layout/twopanes true

Resalues-sw600dp-port/layouts.xml

@ layout/onepane false

Judge whether it is single panel or double panel.

View articleView = findViewById (R.id.article); mIsDualPane = articleView! = null & & articleView.getVisibility () = View.VISIBLE;// double panel if ArticleFragment can be found

Different business logic of single and double panels

Public void onHeadlineSelected (int index) {mArtIndex = index; if (mIsDualPane) {/ / display it on the article fragment mArticleFragment.displayArticle (mCurrentCat.getArticle (index));} else {/ / use separate activity Intent i = new Intent (this, ArticleActivity.class); i.putExtra ("catIndex", mCatIndex); i.putExtra ("artIndex", index); startActivity (I) }} is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, 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.