为什么Android就得做屏幕适配

由于Android系统是开源的，任何用户、开发者、OEM厂商、运营商都可以对Android进行定制，导致运行Android的设备多种多样，它们屏幕尺寸和像素密度都不甚相同。尽管我们通过基本的缩放和调整大小能使界面适配不同屏幕，但还是需要进一步优化，来确保所有界面能在不同设备上美观地展现出来。

怎么做屏幕适配

几个重要的概念

像素

像素是指由图像的小方格组成的，这些小方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现出来的样子。通俗来讲，小时候家里面大屁股电视没有信号的时候，肉眼可以看到一个一个点状的东西就是像素点。

屏幕尺寸

屏幕尺寸指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米

比如常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等

屏幕分辨率

屏幕分辨率是指在横纵向上的像素点数，单位是px，1px就是1个像素点。一般我们描述屏幕分辨率是以纵向像素*横向像素，比如1080x1920。表示宽度方向上有1080个像素点，长度方向上有1920个像素点。

单位： px （ pixel ）， 1px=1 像素点

Android 手机常见的分辨率： 320x480 、 480x800 、 720x1280 、 1080x1920

UI设计师的设计图会以 px 作为统一的计量单位。

屏幕像素密度

屏幕像素密度是指每英寸上的像素点数，单位是dpi，即“dot per inch”的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小，分辨率越高，像素密度越大。

假设设备内每英寸有 160 个像素，那么该设备的屏幕像素密度 就是160dpi。

安卓手机对于每类手机屏幕大小都有一个相应的屏幕像素密度：

标准屏幕像素密度（mdpi）： 每英寸长度上有160个像素点（160dpi），即称为标准屏幕像素密度（mdpi）。

我们可以通过两个adb命令获取到屏幕分辨率：
<1>adb shell wm size

<2>adb shell dumpsys window displays 

屏幕尺寸、分辨率、像素密度三者关系

密度无关像素

 Android开发时用dp而不是px单位设置图片大小，是Android特有的单位。

场景：假如同样都是画一条长度是屏幕一半的线，如果使用 px 作为计量单位，那么 480x800 分辨率手机上设置应为240px ；在 320x480 的手机上应设置为 160px ，二者设置就不同了；如果使用 dp为单位，在这两种分辨率下， 160dp 都显示为屏幕一半的长度。

在Android中，规定以160dpi（即屏幕分辨率为320x480）为基准：1dp=1px  （谷歌给的标准）

布局适配（备用布局）

布局适配是指我们根据不同屏幕尺寸的设备设计不同的备用布局，以便应用在运行时根据屏幕的配置加载相应的UI布局。谷歌官方为我们提供了各种限定符。

size（尺寸）限定符（注：这种方式只适合Android 3.2之前的版本）

res目录新建一个layout-large文件夹，布局名字和res/layout里面的同名。在平板电脑和电视的屏幕（>7英寸）上：实施 双面板 模式以同时显示更多内容，它会加载res/layout-large里面的布局，在手机较小的屏幕上：使用 单面板 模式分别显示内容，加载的是res/layout里面的同名布局。

 Smallest-Width（最小宽度）限定符

使用“最小宽度”屏幕尺寸限定符，我们可以为具有最小宽度（以密度无关像素 dp 或 dip 为度量单位）的屏幕提供备用布局。

通过将屏幕尺寸描述为密度无关像素的度量值，Android 允许我们创建专为非常具体的屏幕尺寸而设计的布局，同时让您不必对不同的像素密度有任何担心。

例如，您可以创建一个名为 main_activity 且针对手机和平板电脑进行了优化的布局，方法是在目录中创建该文件的不同版本，如下所示：

res/layout/main_activity.xml           # For handsets (smaller than 600dp available width)
res/layout-sw600dp/main_activity.xml   # For 7” tablets (600dp wide and bigger)

最小宽度限定符指定屏幕两侧的最小尺寸，而不考虑设备当前的屏幕方向，因此这是一种指定布局可用的整体屏幕尺寸的简单方法。

下面是其他最小宽度值与典型屏幕尺寸的对应关系：

• 320dp：典型手机屏幕（240x320 ldpi、320x480 mdpi、480x800 hdpi 等）。
• 480dp：约为 5 英寸的大手机屏幕 (480x800 mdpi)。
• 600dp：7 英寸平板电脑 (600x1024 mdpi)。
• 720dp：10 英寸平板电脑（720x1280 mdpi、800x1280 mdpi 等）。

今日头条的适配方案

