屏幕適配全攻略

mb61c3f0ed6fce2 2022-01-07 09:31:24 阅读数:704

屏幕 全攻略 全攻 攻略

一、重要概念

屏幕尺寸:指平米的對角線的長度,單比特是英寸,1英寸=2.54厘米,它對我們屏幕適配不是很重要。

屏幕分辨率:指在橫縱向上的像素點數,單比特是px,1px = 1個像素點,一般以縱向像素*橫向像素,如1920*1080.

屏幕像素密度:指每英寸上的像素點數,單比特是dpi,即“dot per inch”的縮寫,像素密度與屏幕尺寸和分辨率有關

像素密度計算:對角線分辨率-->對角線分辨率除以屏幕尺寸-->像素密度


例:Nexus 5 屏幕尺寸是4.95,分辨率是1920*1080,則


px:構成圖像的最小單比特 使用android原生api返回的都是這個單比特,如獲取安卓屏幕的寬和高<br>

dp、dip:Density Independent Pixels的縮寫,即密度無關像素,以160dpi(像素密度)為基准,1dip = 1px

sp:Scale-Independent Pixels 可以根據文字大小首選項進行縮放 穀歌開發官方推薦使用12sp或以上大小單比特,否則可能用戶看不清楚

首選字體大小為12sp,14sp,18sp,22sp。不要使用基數小數,以免造成精度丟失

安卓屏幕密度劃分:mdpi、hdpi、xdpi、xxdpi

設計文檔:​ ​http://www.apkbus.com/design/style/iconography.html​

在設計圖標時,對於五種主流的像素密度(MDPI、HDPI、XHDPI、XXHDPI 和 XXXHDPI)應按照 2:3:4:6:8 的比例進行縮放。例如,一個啟動圖標的尺寸為48x48 dp,這錶示在 MDPI 的屏幕上其實際尺寸應為 48x48 px,在 HDPI 的屏幕上其實際大小是 MDPI 的 1.5 倍 (72x72 px),在 XDPI 的屏幕上其實際大小是 MDPI 的 2 倍 (96x96 px),依此類推。


二、解决方案,支持各種屏幕尺寸

1、wrap_content(包住內容) match_content匹配父容器的大小,weight:權重,同時用了wrap_content 權重大的先學會拉伸。

layout_weight只能在線程布局裏使用

計算的寬度= 原來寬度 + 剩餘空間所占百分比的寬度

假設屏幕寬度為L


Button1

2/3L = L + (L - 2L)* 1/3 = 2/3L



用0dp

1/3L = 0 + L *1/3

Button2

1/3L = L + (L- 2L)*2/3 = 1/3L


2、使用large限定符

res/layout/main.xml 單面板

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<fragment android:id="@+id/headlines"
android:layout_height="fill_parent"
android:name="com.example.android.newsreader.HeadlinesFragment"
android:layout_width="match_parent" />
</LinearLayout>

res/layout-large/main.xml 雙面板

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<fragment android:id="@+id/headlines"
android:layout_height="fill_parent"
android:name="com.example.android.newsreader.HeadlinesFragment"
android:layout_width="400dp"
android:layout_marginRight="10dp"/>
<fragment android:id="@+id/article"
android:layout_height="fill_parent"
android:name="com.example.android.newsreader.ArticleFragment"
android:layout_width="fill_parent" />
</LinearLayout>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.


3、布局別名

使用布局別名

res/layout/main.xml: 單面板布局
res/layout-large/main.xml: 多面板布局
res/layout-sw600dp/main.xml: 多面板布局



res/layout/main.xml 單面板布局
res/layout/main_twopanes.xml 雙面板布局

setContentView(R.layout.main);

默認布局
res/values/layout.xml:
<resources>
<item name="main" type="layout">@layout/main</item>
</resources>

Android3.2之前的平板布局
res/values-large/layout.xml:
<resources>
<item name="main" type="layout">@layout/main_twopanes</item>
</resources>

Android3.2之後的平板布局
res/values-sw600dp/layout.xml:
<resources>
<item name="main" type="layout">@layout/main_twopanes</item>
</resources>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.


4、屏幕寬度限定符

res/layout/main.xml,單面板(默認)布局:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<fragment android:id="@+id/headlines"
android:layout_height="fill_parent"
android:name="com.example.android.newsreader.HeadlinesFragment"
android:layout_width="match_parent" />
</LinearLayout>

res/layout-sw600dp/main.xml,雙面板布局: Small Width 最小寬度

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<fragment android:id="@+id/headlines"
android:layout_height="fill_parent"
android:name="com.example.android.newsreader.HeadlinesFragment"
android:layout_width="400dp"
android:layout_marginRight="10dp"/>
<fragment android:id="@+id/article"
android:layout_height="fill_parent"
android:name="com.example.android.newsreader.ArticleFragment"
android:layout_width="fill_parent" />
</LinearLayout>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.

5、屏幕方向限定符

使用屏幕方向限定符

res/values-sw600dp-land/layouts.xml:
<resources>
<item name="main" type="layout">@layout/main_twopanes</item>
</resources>

res/values-sw600dp-port/layouts.xml:
<resources>
<item name="main" type="layout">@layout/main</item>
</resources>

