Android screen adaptation

This article turns from: http://isux.tencent.com/learn-android-from-zero-session6.html One, the unit of measure for Android

In Android, the units that define the size of a component typically have DP and SP, so what is the difference between the PX we use most often?

• Px

PX is an abbreviation for pixels, which is a common pixel unit that corresponds to a point on the screen.
There are many sizes of mobile devices, and their total screen pixels are different, and the size of the components using PX units can be inconsistent.

Let's see an example.

It can be seen that the plus icon appears slightly smaller on a larger screen with higher resolution

• Dip/dp

DP (Density-independent pixel) is a density-independent pixel unit, or dip. It is an abstract unit based on the physical density of the device screen. 1DP indicates the length of 1px at the screen dpi of 160. The higher the DPI screen, the more pixels the screen will need to draw 1DP, and vice versa.

We can set the image width height of the previous example to 30DP

You can see that the size of the two plus icon is consistent

• Sp

The SP (scale-independent pixel) is a pixel unit that is independent of scale. Similar to DP, the only difference is that the unit is affected by the system font settings and is usually used in fonts.
Android Specifies the common size of the font in the design specification:

The advantage of using DP/SP is that the components always behave consistently regardless of the screen dpi.

Second, the Android layout

In Android development, defining a user interface layout for a program has the following methods:

• In the XML file definition
• Instantiating a layout in program code
• Using the Graphical Layout tool

Each of the above three methods have pros and cons, we will be based on the requirements of the scenario to apply a different layout, here is mainly about the XML layout.

Defining components in an XML file makes it easy to manage the UI portion of the program, and separates performance and behavior, making it easy to manage reading and management, and to customize XML files for different screens.
The usual layouts are frame layout, Linear layout, Relative layout, List view and Grid view.
Since the list view and Grid view involve the data section, let's go back and start with a few simple starts:)

Frame Layout

Framelayout is the simplest layout, the elements added to this layout are stacked, and the current element is overwritten by the next element, which is equivalent to the absolute positioning Position:absolute in the CSS.

A summary of the information about these properties is available from the Summary XML Attributes.

A few common properties:

1. Android:foreground set the foreground map of the layout, the foreground map will not overwrite the quilt element
2. Android:foregroundgravity Setting the location of the layout foreground map

For Framelayout.layoutparams, there is only the Android:layout_gravity property, you can view the previous article
Http://isux.tencent.com/learn-android-from-zero-session3.html

We can practice:
Create a new Android project, and then locate the layout XML file in the Layouts folder and write to the following layout

The results are as follows:

More details can be found on Google God Documentation:
Http://developer.android.com/reference/android/widget/FrameLayout.html

Linear Layout

The linear layout is explained in the front, and the little friends can read this article http://isux.tencent.com/learn-android-from-zero-session3.html

Relative Layout

Relative layouts can specify the position of the element. The position of an element can be defined as the relative position of the adjacent element (for example, element A is on the left side of element B), or it can be defined as the relative position of the parent element (for example, in the middle or left side of the parent element).
Relative layouts make it easy to control the position of elements. When there is no definition, all elements are at the top left of the parent element.

A summary of the information about these properties is available from the Summary XML Attributes.

A few common properties:

1. Android:gravity set the position of its contents (text, view) within the element
2. Android:ignoregravity sets the ID of an element so that it is not affected by the gravity property

In Relativelayout.layoutparams, there are two types of attributes, one of which is the alignment of the child element in the parent element, and the other is the position of the child element relative to the other element.

The following is the first class of properties

For the second class of properties, let's practice:
Create a new Android project, and then locate the layout XML file in the Layouts folder and write to the following layout

Then find the String.xml in the Values folder and add the following code

The results are as follows:

More details can be found on Google God Documentation:
Http://developer.android.com/reference/android/widget/RelativeLayout.html

Three, Android screen adaptation 1. Screen Related concepts

Here are a few common nouns

• Screen size

The physical dimensions of the device can be known by looking up the device information, or by calculating the length of the screen diagonal.
In the Android design specification, the screen is divided into 4 categories: Small,normal,large,extra Large

• Screen density