import android.app.Activity;
import android.app.Application;
import android.content.ComponentCallbacks;
import android.content.res.Configuration;
import android.util.DisplayMetrics;

import androidx.annotation.NonNull;

public class WindowUtils {
	/**
	 * 系统的Density
	 */
	private static float sNonCompatDensity;
	
	/**
	 * 系统的ScaledDensity
	 */
	private static float sNonCompatScaleDensity;
	
	public static void setCustomDensity(Activity activity) {
		Application application = activity.getApplication();
		final DisplayMetrics appDisplayMetrics = application.getResources().getDisplayMetrics();
		if (sNonCompatDensity == 0) {
			// 系统的Density:长度相关参数（dp）
			sNonCompatDensity = appDisplayMetrics.density;
			// 系统的ScaledDensity：字体相关参数（sp）
			sNonCompatScaleDensity = appDisplayMetrics.scaledDensity;
			// 监听在系统设置中切换字体
			application.registerComponentCallbacks(new ComponentCallbacks() {
				@Override
				public void onConfigurationChanged(@NonNull Configuration newConfig) {
					if (newConfig != null && newConfig.fontScale > 0) {
						sNonCompatScaleDensity = application.getResources().getDisplayMetrics().scaledDensity;
					}
				}
				
				@Override
				public void onLowMemory() {
				
				}
			});
		}
		/*
		 * 如果UX提供的是480dp的设计稿,也就是分辨率为1080*1920的设计稿
		 *
		 * 把系统的逻辑密度（density）和像素密度（dpi）根据UX提供的设计稿进行处理
		 */
		final float targetDensity = appDisplayMetrics.widthPixels / 480;
		final float targetScaledDensity = targetDensity * (sNonCompatScaleDensity / sNonCompatDensity);
		final int targetDensityDpi = (int) (160 * targetDensity);
		
		/**
		 * 设置Application对应的DisplayMetrics参数
		 */
		appDisplayMetrics.density = targetDensity;
		appDisplayMetrics.scaledDensity = targetScaledDensity;
		appDisplayMetrics.densityDpi = targetDensityDpi;
		
		/**
		 * 同时也要设置Activity对应的DisplayMetrics参数
		 */
		final DisplayMetrics activityDisplayMetrics = activity.getResources().getDisplayMetrics();
		activityDisplayMetrics.density = targetDensity;
		activityDisplayMetrics.scaledDensity = targetScaledDensity;
		activityDisplayMetrics.densityDpi = targetDensityDpi;
	}
}

约束布局

可以在Api9以上的Android系统使用ConstraintLayout（约束布局），它的出现主要是为了解决布局嵌套过多导致解析布局和绘制UI消耗时间过长的问题，从AS 2.3 起，官方的模板默认使 ConstraintLayout，也会自动帮我们添加约束布局的依赖。同时约束布局也可以解决90%以上的安卓屏幕适配问题。

implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

约束布局基本属性

控制 View 最大尺寸和最小尺寸的属性，可以设置到 ConstraintLayout 上来控制其尺寸。

相对定位 

与相对布局一样，约束布局中如果对控件没有添加约束时，默认控件会出现根布局的左上角。

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/color_7"
        android:gravity="center"
        android:text="没有约束"
        android:textSize="@dimen/text_size_32"
        app:layout_constraintWidth_min="@dimen/min_width_dip_120"
        tools:ignore="MissingConstraints" />    

    <TextView
        android:id="@+id/target"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintWidth_min="@dimen/min_width_dip_120"
        android:text="目标控件"
        android:gravity="center"
        android:textSize="@dimen/text_size_32"
        android:background="@color/color_10"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />    

     <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/color_3"
        android:gravity="center"
        android:text="A"
        android:textSize="@dimen/text_size_32"
        app:layout_constraintEnd_toStartOf="@+id/target"
        app:layout_constraintTop_toTopOf="@+id/target"
        app:layout_constraintWidth_min="@dimen/min_width_dip_120" />

上面的代码效果如下：

首先目标控件是以父布局也就是根布局为基准，上下左右方向都与根布局建立约束，最终效果就是居中显示；而A控件又把目标控件作为基准，通过app:layout_constraintEnd_toStartOf="@+id/target"将其末端与目标控件始端建立约束；再通过app:layout_constraintTop_toTopOf="@+id/target"将其顶部与目标控件顶部建立约束。

关于相对定位的常用属性：
layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf

PS：start/end是为了适配比如阿拉伯国家阅读习惯的，阿拉伯国家是从右往左阅读的。

