屏幕适配全攻略
最后更新于：2022-04-01 14:32:06
**一、重要概念**
屏幕尺寸：指平米的对角线的长度，单位是英寸，1英寸=2.54厘米，它对我们屏幕适配不是很重要。
屏幕分辨率：指在横纵向上的像素点数，单位是px,1px = 1个像素点，一般以纵向像素*横向像素，如1920*1080.
屏幕像素密度：指每英寸上的像素点数，单位是dpi，即“dot per inch”的缩写，像素密度与屏幕尺寸和分辨率有关
像素密度计算：对角线分辨率-->对角线分辨率除以屏幕尺寸-->像素密度
例：Nexus 5 屏幕尺寸是4.95，分辨率是1920*1080，则dpi=（√（1920*1920+1080*1080））/4.94=445
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](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>
~~~
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>
~~~
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>
~~~
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>
~~~
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;
}
~~~
**四、实施自适应用户界面流自适应**
平板和手机设备：重复使用活动中的片段，用一个标志位，处理屏幕方向变化。