屏幕適配整理

時間 2019-11-11

標籤屏幕適配整理简体版

原文原文鏈接

1.密度(density)html

①屏幕密度的計算android

手機像素密度(density)其實是以單位英寸160個像素做爲參考標準，主要密度有0.75,1,1.5,2和3，當密度爲2時就表示1英寸有320個像素，Android中經過代碼能夠獲取到屏幕的像素值和密度，根據這些值就app

能夠反向算出屏幕的物理尺寸：屏幕尺寸 = 屏幕對角線的像素值 / (密度*160) = [(長的平方+寬的平方)開根號] / (密度*160) --> dp = px / (density / 160)ide

簡單來講：屏幕密度(density) = 對角線的像素值(px) / 屏幕大小(inch)佈局

好比如今的htc one，屏幕分辨率1920*1080，屏幕大小4.7inch(英寸)，對應的密度爲：Math.sqrt(1920*1920+1080*1080) / 4.7 = 468.7<480，是xhdpiui

②密度分類spa

低密度(120) ldpi : low-density --- QVGA和WQVGA.net

中密度(160) mdpi : medium-density --- HVGA　　　　Android的屏幕密度是以160爲基準的，此時：1dp=1px翻譯

高密度(240) hdpi : high-density --- WVGA設計

超高密度(320) xhdpi : extra-high-density

極高密度(480) xxhdpi : extra-extra-high-density

③密度直觀比較圖

這是最新的官網設備密度截圖，從圖中可知：以MDPI(160)爲標準參考值1，HDPI，XHDPI，XXHDPI分別爲1.5，2，3。UI設計時，也能夠此爲參考，如設計一個中等密度(medium)屏幕的圖標大小爲48×48像素，

由low:medium:high:extra high:extra extra high = 3:4:6:8:12，這樣的比值關係，得出：低密度(low)屏幕的圖片大小應爲36×36像素，高密度(high)屏幕的爲72×72像素，超高密度(extra high)屏幕爲

96×96像素，極高密度(extra-extra-high)屏幕爲144×144像素。

由上圖可知以前的低密度的LDPI(0.75x)沒有出如今圖中，取而代之的是XXHDPI，正所謂，長江後浪推前浪，前浪被拍死在沙灘上。。。

④各ui控件像素值

Icon Type	Standard Asset Sizes (in Pixels), for Generalized Screen Densities
	Low density screen (ldpi)	Medium density screen (mdpi)	High density screen (hdpi)
Launcher	36 x 36 px	48 x 48 px	72 x 72 px
Menu	36 x 36 px	48 x 48 px	72 x 72 px
Status Bar	24 x 24 px	32 x 32 px	48 x 48 px
Tab	24 x 24 px	32 x 32 px	48 x 48 px
Dialog	24 x 24 px	32 x 32 px	48 x 48 px
List View	24 x 24 px	32 x 32 px	48 x 48 px

⑤代碼中獲取手機密度

public class TestPhoneDensity extends AndroidTestCase {

    public void testDensity() throws Exception {
        DisplayMetrics metric = new DisplayMetrics();
        WindowManager wm = (WindowManager) getContext().getSystemService(
                Context.WINDOW_SERVICE);
        wm.getDefaultDisplay().getMetrics(metric);
        int densityDpi = metric.densityDpi;
        System.out.println("densityDpi:" + densityDpi);
    }
}

獲取設備詳細信息

DisplayMetrics metric = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metric);
int width = metric.widthPixels; // 屏幕寬度(像素)
int height = metric.heightPixels; // 屏幕高度(像素)
float density = metric.density; // 屏幕密度(0.75/1.0/1.5/2.0/3.0)
int densityDpi = metric.densityDpi; // 屏幕密度DPI(120/160/240/320/480)
double diagonalPixels = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)); // 屏幕對角線長度(像素)
double screenSize = diagonalPixels / (160 * density); // 屏幕尺寸
System.out.println("寬:"+width+", 高:"+height+", 密度:"+density+"("+densityDpi+")"+"\n"+"對角線像素值:"+diagonalPixels+", 屏幕大小:"+screenSize+"英寸");

2.屏幕尺寸和密度

3.適配多種屏幕

①在manifest清單文件裏定義程序支持的屏幕類型，相應代碼以下：

<supports-screens android:resizeable=["true"| "false"]
android:smallScreens=["true" | "false"]   //是否支持小屏
android:normalScreens=["true" | "false"]  //是否支持中屏
android:largeScreens=["true" | "false"]   //是否支持大屏
android:xlargeScreens=["true" | "false"]  //是否支持超大屏
android:anyDensity=["true" | "false"]    //是否支持多種不一樣密度的屏幕
android:requiresSmallestWidthDp=」integer」
android:compatibleWidthLimitDp=」integer」
android:largestWidthLimitDp=」integer」/>