Baseline指的是文本基线，两个TextView的高度不一致，但是我们却希望它们文本对齐，这个时候就可以使用layout_constraintBaseline_toBaselineOf，代码如下：

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/color_10"
        android:gravity="center"
        android:text="文本对齐"
        android:textSize="@dimen/text_size_32"
        app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintBaseline_toBaselineOf="@+id/target"
        app:layout_constraintWidth_min="@dimen/min_width_dip_120" />

    <TextView
        android:id="@+id/target"
        android:layout_width="@dimen/horizontal_min_dip_160"
        android:layout_height="@dimen/vertical_min_dip_160"
        android:background="@color/color_10"
        android:gravity="center"
        android:text="中间位置"
        android:textSize="@dimen/text_size_32"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_min="@dimen/min_width_dip_120" />

效果图：

未完待续... 

参考文档：
《设备兼容性概览》https://developer.android.com/guide/practices/compatibility?hl=zh-cn#java

0 前言

快乐李同学最新在学习Android屏幕适配相关的知识点，其中涉及到了很多Android屏幕适配相关概念和度量单位，但是快乐李同学掌握的相关知识不牢固，于是决定写出这两篇文章对这方面的知识点做一个总结，Android屏幕适配系列文章共两篇：

1. 《2021年最全Android屏幕适配的度量单位px dp(dip) ppi dpi sp pt的区别》
2. 《2021年最详细的Android屏幕适配方案汇总》

1 Android屏幕适配相关概念

1.1 屏幕尺寸(Screen Size)

1.1.1 设备的屏幕尺寸

设备的屏幕尺寸是设备屏幕的对角线的长度，单位是英寸，1英寸等于2.54厘米。比如常见的设备屏幕尺寸有3.5"、4.0"、5.5"等。

1.1.2 应用的屏幕尺寸

应用的屏幕尺寸是Android系统为该应用所提供的可见空间。应用的屏幕尺寸并非设备的屏幕尺寸，而是综合考虑屏幕方向、系统装饰（如标题栏和导航栏）和窗口配置更改（例如当用户启用多窗口模式时）后的尺寸。

多窗口模式：Android7.0及以上设备支持的分屏模式、Android7.0及以上的大尺寸屏幕设备支持的自由窗口模式、Android8.0及以上设备支持的画中画模式。

例如以设备屏幕尺寸为1080px*2400px的Redmi K30Pro设备为例，我们把开发助手APP分别在不带导航栏的全屏模式、带导航栏的全屏模式、分屏模式和自由窗口模式下打开并检测屏幕属性，截图如下：
我们可以发现：这四种情况下检测出的屏幕分辨率永远都是1080px*2400px，这就是我们所说的设备的屏幕尺寸；但这四种情况下检测出的可用屏幕分辨率却各不相同，上图的蓝框圈中的区域便是可用屏幕分辨率所描述的区域，这也就是我们所说的应用的屏幕尺寸。

1.2 屏幕分辨率(Screen Resolution)

屏幕分辨率是指在横向和纵向上的像素点数、单位是px(pixel)，1px等于1个像素点，一般设备的屏幕分辨率以“纵向像素*横向像素”来表示，例如1920px*1080px。

1.3 度量单位px、dp(dip)、ppi、dpi、sp、pt

1.3.1 像素px(pixel)

像素，1px代表物理屏幕上面的一个像素点。由于Android设备分辨率繁杂、厂商过多的原因，px在实际的开发过程中不建议被使用。如宽高都为100px的图片，在不同分辨率的设备上可能显示的大小不一致，如下图(图片来自android_developer_screens_support)：

1.3.2 密度无关像素dp/dip(Density-independent Pixels)

密度无关像素是一个基于屏幕物理密度的度量单位，在160dpi的屏幕中1dp大约等于1px。当在更高密度的屏幕上运行时，用于绘制1dp的像素数量会被一个适合屏幕dpi的density因子放大，例如在320dpi的屏幕中1dp大约等于2px。而在低密度屏幕上，1dp的像素数量会减少。

也就是说，dp与px的比值与屏幕物理密度成正相关，但不一定成正比。度量单位dp可以在布局中适当地调整UI组件的大小，以适合不同的屏幕密度。换句话说，它为您在不同设备上的UI元素的真实大小提供了一致性。

为什么说dp与px的比值与屏幕物理密度成正相关，而不是成正比呢？

---

