034-iOS开发 UI布局思考

/*本文仅用于交流学习，如果有误，欢迎指正，共同进步。转载请注明出处。不用私信征求授权。
*/
UI布局，要做的事情：显示静态和动态的UI元素，静态是将UI元素放在正确的位置，并且显示出来；动态的含义就比较丰富一些：

（1）根据数据源的改变，动态显示不同的UI元素，比如，字体颜色变化，图片的更换和隐藏，动态改变cell的高度；还有，通常还要考虑数据源的两个极端情况，太多和为空的情况；

（2）不同屏幕和系统的适配，4s和4，5以上的iPhone，ipad三种尺寸；不同尺寸的屏幕，显示UI元素的位置和大小可能不一样，iOS10消息推送的适配，iOS8ipad适配alertView等等；

（3）UI元素本身的动画和交互产生的动画，比如，显示分数的水波动画，网易音乐播放器的图片旋转，360云盘下载图片时的图片归集动画，还有navBar的透明度变化效果，twitter的头部下拉变大、知乎日报也有这个效果等等；

就单个页面来说，每个页面都是放在一个VC里面的。常见的信息展示方式是：

1、tableView为界面的主导，比如联系人列表，网易云音乐的音乐列表等等，此类布局是tableView为主，可能会在tableView的某个部位增加按钮什么，如顶部增加数据源切换按钮，或者在右下角增加一个购物车按钮之类，随着tableView的滑动，固定在某个位置，当然，也有不固定的时候；

2、在一般的VC的view中布局，零散布局，当然，当一个屏幕显示不完所有信息的时候，可能会用scrollView。最常见的零散布局是登陆注册页。当然，如果页面内容太多，而且内容变动性可能比较大，更新频率高，还是做成web，性价比高得多，当然，交互效果收到一定的影响。

如果整个View要求在一屏内展示所有内容，零散布局时，需要首先确定整个界面的视图重心，因为设备屏幕不一样大，会变化，高矮胖瘦是不同的。说白了，就是单屏信息展示，UI布局要特别考虑一下屏幕适配问题。在这样的情况下，视图重心是那些位置和高度不变或者变化小的UI元素组合。这部分固定了，其他UI元素的适配是建立在这部分固定的UI布局基础之上。视图重心可以在顶部、中部、底部。比如，云音乐的iPhone端，音乐播放界面，视图重心应该是底部曲目控制bar（列表、上一曲、播放、下一曲等），这部分的高度相对固定，然后，在不同的屏幕上，动态调整顶部和中部的UI元素大小及其间距。

当然，有的界面也没有视图重心，布局就是从上到下，每个UI控件都要考虑适配的问题。

适配是个大问题，以后再说。

3、除了上面两种UI布局情况，还有一种就是混合型的，规则化布局和零散布局混合，可能两者之间占比不同。规则化布局UI控制指tableView、collectionView这类；零散布局UI控件指label、imageView、button等。当然，也会出现相互嵌套布局的情况，以App Store为例，精品推荐，根据观察，可能是这样的布局方式：主体是tableView，头部是个图片轮播器，实现方式很多不说了，下面的cell里面有app推荐和对应的信息，要么是scrollView要么是collectionView展示，可以左右滑动，就单个app推荐信息的View来说，内部是零散布局。

4、在尝试了frame、约束（用的是Masonry）、autoresizing的布局和适配之后，我开始慌了。因为我们公司的产品针对设备是Universal，没有HD版本，所以，我面临的问题是，适配iPhone 4S 、iPhone 5以上和iPad，目标：
（1）写最少的适配代码；
（2）能在各个设备上正常跑起来。
用Masonry的时候，我以为约束就可以搞定一切设备了，实践证明，我错了，另外在iPhone 4S的iOS 7上，踩坑踩的脚都肿了，看绷带都还有血丝。。。。。。不扯了，接着说。

知己知彼，百战不殆
先看下图：

iOS常见设备屏幕分析.png

根据宽高比，可以将目前常见的苹果设备分为三类：0.66，0.56，0.75。
让我们高兴的是，目前苹果新出的设备基本是等比缩放宽高，基本是0.56。当然，我这里没有例举出所有的苹果（iOS）设备，其他的大家有兴趣，可以自己算算宽高比。

一句话：适配基于宽高比！
通用适配 = 特定的宽高比 + Masonry的约束 + 布局重心设计

// 待续......