<supports-screens
android:smallScreens="true" 
android:normalScreens="true" 
android:largeScreens="true"
android:xlargeScreens="true"
android:anyDensity="true"
android:resizeable="true"/>

②對不一樣大小的屏幕提供不一樣的drawable,layout,values

res/drawable/my_drawable.png //默認
res/drawable-ldpi/my_drawable.png
res/drawable-mdpi/my_drawable.png
res/drawable-land-mdpi/my_drawable.png //橫向
res/drawable-hdpi/my_drawable.png
res/drawable-xhdpi/my_drawable.png
res/drawable-xhhdpi/my_drawable.png
res/drawable-nodpi/my_drawable.png //平板
res/drawable-hdpi-800x480/my_drawable.png //給指定分辨率作適配
res/drawable-hdpi-854x480/my_drawable.png
res/drawable-sw600dp-mdpi/my_drawable.png
res/drawable-sw600dp-hdpi/my_drawable.png
res/drawable-sw600dp-xdpi/my_drawable.png
res/drawable-sw600dp-nodpi/my_drawable.png

res/layout/my_layout.xml //默認(放一些通用佈局xml文件，好比界面中頂部和底部的佈局，不會隨着屏幕大小變化)
res/layout-land/my_layout.xml
res/layout-port/my_layout.xml
res/layout-ldpi/my_layout.xml
res/layout-mdpi/my_layout.xml
res/layout-hdpi/my_layout.xml
res/layout-land-ldpi/my_layout.xml
res/layout-land-mdpi/my_layout.xml
res/layout-land-hdpi/my_layout.xml
res/layout-small/my_layout.xml //屏幕尺寸小於3英寸左右的佈局
res/layout-normal/my_layout.xml //屏幕尺寸小於4.5英寸左右
res/layout-large/my_layout.xml //4英寸-7英寸之間
res/layout-xlarge/my_layout.xml //7-10英寸之間
res/layout-xlarge-land/my_layout.xml //橫屏
res/layout-sw600dp/my_layout.xml //sw<N>dp表示這個layout文件夾下面的佈局文件只有在設備短邊的最小寬爲N時才加載~smallestWidth
res/layout-sw600dp-port/my_layout.xml //豎屏下最小爲600的寬度
res/layout-w600dp/my_layout.xml //固定爲600的寬度
res/layout-sw720dp/my_layout.xml

res/values/dimens.xml //默認
res/values-lhdpi/dimens.xml
res/values-mdpi/dimens.xml
res/values-hdpi/dimens.xml
res/values-xhdpi/dimens.xml
res/values-xhhdpi/dimens.xml
res/values-sw600dp/dimens.xml //同上
res/values-sw720dp/dimens.xml
res/values-nodpi-1280x800/dimens.xml //1280x800分辨率的平板(nodpi用於存放無論宿主屏幕密度如何都不進行縮放的資源)
res/values-large-land/dimens.xml //橫向
res/values-large-port/dimens.xml //豎直方向

從以上文件夾名稱不難發現規律：

一類是根據dpi屏幕密度劃分(ldpi,mdpi,hdpi,xhdpi,xxhdpi,nodpi)，一類是根據屏幕尺寸劃分(small,normal,large,xlarge,1280x800-可自定義尺寸,sw<N>dp)，這兩類中又可細分紅橫屏和豎屏。

對於根據dpi屏幕密度劃分的橫豎屏：xxx-land-ldpi，對於根據屏幕尺寸劃分的橫豎屏：xxx-small-land，另外較爲複雜的：密度和尺寸混用：xxx-sw600dp-hdpi

-----------更新，看了官網的文檔，才發覺以上的總結不過是冰山一角，如下是完整版

MCC and MNC	Examples:mcc310,mcc310-mnc004,mcc208-mnc00.etc.
Language and region	Examples:en,fr,en-rUS,fr-rFR,fr-rCA.etc.
Layout Direction	ldrtl,ldltr
smallestWidth	sw<N>dp,Examples:sw320dp,sw600dp,sw720dp.etc.
Available width	w<N>dp,Examples:w720dp,w1024dp.etc.
Available height	h<N>dp,Examples:h720dp,h1024dp.etc.
Screen size	small,normal,large,xlarge
Screen aspect	long,notlong
Screen orientation	port,land
UI mode	car,desk,television,appliance
Night mode	night,notnight
Screen pixel density (dpi)	ldpi,mdpi,hdpi,xhdpi,nodpi,tvdpi
Touchscreen type	notouch,finger
Keyboard availability	keysexposed,keyshidden,keyssoft
Primary text input method	nokeys,qwerty,12key
Navigation key availability	navexposed,navhidden
Primary non-touch navigation method	nonav,dpad,trackball,wheel
Platform Version (API level)	Examples:v3,v4,v7.etc.

4.固定顯示方向

在activity節點或是application節點下配置如下參數，表示屏幕方向固定爲豎直方向或是橫向，不隨着傳感器的變化而比變化。

