一. 屏幕适配背景

众所周知,前端工程师(UI切图仔)的界面开发作业离不开规划师精心制作符号的视觉稿。一顿操作后终将页面复原到了移动端上,可往往拿给视觉走查作用时,收成的不是欣赏,而是“究竟有没有按标示来呀?”!

Android 屏幕适配初探

本着程序员的自我修养: 说我能够,说我的代码不可。夺过视觉的手机飞奔回工位,古怪,分明就是依照视觉稿来处理的布局,怎么到手机上展现就不对劲了呢。

Android 屏幕适配初探

这时咱们就不得不提安卓商场五花八门五光十色的机器设备了。

相比iPhone,安卓的发展可谓是百家争鸣,基于其开源的优秀质量,出现了一大堆手机厂商争奇斗艳,能占有一席之地的手机类型也比比皆是。这么多的设备,屏幕巨细也层次不齐,好在谷歌早就考虑到了这一点

Android 屏幕适配初探

发起在开发过程中运用“**密度无关像素density- independent pixel**”来进行布局开发,dip 也就是咱们常见的dp。

这儿先介绍几个概念:

px: 像素,画面的根本显现单位。屏幕的分辨率一般就描述为“宽向像素数X纵向像素数”,比如 Android手机常见的分辨率有:320 X 480, 1080 X 1920等,开发中设置的尺度巨细最终都要转换成px进行展现。不同的手机,1px的实际展现巨细也不一样,所以开发中不建议运用px的方式进行硬编码

dpi: dots per inch (每英寸的像素数),即像素密度。像素密度越大,屏幕画质显现更加细腻。安卓手机品种多样,常见的有160dpi 是中密度(mdpi),240dpi是高密度(hdpi),320dpi是超高密度(xhdpi),480dpi是超超高密度(xxhdpi)。其中,Android 体系定义的屏幕像素密度基准值是 160 dpi,该基准值下 1 dp 就等于 1 px,同理 320dpi 对应 1dp=2px…

density: 显现的逻辑密度,是体系依据当前像素密度指定将dp单位转换为像素时所必须运用的缩放系数****。该设备的density为1时,1dp对应1px;density=2时,1dp=2px…

dp: 理解了上面的概念后,咱们能够推理出,dp = (dpi/160)px。所以开发中运用dp作为尺度单位,体系在烘托时会处理dp与px的联系,也就能够到达适配不同手机屏幕的作用了。

Android 屏幕适配初探

## 二. 干流计划

既然dp现已处理了适配,为什么实际作用仍是不尽如人意呢?


举个

规划师给出的视觉稿分辨率为 1286×2778 ,density = 3,绘制一个500px的矩形框 –矩形框占比500/1286=0.39

咱们的设备:

  1. 华某为 1160×2700 ,densityDpi=520 ,density = 3.25 –> 1dp = 3.25px 矩形框占比 0.47
  2. 三某星 1440×3200,densityDpi=576,density=3.6 –> 1dp=3.6px 矩形框占比Android 屏幕适配初探0.42

Android 屏幕适配初探

不难看出并非一切的手机density都和视觉稿匹配,难免与视觉稿的比例有些出入,自然展现到手机上的作用无法则规划师满足了。


痛定思痛,就没有一个通用的解决计划能够让咱们在视觉复原上扬眉吐气一把吗?

1. 修正逻辑密度:

回忆上面所讲的内容,density 作为体系提供的缩放系数,是一个能够供外部修正的值。咱们将视觉稿中px尺度依照规划稿规范换算为dp,更新后的density = 设备分辨率宽/视觉稿dp宽,这样便能够确保在不同的手机上显现作用和视觉稿大差不差了

Android 屏幕适配初探

接着上面的例子看

华某为 1160×2700 ,densityDpi=520 ,density = 1160/(1286/3) = 2.7 –> 1dp = 2.7px 矩形框占比Android 屏幕适配初探 0.39

三某星 1440×3200,densityDpi=576,density=1440/(1286/3) =3.36 –> 1dp=3.36px矩形框占比Android 屏幕适配初探 0.39

Android 屏幕适配初探

2. 宽高限定符:

这是一种比较原始的解决计划,核心手段就是穷举市面上各种的分辨率,然后以视觉稿的尺度作为基准生成不同的 dimens 文件


视觉稿 1080×1920

手机1(1080×1920):

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="x1">1px</dimen>
    <dimen name="x2">2px</dimen>
    <dimen name="x3">3px</dimen>
    ....
    <dimen name="x1080">1080px</dimen>
    <dimen name="y1">1px</dimen>
    <dimen name="y2">2px</dimen>
    <dimen name="y3">3px</dimen>
    ....
    <dimen name="y1920">1920px</dimen>
</resources>

手机2(1440×2400):

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="x1">1.3px</dimen>
    <dimen name="x2">2.6px</dimen>
    <dimen name="x3">3.9x</dimen>
    ....
    <dimen name="x1080">1440px</dimen>
    <dimen name="y1">1.25px</dimen>
    <dimen name="y2">2.5px</dimen>
    <dimen name="y3">3.75px</dimen>
    ....
    <dimen name="y1920">2400px</dimen>
</resources>

高度也能够适配上,问题也清楚明了 需求精准匹配。

手机类型层出不穷,生命不息 适配不止


三. 事务阅历

在笔者所阅历的项目中,采用的是修正逻辑密度的适配计划。运用这种计划时需求注意 用户可能会手动设置屏幕的作用参数(设置字体显现形式、设置屏幕分辨率等),所以处理density参数时还需求考虑当前体系设置的缩放比例

Android 屏幕适配初探

而且 这种计划有个显着的坏处就是 咱们只处理了宽度的适配而忽略了高度。一般来说,的确能够不必处理高度适配,超出屏幕的显现内容一般能够运用ScrollView之类的组件进行包装处理。但是咱们也经常处理一些相似半屏弹窗(BottomSheetDialogFragment)的组件,不排除规划师对这类组件的展现高度有近乎张狂的要求,很痛苦 这种时分咱们建议对高度进行百分比布局。