这主要是因为Android开发者可以在代码中指定浮点数的dp或者px，但当在设备屏幕上按照对应的dp或px显示内容时要进行四舍五入取整，因为设备屏幕都是一个个像素点构成的，因此它们的关系是成正相关。

---

举个例子，一个宽高为11dp*11dp的ImageView，在density为1.0的设备屏幕上显示的实际像素为11px*11px，但在density为1.5的设备屏幕上显示的实际像素为17px*17px，而不是16.5px*16.5px。因为一个1px*1px的像素点只能是要么显示，要么不显示，所以Android系统中会将16.5px*16.5px四舍五入取整为17px*17px。

Android官方文档《支持不同的像素密度》对于屏幕适配的观点是：必须避免的第一个陷阱是使用像素px来定义距离或尺寸。使用像素来定义尺寸会带来问题，因为不同的屏幕具有不同的像素密度，所以同样数量的像素在不同的设备上可能对应于不同的物理尺寸。

例如下方同样是4.0英寸的两部手机，左边那台手机的分辨率很低，是320px*180px，右边那台是960px*540px。如果将显示字母a图片的ImageView宽高都设置为100px，那么左边手机显示的字母a图片很大，而右边手机显示的字母a图片很小。

只有将显示字母a图片的ImageView宽高都设置为100dp，才能出现下面的效果，即该字母a图片在两台分辨率不同的手机看起来实际的物理宽高差不多一致，而不是一大一小。

要在密度不同的屏幕上保持一个UI组件显示出相同的尺寸，您必须使用密度无关像素 (dp) 作为度量单位来设计界面。dp 是一个虚拟像素单位，1 dp 约等于在在基准密度160dpi屏幕上的1px。对于其他每个密度，Android 会将此值转换为相应的实际像素数。

1.3.3 像素密度ppi(pixels per inch)

像素密度是一个表示打印图像或显示器单位面积上像素数量的指数。一般用来计量电脑显示器、电视机和手机屏幕的精细程度，例如手机销售商一般会标识出售手机的ppi，例如淘宝店中小米K30Pro手机标识的ppi为395。通常情况下，ppi越高的屏幕，屏幕显示的内容更细腻和真实，其中ppi的计算公式如下：

以分辨率1280*720、屏幕对角线尺寸为4.3英寸的设备为例：ppi = √(12802+7202) / 4.3 = 341.5359……≈342。

1.3.4 屏幕密度dpi(dots per inch)

屏幕密度是一个用于点阵数位影像的度量单位，意思是每一英寸长度中取样点或可显示点的数目。为简便起见，Android 将所有屏幕密度分组为六种通用密度，具体如下表：

1.3.4.1 密度无关像素dp的缩放因子density

在《Android官方文档-Reference-DisplayMetrics.density》中对屏幕密度dpi的缩放因子density有以下的解释：

density是密度无关像素dp的缩放因子，体现在android.util包中的DisplayMetrics.density 字段。将dp单位转换为px单位时，该字段是必须使用的缩放系数，160dpi屏幕的density是1，而240dpi屏幕的density是1.5，以此类推。利用density可以简单转换dp和px这两个度量单位：

px = dp * density = dp * (dpi / 160)

假设在某一应用中，用户的手指至少移动16px之后，系统才会识别出滚动或滑动手势。在160dpi基准屏幕上，用户必须移动 16 pixels / 160 dpi（等于一英寸的 1/10 或 2.5 毫米），系统才会识别该手势。而在配备高密度显示屏 (240dpi) 的设备上，用户的手指必须至少移动 16 pixels / 240 dpi，相当于 1 英寸的 1/15（1.7 毫米）。此距离短得多，因此用户会感觉应用在该设备上更灵敏。

要解决此问题，必须在代码中以 dp 表示手势阈值，然后再转换为实际像素。例如：

//以dp为度量单位的手势阈值
private static final float GESTURE_THRESHOLD_DP = 16.0f;
//获得当前设备的密度无关像素dp的缩放因子density
final float density = getResources().getDisplayMetrics().density;
//基于density将dp转化为当前设备适应的px，
mGestureThreshold = (int) (GESTURE_THRESHOLD_DP * density + 0.5f)
//使用以px为度量单位的mGestureThreshold变量值作为当前APP的手势阈值

DisplayMetrics.density 字段根据当前像素密度指定将 dp 单位转换为像素时所必须使用的缩放系数。在中密度屏幕上，DisplayMetrics.density 等于 1.0；在高密度屏幕上，它等于 1.5；在超高密度屏幕上，等于 2.0；在低密度屏幕上，等于 0.75。此数字是一个系数，用其乘以 dp 单位，即可得出当前屏幕的实际像素数。