The number of pixels of the screen within the physical size range. Also usually refers to dpi (dots per inch). The smaller the screen density, the fewer pixels it contains.
In the Android design specification, the screen density is divided into 4 categories: Low,medium,high,extra high.

• Screen orientation

The screen orientation is horizontal and vertical, and the screen aspect ratio is different in both cases.

• Resolution

Similar to the concept of computer resolution, it represents the number of pixels in the vertical direction of the screen, such as 480*800.
When you make a screen fit for your app, you can't just consider pixels, screen size, screen density, and so on.

• Dpi

Dots per inch, that is, the number of pixels, by the following formula can be obtained.
Dpi= (√ (Horizontal resolution ^2+ longitudinal resolution ^2)/Screen size

In the Android design specification, DPI is divided into 5 grades: MDPI,HDPI,XHDPI,XXHDPI,XXXHDPI, whose proportions are 2:3:4:6:8

You can look at the different sizes of units in different screen situations:

xhdpi screen (~320dpi)

hdpi screen (~240dpi)

MDPI screen (~160dpi)

Through the above can be drawn:

• On the mdpi screen (i.e. 160DPI), 1DP and 1sp are basically equal to 1px.
• Conversion formula for DP and px: PX = dp* (dpi/160).
• Conversion formula for SP and px: px = sp* (dpi/160).

2. Provide layout for different screen sizes

Generally speaking, Android is scaled so that the app adapts to the screen size, but for some special cases, we can provide a better layout for the experience. For example, on a large screen device, you can make full use of the screen space by adjusting the location and size of the UI components. For small devices, you just need to resize the UI component.

Layouts are commonly used in sizes Small,normal,large and x-large, and can be configured according to the type of layout you need to choose.
The common layout configurations are as follows:

• Res/layout/layout.xml
• Res/layout-small/layout.xml
• Res/layout-large/layout.xml
• Res/layout-large-land/layout.xml

3. Provide images for different screen densities

For Android, the types of images you can use are. Png,.jpg,.gif and. 9.png (point nine figure). The app will enlarge or shrink the image for different screens. If a picture is provided only for MDPI devices, the picture of the device for HDPI will zoom in, and the picture for the LDPI device will shrink. So the best way is to provide pictures for different screen densities.

For designers, you can choose 320DPI as the standard to design the app, and then choose Photoshop/illustrator These tools, according to the proportion of the device, export different sizes of pictures. For example, for a 200x200 button graph designed for a standard size device (XHDPI), you need to export the 150x150 dimensions for the HDPI device and export the MDPI dimensions for the 100x100 device
The images are then placed in the corresponding folder in the res/, and the app picks up the pictures based on the device's situation.
Settings are as follows:

• Res/drawable-xhdpi/image.png
• Res/drawable-hdpi/image.png
• Res/drawable-mdpi/image.png

4, point nine figure

Point Nine is a special PNG format that allows you to specify the stretch area and content area for a picture. The tools/folder inside the SDK will find the tools to make this kind of image.

The tool interface is as follows:

Drag and drop the picture into the tool to mark the dots.

Mark the left side of the picture (to the left of the area a) and the top (above area B) to indicate that the area is scalable.
Area A:

Area B:

Mark the bottom edge of the picture (below the C area) and the right (right side of the D area) to indicate that the area is content.
C Region:

D Region:

When the tag is finished, the file will be changed to. 9.png format when it is saved.
When used, set android:background= "@drawable/button" in the XML file.

About point nine of the article before a classmate introduced: http://isux.tencent.com/android-ui-9-png.html
Of course, if you want to be lazy, here is a tool to help you point:)
Http://romannurik.github.io/AndroidAssetStudio/nine-patches.html

Four, summary

There are a few points to keep in mind when making a screen fit:

1. When defining the XML layout, use DP units, wrap_content,fill_parent (match_parent)
2. Provide different images for different screen densities
3. For a picture with some rules (gradients) using point nine figure
4. Provides different layouts for special screen types (portrait and landscape)

For this section, is a very basic knowledge, at the same time, this is to create a good app of the necessary knowledge, everyone refueling bar: P

(turn) Android screen adapter