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）320x480160高密度（hdpi）480x800240超高密度（xhdpi）720x1280320超超高密度（xxhdpi）1080x1920480                    

 

          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）240x3201201dp=0.75px3中密度（mdpi）320x4801601dp=1px4高密度（hdpi）480x8002401dp=1.5px6超高密度（xhdpi）720x12803201dp=2px8超超高密度（xxhdpi）1080x19204801dp=3px12

 

                  在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定制相关的特性了，这个时候，可以尝试采用非常规手段修改。

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

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

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