android:screenOrientation="portrait" //豎直方向

android:screenOrientation="landscape" //橫向

android:screenOrientation="sensor" //表示屏幕隨着重力感應的方向變化而變化<即便重力感應沒有開啓>

5.Android各類屏幕分辨率(VGA、HVGA、QVGA、WQVGA、WVGA、FWVGA)

VGA：Video Graphics Array，即：顯示繪圖矩陣，至關於640×480 像素

HVGA：Half-size VGA，即：VGA的一半，分辨率爲480×320，像三星蓋世Ace S5830就是使用這分辨率

QVGA：Quarter VGA，即：VGA的四分之一，分辨率爲320×240，通常用於小屏手機像三星蓋世Mini S5570就是使用這分辨率

WQVGA：Wide Quarter VGA，即：擴大的QVGA，分辨率比QVGA高，比VGA低，通常是：400×240，480×272

WVGA：Wide Video Graphics Array，即：擴大的VGA，分辨率爲800×480像素，像三星i9000就是使用這分辨率

FWVGA：Full Wide VGA ，數碼產品屏幕材質的一種，VGA的另外一種形式，比WVGA分辨率高，別名： Full Wide VGA, ，其分辨率爲854×480象素(16:9)

常見的分辨率

標屏	分辨率	寬屏	分辨率
QVGA	320×240	WQVGA	400×240
VGA	640×480	WVGA	800×480
SVGA	800×600	WSVGA	1024×600
XGA	1024×768	WXGA	1280×768/1280×800/1280*960
SXGA	1280×1024	WXGA+	1440×900
SXGA+	1400×1050	WSXGA+	1680×1050
UXGA	1600×1200	WUXGA	1920×1200
QXGA	2048×1536	WQXGA	2560×1536

	Low density (120), ldpi	Medium density (160), mdpi	High density (240), hdpi	Extra high density (320), xhdpi
Smallscreen	QVGA (240x320)		480x640
Normalscreen	WQVGA400 (240x400) WQVGA432 (240x432)	HVGA (320x480)	WVGA800 (480x800) WVGA854 (480x854) 600x1024	640x960
Largescreen	WVGA800 (480x800) WVGA854 (480x854)	*WVGA800 (480x800) WVGA854* (480x854)** 600x1024
Extra Largescreen	1024x600	WXGA (1280x800)^† 1024x768 1280x768	1536x1152 1920x1152 1920x1200	2048x1536 2560x1536 2560x1600

6.代碼中寫控件並設置寬高

①首先獲取當前屏幕的寬高度，由於屏幕的寬高使用頻率較高，且通常爲不變常量，因此能夠定義常量類保存當前屏幕的寬高

public class Constant {
        public static int DISPLAY_WIDTH;  //屏幕寬度
        public static int DISPLAY_HEIGHT; //屏幕高度
}

在第一個Activity啓動的時候，獲取這兩個值

DisplayMetrics displayMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
Constant.DISPLAY_WIDTH = displayMetrics.widthPixels;
Constant.DISPLAY_HEIGHT = displayMetrics.heightPixels;

在代碼中根據屏幕的寬高動態的設置控件的寬高

LayoutParams blueParams = new LayoutParams(
        (int) (Constant.DISPLAY_WIDTH * 0.2f + 0.5f),
        (int) (Constant.DISPLAY_HEIGHT * 0.2f + 0.5f));
bt_blue.setLayoutParams(blueParams);
bt_blue.setBackgroundResource(R.color.blue);

LayoutParams purpleParams = new LayoutParams(
        (int) (Constant.DISPLAY_WIDTH * 0.4f + 0.5f),
        (int) (Constant.DISPLAY_HEIGHT * 0.2f + 0.5f));
bt_purple.setLayoutParams(purpleParams);
bt_purple.setBackgroundResource(R.color.purple);

LayoutParams greenParams = new LayoutParams(
        (int) (Constant.DISPLAY_WIDTH * 0.6f + 0.5f),
        (int) (Constant.DISPLAY_HEIGHT * 0.2f + 0.5f));
bt_green.setLayoutParams(greenParams);
bt_green.setBackgroundResource(R.color.green);

LayoutParams orangeParams = new LayoutParams(
        (int) (Constant.DISPLAY_WIDTH * 0.8f + 0.5f),
        (int) (Constant.DISPLAY_HEIGHT * 0.2f + 0.5f));
bt_orange.setLayoutParams(orangeParams);
bt_orange.setBackgroundResource(R.color.orange);

LayoutParams redParams = new LayoutParams(
        (int) (Constant.DISPLAY_WIDTH * 1.0f + 0.5f),
        (int) (Constant.DISPLAY_HEIGHT * 0.2f + 0.5f));
bt_red.setLayoutParams(redParams);
bt_red.setBackgroundResource(R.color.red);