Android down screen adaptation

Source: Internet
Author: User

# #Android下屏幕适配


* * *: The current app shows the same effect on the same phone. Before the adaptation needs to first determine the current cell phone pixel density type (such as: xhdpi, hdpi, MDPI, etc.),
The following is an example of Huawei G700, Simulator, to calculate its pixel density.

* * Case ONE:

Phone Model: G700
Cell Phone Resolution: 1280*720 (Note: Mobile phone two right-angled side of the 1280 and 720 pixels respectively placed)
Cell phone Size: 5 inches (Phone diagonal length)

Suppose that A, B is two right-angled edges, C is the hypotenuse, and the Pythagorean theorem can be calculated as follows: sqrt (a*a+b*b)/C
Calculation result: sqrt (1280*1280+720*720)/5≈293.72dpi

According to Google's official documentation, the current phone closest to 320dpi, it is summarized in the XHDPI phone range, that is, 1dp=2px;

* * Case TWO:

Model: Simulator
Cell Phone Resolution: 800*480 (Note: Mobile phone two right-angled side of the 800 and 480 pixels respectively placed)
Size: 3.7 inch (Phone bevel size)

Calculation result: sqrt (800*800+480*480)/3.7≈252.15dpi
According to Google's Official document (Figure 1-1), the current mobile phone close to 240dpi, it is summarized in the HDPI phone range, that is, 1dp=1.5px.

The most mobile phones in the market can be divided into 5 pixel density classes, respectively:
LDPI:120DPI, the relationship between pixel density and DP conversion is: 1DP = 0.75px
MDPI:160DPI, the relationship between pixel density and DP conversion is: 1DP = 1px
HDPI:240DPI, the relationship between pixel density and DP conversion is: 1DP = 1.5px
XHDPI:320DPI, the relationship between pixel density and DP conversion is: 1DP = 2px
XXHDPI:480DPI, the relationship between pixel density and DP conversion is: 1DP = 3px

! [] (Http://i.imgur.com/SyFveO6.jpg)
! [] (Http://i.imgur.com/KT6oXF1.png)

(Note: The following case is a screen fit test for the current two phones)

# # #适配方式一: Picture adaptation
Different pixel density of the mobile phone loading project resource file (res) in different resource images, the above two mobile phones 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): Loads the a.jpg resource file, which is located under the Res/drawable-xhdpi folder and displays the following effects:

! [] (Http://i.imgur.com/hyfw1s9.png)

Emulator (HDPI): Loads the a.jpg resource file, located under the Res/drawable-hdpi folder, and displays the following effects:

! [] (Http://i.imgur.com/56VzQan.png)

# # #适配方式二: Dimens.xml file adaptation
Dimens.xml exists in the project resource (res) folder under different values (such as: value-1280x720, value-800x480) folders, which can be used to specify the size of the control, Different pixel density mobile phone load the Dimens.xml file under different values folder, using the following methods:

<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 ">
<!--different phones to load different DP--
<textview
Android:background= "#987654"
Android:layout_width= "@dimen/width"
android:layout_height= "Wrap_content"
android:text= "@string/hello_world"/>
</LinearLayout>

Simulator (HDPI): Load dimens.xml resource file, located under res/value-800x480 folder

<resources>
<dimen name= "width" >160dp</dimen>
</resources>
According to the above hdpi DP and px conversion relationship 1DP = 1.5px, then 160DP = 240px, the current control width should be in the middle of the screen position.

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

<resources>
<dimen name= "width" >180dp</dimen>
</resources>
According to the above xhdpi DP and px conversion relationship 1DP = 2px, then 180DP = 360px, the current control width should be in the middle of the screen position.
G700 (XHDPI) shows the following results:

! [] (Http://i.imgur.com/9qrrlJX.png)

The simulator (hdpi) displays the following effects:

! [] (Http://i.imgur.com/DUVudlH.jpg)

# # #适配方式三: Layout file adaptation
Different resolution of the phone, loading different layout files have achieved the adaptation effect. Create multiple layouts (such as: layout-1280x720, layout-800x480) folders to hold the layout files required for different pixel density phones.

Emulator (HDPI): Loads the Activity_main.xml layout file, located 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 phone will go to load the layout file"/>
</RelativeLayout>

G700 (XHDPI): Loads the Activity_main.xml layout file, located 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 phone will go to load the layout file"/>
</RelativeLayout>
G700 (XHDPI) shows the following results:

! [] (Http://i.imgur.com/tzl72jb.jpg)

The simulator (hdpi) displays the following effects:

! [] (Http://i.imgur.com/b1hnNTz.jpg)

# # #适配方式四: Java code adaptation
Use the Android API to get the width and height of the current phone, and proportionally assign the width of the controls on the screen to fit the 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>

OnCreate core code in activity:
TextView TV = (TextView) Findviewbyid (r.id.tv);
Gets the encapsulated current phone screen information object for storing the height value
Displaymetrics metrics = new Displaymetrics ();
Set the current screen to a wide height
Getwindowmanager (). Getdefaultdisplay (). Getmetrics (metrics);
Get height
Constant.srceenheight = Metrics.heightpixels;
Get width
Constant.srceenwidth = Metrics.widthpixels;

LOG.I (Tag, "constant.srceenheight =" +constant.srceenheight);
LOG.I (Tag, "constant.srceenwidth =" +constant.srceenwidth);

The width of the height of each accounted 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) shows the following results:

! [] (Http://i.imgur.com/5oZ2bAZ.jpg)

The simulator (hdpi) displays the following effects:

! [] (Http://i.imgur.com/vy8Pd8K.jpg)

# # #适配方式五: Weight Matching
With the remaining space allocated by Android (weight), the adaptation effect has been achieved. The display interface loads the layout file 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) shows the following results:

! [] (Http://i.imgur.com/czigOYf.png)

The simulator (hdpi) displays the following effects:

! [] (Http://i.imgur.com/urNPdtn.png)


Android down screen adaptation

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.