http://www.raywenderlich.com/113768/adaptive-layout-tutorial-in-ios-9-getting-started

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代码 收藏代码
if(screenType == LosScreenType6P){
layout.minimumInteritemSpacing = 30;
}else if(screenType == LosScreenType5){
layout.minimumInteritemSpacing = 5;
}else{
layout.minimumInteritemSpacing = 15;
}

frame计算
我们也用了比较多的“硬计算”,比如对于UICollectionView里的每个cell的width,我们是这么处理的:
Objc代码 收藏代码
CGRect rect = [[UIScreen mainScreen] bounds];
screenWidth = rect.size.width;
cellWidth = (screenWidth - 30) / 3;
cellHeight = cellWidth * 0.8 + 50;

Objc代码 收藏代码
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake(cellWidth, cellHeight);
}

我们规定CollectionView里每行有3个单元格,整个section的左右间距是10,列间距是5,因此计算出 (width - 30) / 3就是每个单元格的宽度,单元格的高度也是经过计算写死的
我不太确定这种方式好不好,不过对于这个页面是好使的。类似这种基于屏幕尺寸做计算的方法,APP里在几个页面都有用到
Masonry
Masonry是我们实现屏幕适配的重要手段之一,本质上是界面约束的语法糖。基本上,我们的做法是:大的页面关系,用计算完成;每个小块里面的相对位置关系,用Masonry来做。在有些场景下,Masonry有非常大的优势。比如说:
1、设置某个View的宽高比
Objc代码 收藏代码
[thumbImageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(@0);
make.left.equalTo(@0);
make.width.equalTo(self);
make.height.equalTo(thumbImageView.mas_width).multipliedBy(0.8);
}];

此View的宽度与父View同宽,高度是宽度的0.8
2、设置居中,设置相对边距
Objc代码 收藏代码
[authorName mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.equalTo(avatarImageView);
make.left.equalTo(avatarImageView.mas_right).offset(5);
make.right.equalTo(@-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

AutoLayout适配的更多相关文章

  1. 利用AutoLayout适配滚动视图和表视图

    1.新增一个contentView,设置为与滑动视图的父视图等高等宽. 2.利用代码 if(_MyTestTableView.frame.size.height != _MyTestTableView ...

  2. 适配----Autolayout

    AutLayout 相对布局,根据参照视图的位置 来定义自己的位置.通过约束视图和视图之间的关系来分配屏幕上的位置,通常与VFL语言配合使用 VFL(visual format language)视觉 ...

  3. iOS - AutoLayout

    前言 NS_CLASS_AVAILABLE_IOS(6_0) @interface NSLayoutConstraint : NSObject @available(iOS 6.0, *) publi ...

  4. 初识 AutoLayout

    一.使用"公式": 1.frame: 原点以及自身的位置来确定自身的位置 2.autoLayout: 根据参照视图的位置  来定义自己的位置 3.autoLayout: 相对布局  ...

  5. 用launchscreen.storyboard适配启动图方法(二)

    背景 之前有写一篇实现方式比较简单的随笔用launchscreen.storyboard适配启动图方法,顺便在评论区提了一下用autolayout适配启动图的思路,现把思路和流程记录下来. 思路 整体 ...

  6. Shou 团队诚意满满的招募 Swifter

    一.团队介绍 团队产品 VPlayer 播放器靠自增长 3 年内获得全球 4000 万用户,开发的 Vitamio 组件更是获得微博.UC.金山等知名企业授权使用.—— 团队再次起航,经历一年多我们已 ...

  7. IOS页面自动布局 之 NSLayoutConstraint基础篇

    使用AutoLayout之前需要知道以下两点: 1.必须设置 translatesAutoresizingMaskIntoConstraints为NO. 2.如果是viewControl则AutoLa ...

  8. 新闻头条应用源码ios版

    <ignore_js_op>      源码下载:http://code.662p.com/view/13343.html     作者ymcao,源码TopNewsIOS,新闻头条IOS ...

  9. iOS技术

    iOS技术 OC:分类(好处,和延展的区别) 分类: 在不修改原有的类的基础上增加新的方法  一个庞大的类可以分模块开发 一个庞大的类可以由多个人来编写,更有利于团队合作 分类是对原有类的一种扩展,在 ...

随机推荐

  1. ROR入门之旅

    mac上为了不在登录画面看到其他账户,我禁用了root账户,而每次用Terminal的时候,先获得sudo账户的权限: sudo -s mac本身就安装有ruby ruby -v 查看当前安装的rub ...

  2. VS2010中fatal error LNK1123错误的解决方案

    问题描述: 在VS2010项目编译时会出现如下错误:LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏 解决方案: 查找是否有两个cvtres.exe ...

  3. Microsoft Office 2013 激活方法

    Microsoft Office 2013 激活方法   Microsoft Office 2013是微软的新一代Office办公软件,全面采用Metro界面,包括Word.PowerPoint.Ex ...

  4. thinkphp引入类的使用

    比如发送邮件类phpmailer 1.将核心文件放入ORG目录下 2.在使用的地方,引入这个类文件 如何引入呢? import('@.ORG.phpmailer'); 这个表示引入当前项目中的ORG中 ...

  5. [Poetize I]黑魔法师之门

    描述 Description applepi被囚禁的地点只有一扇门,当地 人称它为“黑魔法师之门”.这扇门上画着一张无向无权图,而打开这扇门的密码就是图中[每个点的度数大于零且都是偶数]的子图的个数对 ...

  6. No row with the given identifier exists[ArtProject.Domains.Users#2]

      产生此问题的原因:              有两张表,table1和table2. 产生此问题的原因就是table1里做了关联<one-to-one>或者<many-to-on ...

  7. codevs 1222 信与信封问题(二分图的完美匹配)

    1222 信与信封问题   题目描述 Description John先生晚上写了n封信,并相应地写了n个信封将信装好,准备寄出.但是,第二天John的儿子Small John将这n封信都拿出了信封. ...

  8. apt局域网源搭建

    1, 准备Packages.gz

  9. VMware: windows8 与 虚拟机ubuntu 14.04 共享文件夹

    假设当前用户为xxx 安装 VMwareTools 1. 打开 VMwareworkstation窗口,选择”虚拟机” -> “重新安装VMwareTools(T)”. 点击之后,会发现 Ubu ...

  10. 低版本Xcode 出现could not find developer disk image问题

    解决Xcode在ipad/iphone9.2系统真机测试时出现could not find developer disk image问题,只要拷贝这个文件(链接: http://pan.baidu.c ...