1.3.4.2 ppi与dpi的区别

dpi(dots per inch)、ppi(pixels per inch)，前者突出dot(物理像素点)，后者突出pixel(像素)，dot是一个物理的像素点，pixel就不一定了，一个pixel可能由很多个物理dot组成。

PPI描述了数字图像的像素分辨率，而DPI描述了打印图像上的墨点数量。尽管PPI在很大程度上是指屏幕显示，但它也会影响设计的打印尺寸，从而影响输出的质量。而DPI与数字化无关，主要涉及印刷。

对Android而言，dpi等同于ppi，具体可以参考文章《PPI vs. DPI: what’s the difference?》。

1.3.5 缩放无关像素sp(Scale-independent Pixel)

在定义文本大小时，应该用可缩放像素sp作为单位。sp与dp很类似，但唯一的区别是：Android系统允许用户自定义文字尺寸大小（小、正常、大、超大等），当文字尺寸是“正常”时，1sp=1dp，而当文字尺寸是“大”或者“超大”时，1sp>1dp。

1.3.6 点pt(point)

pt在两种环境中有两种不同的含义：在PhotoShop中，pt用来指定电子图像的尺寸并映射到印刷设备；而在iOS应用开发中，pt用来将指定电子图像的尺寸并映射到iOS设备。

但在上述两种环境下，pt都是逻辑单位，用来隔离输出设备的精度差异，保证输出结果的物理尺寸不会忽大忽小。

1.3.6.1 iOS设备中的点pt(point)

在iOS应用开发中，pt用来将指定电子图像的尺寸并映射到iOS设备。在163ppi的iOS设备中，1pt映射成1px，且1inch(英尺)等于163pt。而对于其他不同ppi的iOS设备，1pt可能会映射成2px、3px等像素，具体可参考下述表格：

1.3.6.2 PhotoShop中的点pt(point)

在PhotoShop中，pt用来指定电子图像的尺寸并映射到印刷设备。其中PhotoShop指定，当ppi为72时，PhotoShop中1pt映射成1px。且1inch等于72pt。

2 2021年最详细的Android屏幕适配方案汇总

请阅读快乐李同学写的文章《2021年最详细的Android屏幕适配方案汇总》。

本文参考文献：

Android开发者-文档-指南-应用资源概览

Android开发者-文档-指南-设备兼容性-设备兼容性概览

Android开发者-文档-指南-设备兼容性-支持不同的屏幕尺寸

Android开发者-文档-指南-设备兼容性-支持不同的像素密度

【Android屏幕适配】浅析px、dp、ppi、dpi、sp

iOS开发中使用的单位pt与ps中的pt是不是同一个概念？个人觉得不是。望高手解答…？

腾讯何家成-Android 屏幕适配：最全面的解决方案

张鸿洋-Android 屏幕适配方案

志当存高远。——诸葛亮

 屏幕尺寸大全

菜单栏共有5个选项，包括手机、平板、手表、电脑、显示器，分别显示屏幕尺寸、PPI、纵横比、dp和px 单位下的宽✘高，以及DPI。

官方设计规范

适配原理

 屏幕尺寸 

严格来说，屏幕尺寸实际被物理尺寸和显示分辨率两个部分定义。而我们今天对各类手机、Pad 设备所说的屏幕尺寸，只指物理尺寸。如果一块手机屏幕的物理尺寸是 5.0 英寸，即是指该手机屏幕对角线的长度。

屏幕分辨率

屏幕分辨率是指屏幕图像的精密度，是显示器所能显示的像素的具体数值。 如一个手机标称分辨率是 400 x 800，即表示屏幕横向由 400 个像素点组成，纵向由 800 个像素点组成。由于屏幕上的点、线和面都是由像素组成的，屏幕具备的像素点越多，画面就越精细。分辨率越高，单位面积内显示的信息就越多，我们能看到的内容就越多。 

屏幕比例

屏幕比例是指屏幕的宽度与高度的比例，今天更多指分辨率的比例，即
屏幕比例 = 屏幕横向分辨率 / 屏幕纵向分辨率
此外，在各类设备、平台之间也有一些比较常用的比例，同时也推荐大家在开发对应设置或平台的应用时使用推荐比例。
使用推荐比例可以让用户在使用我们的 App 时更舒适，带来更好的使用体验。

DPI
DPI（Dots Per Inch），每英寸所拥有的点数，原用于打印机、鼠标的精确度指标。
在屏幕方面一般使用 PPI 来表示精度。 

