理解今日头条屏幕适配方案

我理解中的今日头条屏幕适配方案是通过修改系统的density,使每个view的宽度或者高度,占屏幕的百分比与最初设计开发时一致.来达到适配效果

为什么需要适配?

计算公式: dp = px / density*

假设我们在布局文件中写了一个 100dp * 100dp 的 View,这个View最终显示到不同屏幕像素下面的大小是不一样的

• 设备1: 屏幕宽度为 1080px，480dpi，屏幕的宽度总dp = 1080 / (480 / 160) = 360dp
• 设备2: 屏幕宽度为 1440px，560dpi，屏幕的宽度总dp = 1440 / (560 / 160) = 411dp

那么这个100dp * 100dp 的View
在设备1上面宽度占比 = 100dp / 360dp = 0.2777 = 27.28%
在设备2上面宽度占比 = 100dp / 411dp = 0.2433 = 24.33%

可以看到在这2个设备上面显示出来占屏幕的百分比就不同,最终显示的大小也不同，所以需要另外做适配

如何适配?

计算公式: dp = px / density*

我们平时在布局里面写的单位dp, 最终系统在显示之前会用上面的计算公式转换为px , 那么如果我们能根据不同的设备,计算出density, 然后赋值给系统再去计算,就能达到固定的百分比来适配不同的设备了

适配原理

假设我们当前开发中正在使用的设备的宽度是 375dp
而我们在布局中写了一个100dp * 100dp 的 View
那这个View在我们开发的时候看到的效果就是:

占屏幕百分比 = 100dp / 375dp = 0.2666 = 26.67%

• 设备1: 屏幕宽度为 1080px，480dpi，屏幕的宽度总dp = 1080 / (480 / 160) = 360dp
• 设备2: 屏幕宽度为 1440px，560dpi，屏幕的宽度总dp = 1440 / (560 / 160) = 411dp

那么在设备1中，根据公式算出 density = px / dp = 1080px / 375dp = 2.88
再把density = 2.88赋值给系统，这个时候宽度100dp 的View换算成px = 100dp * 2.88 = 288px

占屏幕百分比 = 288px / 1080px = 0.2666 = 26.67%
刚好和上面原来开发中的占屏幕百分比相同

同样的在设备2中，根据公式算出 density = px / dp = 1440px / 375dp = 3.84
再把density = 3.84赋值给系统，这个时候宽度100dp 的View换算成px = 100dp * 3.84 = 384px

占屏幕百分比 = 384px / 1440px = 0.2666 = 26.67%，也刚好和上面原来的占屏幕百分比相同，达到完美适配

如果还想了解更多关于今日头条屏幕适配方案或者想具体使用到项目里面
骚年你的屏幕适配方式该升级了!-今日头条适配方案