UI适配原理及通用解决方法实战

UI适配，包括机型适配，由于Android的开放性，手机厂商定制各种ROM，比如MIUI，EMUI等，每种机型的分辨率，尺寸大小都不一致，因此UI适配变得"异常复杂"。

一、由分辨率联想到的

1 几个概念

1.1 屏幕尺寸

英寸是一个物理概念，指的是手机屏幕的对角线长度，单位为inch，1 inch等于2.54cm，如下图所示 ：



目前，市面上常见的手机尺寸有4.5寸，5寸，5.5寸，6寸等 。

1.2 屏幕分辨率

手机在横向，纵向的像素点总和，一般描述成屏幕的宽*高，比如1080 * 1920，表示宽度方向上有1080个像素点，在高度方向上有1920个像素点。

分辨率的单位是px(pixel)，1px = 1 像素点，一般UE同学标注的图片资源中都是以像素为单位。安卓手机常见的分辨率为:320*480，480*800，720*1280，1080*1920，目前 比较常见的应该是最后一个分辨率了。

1.3 屏幕像素密度

屏幕像素密度，指的是每英寸的像素点数，单位是dpi(dot per pix)，计算方法是利用分辨率宽高平方和求根，然后除以屏幕尺寸。



如上图所示，对角线的上的像素点个数可以由勾股定律算出来，即x平方+y平方 然后开根号，算出了对角线上的像素点数，然后再除以对角线的长度(单位是inch)，可以算出每英寸上的像素点个数，这就叫做屏幕像素密度,Android手机对于每类手机屏幕大小都有一个相应的屏幕像素密度。

低密度（ldpi）	240x320	120
中密度（mdpi）	320x480	160
高密度（hdpi）	480x800	240
超高密度（xhdpi）	720x1280	320
超超高密度（xxhdpi）	1080x1920	480

1.4 密度无关像素

density-independent pixel，叫dp或者dip，与终端上的实际物理像素点无关，单位dp，可以保证在不同屏幕像素密度的设备上显示相同的效果。

Android开发时使用dp而不是px，这是Android特有的单位，假设同样是画一条长度是屏幕一半的线，如果使用px作为单位，那么在480*800的分辨率手机上设置应该是 240px，而在320*480的手机上设置的应该是160px，如果使用px为单位，那么两者就不同了。如果使用dp为单位，在这两种分辨率下，160dp都显示为屏幕一半的长度。

dp和px转换关系如下表所示:

密度类型	代表的分辨率(px)	屏幕密度(dpi)	换算(px/dp)	比例
低密度（ldpi）	240x320	120	1dp=0.75px	3
中密度（mdpi）	320x480	160	1dp=1px	4
高密度（hdpi）	480x800	240	1dp=1.5px	6
超高密度（xhdpi）	720x1280	320	1dp=2px	8
超超高密度（xxhdpi）	1080x1920	480	1dp=3px	12

在Android中，以160dp(即屏幕分辨率为320*480)为基准: 1dp = 1px。

1.5 独立比例像素

scale-independent pixel，叫做sp或者sip，一般用来设置文字大小，可根据字体大小首选项进行缩放，推荐使用12sp，14sp，18sp，22sp作为字体设置的大小。

不推荐使用奇数和小数，如果造成经度丢失。

二、Android屏幕适配

1 屏幕适配的本质

使得布局，布局组件，图片资源，用户界面流程 匹配不同的屏幕尺寸。主要让布局，布局组件自适应屏幕尺寸，而根据屏幕的配置来加载相应的UI布局，用户界面流程。 这就是屏幕布局的本质。

2 屏幕适配方案

2.1 布局适配

使得布局自适应屏幕尺寸，解决方案是使用相对布局，禁用绝对布局。第二个就是根据屏幕的配置来加载数组的UI布局，解决方案是使用限定符，包括尺寸限定符， 最小宽度限定符，布局别名和屏幕方向限定。

2.2 布局组件适配

本质是使得布局组件自适应屏幕尺寸，解决方法，使用wrap_content,match_parent和weight来控制视图组件的宽度和高度。

weight，是线性布局的一个独特比例分支，使用此属性设置权重，然后按照比例对界面进行空间的分配，计算公式是: 控件宽度=控件设置宽度+剩余空间所占百分比宽幅。举个栗子:



如上图中，一个LinearLayout布局中，有三个TextView，三个的width宽度属性全部是match_parent，第一个的layout_weight设置为1，另外两个为2，3，那么显示结果是如何的呢？请看下图:



结果是第一个textview占据的宽度是2/3，第二个是1/3，第三个是0，怎么算出来的呢？

由于每个控件要求的宽度都是match_parent，也就是屏幕宽度，因此总共需要3个parent的宽度，也就是3parent，第一个控件需求的宽度是1个parent，那么剩余的空间宽度是1parent-3parent = 2parent，第一个TextView实际占的宽度是=parent+(-2)*(1/(1+2+3)) = 1parent-2/5parent = 2/3parent，也就是屏幕宽度的2/3。第二个TextView实际占的宽度=parent+2/5*(-2parent)=1/3parent，也就是屏幕的1/3宽度，第三个TextView的实际宽度=parent+3/6*(-2parent)
= 0parent，也就是没有空间了。

三、预装UI适配案例

厂商反馈的UI适配问题，一般都比较简单，有的是某些页面下字体不全，有的是切换某种模式后，布局显示不合理，其实解决方案都逃不脱上述原则，UI适配相对来说较为简单。

案例一、导航字体大小问题

三星反馈，导航字体问题，在三星一款手机上，字体显示不全。

解决方案：由于导航布局中采用的是sp这种标准的字体，部分定制ROM系统可能会修改这个单位的具体含义，将单位修改为dp(屏幕密度无关)后，显示正常。

点评：有的时候处理默写厂商问题的时候，当"普世"的观念无用时，第一时间应该考虑的是系统修改了这一普世的特性，修改成ROM定制相关的特性了，这个时候，可以尝试采用非常规手段修改。

案例二、三星系统切换大字体模式，显示不全

某款三星手机设置功能切换超大字体模式下，部分地图页面显示不完整。

方法方案，根据部分页面布局情况，采用"比例"的方式，比如某个按钮布局按照整个屏幕百分比来设置，这样可以完美解决各种情况。