iOS布局和屏幕适配的一点总结

曾经，iOS开发是不需要考虑屏幕适配问题的，因为只有一种屏幕尺寸。而现在已经有了4种屏幕，4，5，6，6P，因此屏幕适配也成了iOS开发中必须考虑的问题。并且，这4种屏幕的宽高比全部都不一样，所以简单的按比例缩放并不能解决问题。我们最近做的一个APP也处理了屏幕适配，本文简单总结一下

根据屏幕类型判断

我不知道有没有更好的办法，我们的做法是根据设备类型，写一些if...else，或者switch语句

判断机型可以使用screen的height（不能使用width，因为4和5的width是一样的，都是320），也可以使用API里的宏，都差不多。我个人感觉，if...else似乎是不可避免的，虽然有auto layout，但是有一些大的布局改动，或者字体大小，不用判断似乎是无法解决的

比如说，为了达到最佳显示效果，我们在大的屏幕上使用CollectionView，而在4S上使用TableView，用自动布局应该是没有办法做到的。或者根据屏幕的大小，切换字体大小，好像也只能通过if...else来实现

根据屏幕类型适配，代码类似：

Objc代码  

1. if(screenType == LosScreenType6P){  
2.     layout.minimumInteritemSpacing = 30;  
3. }else if(screenType == LosScreenType5){  
4.     layout.minimumInteritemSpacing = 5;  
5. }else{  
6.     layout.minimumInteritemSpacing = 15;  
7. }  

frame计算

我们也用了比较多的“硬计算”，比如对于UICollectionView里的每个cell的width，我们是这么处理的：

Objc代码  

1. CGRect rect = [[UIScreen mainScreen] bounds];  
2. screenWidth = rect.size.width;  
3. cellWidth = (screenWidth - 30) / 3;  
4. cellHeight = cellWidth * 0.8 + 50;  

Objc代码  

1. - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath  
2. {  
3.     return CGSizeMake(cellWidth, cellHeight);  
4. }  

我们规定CollectionView里每行有3个单元格，整个section的左右间距是10，列间距是5，因此计算出 (width - 30) / 3就是每个单元格的宽度，单元格的高度也是经过计算写死的

我不太确定这种方式好不好，不过对于这个页面是好使的。类似这种基于屏幕尺寸做计算的方法，APP里在几个页面都有用到

Masonry

Masonry是我们实现屏幕适配的重要手段之一，本质上是界面约束的语法糖。基本上，我们的做法是：大的页面关系，用计算完成；每个小块里面的相对位置关系，用Masonry来做。在有些场景下，Masonry有非常大的优势。比如说：

1、设置某个View的宽高比

Objc代码  

1. [thumbImageView mas_makeConstraints:^(MASConstraintMaker *make) {  
2.     make.top.equalTo(@0);  
3.     make.left.equalTo(@0);  
4.     make.width.equalTo(self);  
5.     make.height.equalTo(thumbImageView.mas_width).multipliedBy(0.8);  
6. }];  

此View的宽度与父View同宽，高度是宽度的0.8

2、设置居中，设置相对边距

Objc代码  

1. [authorName mas_makeConstraints:^(MASConstraintMaker *make) {  
2.     make.centerY.equalTo(avatarImageView);  
3.     make.left.equalTo(avatarImageView.mas_right).offset(5);  
4.     make.right.equalTo(@-5);  
5. }];  

垂直方向与另一个View对齐，左边距离上一个元素的右边5，右边距离父View右边5

类似这种布局，用frame来写会复杂很多，如果再考虑屏幕适配，需要非常多代码。这类的需求，Masonry堪称神器。不过使用中发现，用Masonry布局的View，我们通常会init，或者initWithFrame:CGRectZero。这个View直到经过Masonry处理以后，它的origin和size才能确定，如果在此之前就用到它的origin和size，就会有问题

整体替换UIView

对于适配后变化不大的页面，把if...else写在UIView里，但是有个别页面，完全要根据设备显示不同的View。这种情况比较适合在Controller里做判断，然后load不同的View