PPI
PPI（Pixels Per Inch），每英寸所拥有的像素数，屏幕的 PPI 越高，表示屏幕中的每个像素点之间的距离越接近，像素的密度越高，这样屏幕内容看起来就更加细腻、真实。
而当 PPI 超过 300 时，屏幕被认为达到了视网膜级别，一般情况下人眼已经较难察觉 300 以上 PPI 之间的差别。

屏幕密度（Density）
Density 由 Android 1.6 版本（Android API Level 4）为了适配不同大小的屏幕而提出，表示每英寸有多少个显示点(逻辑值)，它的单位是 DPI。
在 Android 原生开发中，常常使用 dp/dip/sp 等单位来定义视图、文字的宽高
理论上当 Density 的值为 160 DPI 时，1px = 1dp，当前屏幕的 Density 为 320 DPI 时，2px = 1dp 

倍率DPR(devicePixelRatio)

有的地方也叫设备像素比，是设备像素dp和设备独立像素dips的比例，
也就是dpr = dp / dips 

逻辑分辨率
逻辑分辨率在 APICloud 应用中也可以被当做显示分辨率使用。
逻辑分辨率与屏幕分辨率在当今的主流设备中是不相同的，公式为：
逻辑分辨率 = 屏幕分辨率 / 屏幕倍率
在 Android 系统中，根据 DP 的定义 1dp = 1px 时， Density 为 160，可知公式为：
Android 屏幕倍率 = Density / 160
如 iPhone 4 的屏幕分辨率为 640 x 960，逻辑分辨率为：
640 / 2 x 960 / 2 = 320 x 480
而小米 2 的屏幕分辨率为 720 x 1280，Density 为 320，逻辑分辨率为：
720 / (320 / 160) x 1280 / (320 / 160) = 360 x 640 

屏幕适配（自适应）方案

     现代手机屏幕尺寸各不相同，导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同。为了达到一套代码所有手机体验一致效果，需要做尺寸上的适配。

计算公式：实际尺寸 = UI尺寸 * 设备宽度/设计图宽度

1px方案 : 1px = 1 / 设备像素比

750设计图为例

import 'package:flutter/material.dart';
import 'dart:ui';

class Adapt {
    static MediaQueryData mediaQuery = MediaQueryData.fromWindow(window);
    static double _width = mediaQuery.size.width;
    static double _height = mediaQuery.size.height;
    static double _topbarH = mediaQuery.padding.top;
    static double _botbarH = mediaQuery.padding.bottom;
    static double _pixelRatio = mediaQuery.devicePixelRatio;
    static var _ratio;
    static init(int number){
        int uiwidth = number is int ? number : 750;
        _ratio = _width / uiwidth;
    }
    static px(number){
        if(!(_ratio is double || _ratio is int)){Adapt.init(750);}
        return number * _ratio;
    }
    static onepx(){
        return 1/_pixelRatio;
    }
    static screenW(){
        return _width;
    }
    static screenH(){
        return _height;
    }
    static padTopH(){
        return _topbarH;
    }
    static padBotH(){
        return _botbarH;
    }
}

// 设置文本大小 30 为设计图尺寸
new Text(
    'Hello World!',
    style: TextStyle(
         fontSize: Adapt.px(30),
     )
)

// 容器尺寸大小设置 一个设计图为 300*300像素的容器
new Container(    width: Adapt.px(300),  
    height: Adapt.px(300),
)

// 1px 
new Container(
    decoration: new BoxDecoration(
          border: new Border(bottom:BorderSide(width: Adapt.one())),
    ),
)

 

屏幕适配方案插件-完美解决屏幕适配

插件地址

添加依赖

dependencies:
  flutter:
    sdk: flutter
  # 添加依赖
  flutter_screenutil: ^0.5.0 

属性	类型	默认值	描述
width	int	1080px	设计稿中设备的宽度,单位px
height	int	1920px	设计稿中设备的高度,单位px
allowFontScaling	bool	false	设置字体大小是否根据系统的“字体大小”辅助选项来进行缩放

初始化

@override
Widget build(BuildContext context) {
  ScreenUtil.init(context, width: 750, height: 1624, allowFontScaling: true);
}    

//填入设计稿中设备的屏幕尺寸

//默认 width : 1080px , height:1920px , allowFontScaling:false
ScreenUtil.instance = ScreenUtil.getInstance()..init(context);

//假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334) 
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);

//设置字体大小根据系统的“字体大小”辅助选项来进行缩放,默认为false : 字体随着系统的“字体大小”辅助选项来进行缩放
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: true)..init(context); 

适配尺寸

//长方形:
Container(
           width: ScreenUtil.getInstance().setWidth(375),
           height: ScreenUtil.getInstance().setHeight(200),
            ),
            
//如果你想显示一个正方形:
Container(
           width: ScreenUtil.getInstance().setWidth(300),
           height: ScreenUtil.getInstance().setWidth(300),
            ), 

适配字体-传入设计稿的px尺寸

//传入字体大小，默认不根据系统的“字体大小”辅助选项来进行缩放(可在初始化ScreenUtil时设置allowFontScaling)
ScreenUtil.getInstance().setSp(28)         
 
//传入字体大小，根据系统的“字体大小”辅助选项来进行缩放(如果某个地方不遵循全局的allowFontScaling设置)     
ScreenUtil(allowFontScaling: true).setSp(28)        
     
//for example:

Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text('我的文字大小在设计稿上是25px，不会随着系统的文字缩放比例变化',
                    style: TextStyle(
                        color: Colors.black, fontSize: ScreenUtil.getInstance().setSp(24))),
                Text('我的文字大小在设计稿上是25px，会随着系统的文字缩放比例变化',
                    style: TextStyle(
                        color: Colors.black, fontSize: ScreenUtil(allowFontScaling: true).setSp(24))),
              ],
            ) 

 其他相关api

 ScreenUtil.pixelRatio       //设备的像素密度
    ScreenUtil.screenWidth      //设备宽度
    ScreenUtil.screenHeight     //设备高度
    ScreenUtil.bottomBarHeight  //底部安全区距离，适用于全面屏下面有按键的
    ScreenUtil.statusBarHeight  //状态栏高度 刘海屏会更高  单位px
    ScreenUtil.textScaleFactory //系统字体缩放比例
    
    ScreenUtil.getInstance().scaleWidth  // 实际宽度的dp与设计稿px的比例
    ScreenUtil.getInstance().scaleHeight // 实际高度的dp与设计稿px的比例 

 

  @override
  Widget build(BuildContext context) {
    //设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
    ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
    
    print('设备宽度:${ScreenUtil.screenWidth}'); //Device width
    print('设备高度:${ScreenUtil.screenHeight}'); //Device height
    print('设备的像素密度:${ScreenUtil.pixelRatio}'); //Device pixel density
    print(
        '底部安全区距离:${ScreenUtil.bottomBarHeight}'); //Bottom safe zone distance，suitable for buttons with full screen
    print(
        '状态栏高度:${ScreenUtil.statusBarHeight}px'); //Status bar height , Notch will be higher Unit px

    print('实际宽度的dp与设计稿px的比例:${ScreenUtil.getInstance().scaleWidth}');
    print('实际高度的dp与设计稿px的比例:${ScreenUtil.getInstance().scaleHeight}');

    print(
        '宽度和字体相对于设计稿放大的比例:${ScreenUtil.getInstance().scaleWidth * ScreenUtil.pixelRatio}'); 
    print(
        '高度相对于设计稿放大的比例:${ScreenUtil.getInstance().scaleHeight * ScreenUtil.pixelRatio}'); 
    print('系统的字体缩放比例:${ScreenUtil.textScaleFactory}');

    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Row(
              children: <Widget>[
                Container(
                  width: ScreenUtil.getInstance().setWidth(375),
                  height: ScreenUtil.getInstance().setHeight(200),
                  color: Colors.red,
                  child: Text(
                    '我的宽度:${ScreenUtil.getInstance().setWidth(375)}dp',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: ScreenUtil.getInstance().setSp(12),
                    ),
                  ),
                ),
                Container(
                  width: ScreenUtil.getInstance().setWidth(375),
                  height: ScreenUtil.getInstance().setHeight(200),
                  color: Colors.blue,
                  child: Text('我的宽度:${ScreenUtil.getInstance().setWidth(375)}dp',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: ScreenUtil.getInstance().setSp(12),
                      )),
                ),
              ],
            ),
            Text('设备宽度:${ScreenUtil.screenWidth}px'),
            Text('设备高度:${ScreenUtil.screenHeight}px'),
            Text('设备的像素密度:${ScreenUtil.pixelRatio}'),
            Text('底部安全区距离:${ScreenUtil.bottomBarHeight}px'),
            Text('状态栏高度:${ScreenUtil.statusBarHeight}px'),
            Text(
              '实际高度的dp与设计稿px的比例:${ScreenUtil.getInstance().scaleHeight}',
              textAlign: TextAlign.center,
            ),
            Text(
              '实际高度的dp与设计稿px的比例:${ScreenUtil.getInstance().scaleHeight}',
              textAlign: TextAlign.center,
            ),
            Text(
              '宽度和字体相对于设计稿放大的比例:${ScreenUtil.getInstance().scaleWidth * ScreenUtil.pixelRatio}',
              textAlign: TextAlign.center,
            ),
            Text(
              '高度相对于设计稿放大的比例:${ScreenUtil.getInstance().scaleHeight * ScreenUtil.pixelRatio}',
              textAlign: TextAlign.center,
            ),
            SizedBox(
              height: ScreenUtil.getInstance().setHeight(100),
            ),
            Text('系统的字体缩放比例:${ScreenUtil.textScaleFactory}'),
            Column(
                         crossAxisAlignment: CrossAxisAlignment.start,
                         children: <Widget>[
                           Text('我的文字大小在设计稿上是25px，不会随着系统的文字缩放比例变化',
                               style: TextStyle(
                                   color: Colors.black, fontSize: ScreenUtil.getInstance().setSp(24))),
                           Text('我的文字大小在设计稿上是25px，会随着系统的文字缩放比例变化',
                               style: TextStyle(
                                   color: Colors.black, fontSize: ScreenUtil(allowFontScaling: true).setSp(24))),
                         ],
                       )
          ],
        ),
      ),
    );
  } 

 

全面屏、折叠屏适配与兼容问题

一 启动白屏问题 

       采用Flutter 开发的app,无论Android还是Ios,都会出现白屏的现象，大概持续1-3秒，他会根据手机或模拟器的速溶而不同，时间可长可短。Flutter 应用在启动的时候会先启动Flutter SDK, 然后加载到内存里面 ，然后完成渲染，在这个过程中 它是没有内容可以显示的，因此会显示白屏.

二 解决白屏问题

 

（1）可以在flutter项目中引入插件

 

 https://pub.dev/packages/flutter_splash_screen

 

注意 ：Android App启动的时候，会有一个默认的白屏 ，这个白屏在启动的时候会显示主题，如果主体色不是透明的 就会有个白屏

    Android的白屏非两个部分，一个是主题的白屏（如果主题不是透明的时候，点击图标会显示白屏），二，当App启动起来之后，会显示启动屏（如果没有启动屏，会显示默认的白屏）

二 Flutter 全面屏适配指南

1）全面屏特点，以及存在问题

   

   特点： 

        1 大屏占比高、长宽比不再试16:9，达到了19.5:9甚至更高

        2 短边的像素，density的取值是一样的 所有适配的是长边

 

问题：

       1. 传统布局的高度不足，导致上下留黑边

       2. 基于屏幕顶部或底部的布局，如弹框，在全面屏手机上会发生位移

       3. 安全区域问题

 

Flutter中全面屏的页面适配分两种情况：

 

     1.一种是对于页面已经使用了Scaffold的appBar 与bottomNavigationBar页面是不需要额外适配的，因为Scaffold框架会自动化帮助我们完成这些适配工作；

     2. 另外一种情况，没有使用了Scaffold或者Scaffold的appBar 与bottomNavigationBar页面，改如何适配全面屏呢？

 

  （1） 适配要点

        . 顶部NavigationBar上部留安全区域

        .  底部NavigationBar底部留安全区域

 

   对于安全区域的适配有两种方案：

 

      1. 采用 SafeArea来包裹页面，SafeArea是Flutter中的一个用于全面屏的一个组件，类似RN中SafeAreaView 主要用于解决适配全面屏手机的安全取悦问题；

     2.借助MeadiaQuery.of(context).padding 获取屏幕四周的padding,然后根据padding自己手动实现对安全区域的控制；

     . 方案一：相对简单的，只需要引入SafeArea，但不够灵活

     . 方案二：需要借助MeadiaQuery.of(context).padding自己实现对安全区域的控制，相对复杂些，但灵活度高

 

借助 MediaQuery.of(context).padding手动适配

 

 提示：使用MediaQuery.of时要留意它所属的widget 不能直接和runApp解除，需要一个带有MaterialApp的widget 包裹一下这样才能使用MediaQuery.of

 

富有表现力，漂亮的用户界面

 

 

Android基础 - 如何做鲁棒性更高的布局

Android 启动背景图怎么适配？

ANDROID SPLASH启动页秒开方案，适配全面屏

Android 启动页全面屏的适配