小屏幕,縱向: 1.單面板
小屏幕,橫向: 單面板
7 英寸平板電腦,縱向: 2.單面板,帶操作欄
7 英寸平板電腦,橫向: 3.雙面板,寬,帶操作欄
10 英寸平板電腦,縱向: 4.雙面板,窄,帶操作欄
10 英寸平板電腦,橫向: 雙面板,寬,帶操作欄
電視,橫向: 雙面板,寬,帶操作欄

1.res/layout/onepane.xml:(單面板)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<fragment android:id="@+id/headlines"
android:layout_height="fill_parent"
android:name="com.example.android.newsreader.HeadlinesFragment"
android:layout_width="match_parent" />
</LinearLayout>

2.res/layout/onepane_with_bar.xml:(單面板帶操作欄)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout android:layout_width="match_parent"
android:id="@+id/linearLayout1"
android:gravity="center"
android:layout_height="50dp">
<ImageView android:id="@+id/imageView1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@drawable/logo"
android:paddingRight="30dp"
android:layout_gravity="left"
android:layout_weight="0" />
<View android:layout_height="wrap_content"
android:id="@+id/view1"
android:layout_width="wrap_content"
android:layout_weight="1" />
<Button android:id="@+id/categorybutton"
android:background="@drawable/button_bg"
android:layout_height="match_parent"
android:layout_weight="0"
android:layout_width="120dp"
style="@style/CategoryButtonStyle"/>
</LinearLayout>

<fragment android:id="@+id/headlines"
android:layout_height="fill_parent"
android:name="com.example.android.newsreader.HeadlinesFragment"
android:layout_width="match_parent" />
</LinearLayout>

3.res/layout/twopanes.xml:(雙面板,寬布局)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<fragment android:id="@+id/headlines"
android:layout_height="fill_parent"
android:name="com.example.android.newsreader.HeadlinesFragment"
android:layout_width="400dp"
android:layout_marginRight="10dp"/>
<fragment android:id="@+id/article"
android:layout_height="fill_parent"
android:name="com.example.android.newsreader.ArticleFragment"
android:layout_width="fill_parent" />
</LinearLayout>

4.res/layout/twopanes_narrow.xml:(雙面板,窄布局)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<fragment android:id="@+id/headlines"
android:layout_height="fill_parent"
android:name="com.example.android.newsreader.HeadlinesFragment"
android:layout_width="200dp"
android:layout_marginRight="10dp"/>
<fragment android:id="@+id/article"
android:layout_height="fill_parent"
android:name="com.example.android.newsreader.ArticleFragment"
android:layout_width="fill_parent" />
</LinearLayout>


1.res/values/layouts.xml:
<resources>
<item name="main_layout" type="layout">@layout/onepane_with_bar</item>
<bool name="has_two_panes">false</bool>
</resources>

2.res/values-sw600dp-land/layouts.xml:
<resources>
<item name="main_layout" type="layout">@layout/twopanes</item>
<bool name="has_two_panes">true</bool>
</resources>

3.res/values-sw600dp-port/layouts.xml:
<resources>
<item name="main_layout" type="layout">@layout/onepane</item>
<bool name="has_two_panes">false</bool>
</resources>

4.res/values-large-land/layouts.xml:
<resources>
<item name="main_layout" type="layout">@layout/twopanes</item>
<bool name="has_two_panes">true</bool>
</resources>

5.res/values-large-port/layouts.xml:
<resources>
<item name="main_layout" type="layout">@layout/twopanes_narrow</item>
<bool name="has_two_panes">true</bool>
</resources>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.
  • 110.
  • 111.
  • 112.
  • 113.
  • 114.
  • 115.
  • 116.
  • 117.
  • 118.
  • 119.
  • 120.
  • 121.
  • 122.
  • 123.
  • 124.
  • 125.
  • 126.
  • 127.
  • 128.


6、.9圖的使用

目錄為:sdk->tools->draw9patch.bat

主要是通過在這四條邊畫一個像素長度的點或線,來控制想要進行拉伸或者添加間隔的操作。

左邊和上邊的線控制的是拉伸區域(Stretchable area),這兩條線的中心交集區域就是要

進行的拉伸區域;而右邊和下邊的兩條線控制的是間隔區域(Padding box),這兩條邊是可選的,這個區域用來寫內容

三、解决方案,支持各種屏幕密度

1.使用非密度制約像素

android:layout_alignParentRight="true"

2.提供備用比特圖

多提供幾張圖片。使用和目標文件夾相符的文件夾,占用內存小,因為圖標放大的時候內存也會增加。

3、代碼適配

dp和px的關系: dp = px/設備密度

public static int dp2px(Context ctx, float dp) {  
        float density = ctx.getResources().getDisplayMetrics().density;  
        int px = (int) (dp * density + 0.5f);// 四舍五入  
  
        return px;  
    }  
  
    public static float px2dp(Context ctx, int px) {  
        float density = ctx.getResources().getDisplayMetrics().density;  
        float dp = px / density;  
  
        return dp;  
    }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.


四、實施自適應用戶界面流自適應

平板和手機設備:重複使用活動中的片段,用一個標志比特,處理屏幕方向變化。

版权声明:本文为[mb61c3f0ed6fce2]所创,转载请带上原文链接,感谢。 https://gsmany.com/2022/01/202201070931239714.html