Android screen adaptation and android adaptation

Android screen adaptation and android adaptation
Android screen adaptation

• • Android screen adaptation
    • Adaptation Method 1: Image adaptation
    • Method 2 dimensxml file adaptation
    • Three-layout file adaptation
    • Adaptation Method 4 java code adaptation
    • Adaptation Method 5 weight adaptation

Adaptation: The current app displays the same effect on the same mobile phone. Before adaptation, you must first determine the type of the pixel density of the current mobile phone (such as xhdpi, hdpi, and mdpi). The following uses Huawei G700 and simulator as an example to calculate the pixel density.

Case 1:

Mobile phone model: G700 mobile phone resolution: 1280*720 (Note: 1280 and 720 pixels are placed on two right-angle sides of the mobile phone respectively) mobile phone size: 5 inch (mobile phone oblique side length) Suppose, B is the two straight angle edges, and c is the oblique edges. The calculation method can be obtained by using the ing theorem: sqrt (a * a + B * B)/c. The calculation result is as follows: sqrt (1280*1280 + 720*720)/5 ≈ 293.72dpi according to the instructions in the official google documentation, the current mobile phone is close to 320 dpi, which is summarized within the xhdpi mobile phone range, that is, 1dp = 2px;

Case 2:

Mobile phone model: simulator mobile phone resolution: 800*480 (Note: 800 and 480 pixels are placed on two right-angle sides of the mobile phone respectively) mobile phone size: 3.7 inch (mobile phone oblique side size) Calculation Result: sqrt (800*800 + 480*480)/3.7 ≈ 252.15dpi according to the official google documentation (Figure 1-1), the current mobile phone is close to 240 dpi, then it is summarized in the hdpi mobile phone range, that is, 1dp = 1.5px. According to the above method, most mobile phones on the market can be divided into 5 pixel density levels, respectively: ldpi: 120 dpi, the Conversion Relationship between pixel density and dp is: 1dp = 0.75 pxmdpi: 160 dpi, the relationship between pixel density and dp is: 1dp = 1 pxhdpi: 240 dpi, the relationship between pixel density and dp is: 1dp = 1.5 pxxhdpi: 320 dpi, the relationship between pixel density and dp is: 1dp = 2 pxxxhdpi: 480 dpi. The relationship between pixel density and dp is: 1dp = 3px.

(Note: In the following cases, screen adaptation tests are performed for the current two mobile phones)

Adaptation Method 1: Image adaptation

Mobile phones with different pixel density are loaded with different resource images in the project resource file (res). The above two mobile phones are used as an example. The layout code is as follows:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity" >    <ImageView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/a" /></RelativeLayout>

G700 (xhdpi): The file named a.jpg is located in the res/drawable-xhdpi folder. The following figure shows the result:

Simulator (hdpi): A. jpg resource file located in the res/drawable-hdpi folder. The following figure shows the effect:

Method 2: dimens. xml file adaptation

Dimens. xml exists in different values (such as value-1280x720, value-800x480) folders in the project resources (res) folder, can be used to specify the control size, different pixel density cell phone load different values folder under dimens. the xml file is used as follows:

<LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" xmlns: tools = "http://schemas.android.com/tools" android: layout_width = "match_parent" android: layout_height = "match_parent" android: orientation = "vertical" tools: context = ". mainActivity "> <! -- Load different dp on different mobile phones --> <TextView android: background = "#987654" android: layout_width = "@ dimen/width" android: layout_height = "wrap_content" android: text = "@ string/hello_world"/> </LinearLayout>

Simulator (hdpi): Loads The dimens. xml resource file, located under the res/value-800x480 folder

<Resources> <dimen name = "width"> 160dp </dimen> </resources> Based on the Conversion Relationship Between hdpi dp and px 1 dp = 1.5px, 160dp = 240px, the current control width should be in the middle of the screen.

G700 (xhdpi): Loads The dimens. xml resource file, located under the res/value-1280x720 folder

<Resources> <dimen name = "width"> 180dp </dimen> </resources> according to the above-mentioned xhdpi dp and px Conversion Relationship 1dp = 2px, then 180dp = 360px, the current control width should be in the middle of the screen.

G700 (xhdpi) displays the following results:

The following figure shows the Display Effect of the simulator (hdpi:

Adaptation Mode 3: Layout file adaptation

Loading different layout files for mobile phones with different resolutions has achieved the adaptation effect. Create multiple layout (for example: layout-1280x720, layout-800x480) folders to store layout files required for phones of different pixel density.

Simulator (hdpi): load the activity_main.xml layout file, under the res/layout-800x480 Folder:

<RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android" xmlns: tools = "http://schemas.android.com/tools" android: layout_width = "match_parent" android: layout_height = "match_parent" tools: context = ". mainActivity "> <TextView android: layout_width =" wrap_content "android: layout_height =" wrap_content "android: text = "800*480 layout file loaded by the mobile phone"/> </RelativeLayout>

G700 (xhdpi): load the activity_main.xml layout file under the res/layout-1280x720 Folder:

<RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android" xmlns: tools = "http://schemas.android.com/tools" android: layout_width = "match_parent" android: layout_height = "match_parent" tools: context = ". mainActivity "> <TextView android: layout_width =" wrap_content "android: layout_height =" wrap_content "android: text = "1280*720 layout file loaded by the mobile phone"/> </RelativeLayout>

G700 (xhdpi) displays the following results:

The following figure shows the Display Effect of the simulator (hdpi:

Method 4: java code adaptation

Use the corresponding android api to obtain the width and height pixels of the current mobile phone, and allocate the width and height of the control in the screen proportionally to achieve the adaptation effect. The core code is as follows:

Layout file <RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android" xmlns: tools = "http://schemas.android.com/tools" android: layout_width = "match_parent" android: layout_height = "match_parent" tools: context = ". mainActivity "> <TextView android: id =" @ + id/TV "android: background =" #000000 "android: layout_width =" wrap_content "android: layout_height =" wrap_content "android: text = "@ string/hello_world"/> </RelativeLayout> activity's oncreate core code: TextView TV = (TextView) findViewById (R. id. TV); // get the information object encapsulated on the current mobile phone screen, used to store the wide and high value DisplayMetrics metrics = new DisplayMetrics (); // set the wide and high getWindowManager () for the current screen (). getdefadisplay display (). getMetrics (metrics); // get the height of Constant. srceenHeight = metrics. heightPixels; // obtain the Constant width. srceenWidth = metrics. widthPixels; Log. I (tag, "Constant. srceenHeight = "+ Constant. srceenHeight); Log. I (tag, "Constant. srceenWidth = "+ Constant. srceenWidth); // the width and height each account for 50% RelativeLayout. layoutParams layoutParams = new RelativeLayout. layoutParams (int) (Constant. srceenWidth * 0.5 + 0.5), (int) (Constant. srceenHeight * 0.5 + 0.5); TV. setLayoutParams (layoutParams );

G700 (xhdpi) displays the following results:

The following figure shows the Display Effect of the simulator (hdpi:

Adaptation Method 5: weight adaptation

The remaining space allocated by the (weight) provided by android has achieved the adaptation effect. The layout file is loaded as follows:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="horizontal"    tools:context=".MainActivity" >    <TextView         android:background="#000000"        android:layout_width="0dp"        android:layout_weight="1"        android:layout_height="match_parent"/>    <TextView         android:background="#123456"        android:layout_width="0dp"        android:layout_weight="1"        android:layout_height="match_parent"/></LinearLayout>

G700 (xhdpi) displays the following results:

The following figure shows the Display Effect of the simulator (hdpi: