文档章节

iOS 8 AutoLayout与Size Class自悟

法斗斗
 法斗斗
发布于 2016/02/19 16:09
字数 1259
阅读 22
收藏 2

iOS 8 AutoLayout与Size Class自悟

前言

iOS8和iPhone6发布已经过去蛮久了,广大的果粉终于迎来了大屏iPhone,再也不用纠结为大屏买三星舍苹果了…但是对于iOS开发人员来说,迎来了和Android开发开发一样的问题—>各种屏幕的适配(是不是可以要求加工资的节奏).对于适配,网传各种有关Size Class的论点,前段时间太忙,一直没去研究,套用+总的话,苹果在适配方面提供的方法做的比安卓好太多了.自己实测之后,确实很方便0.0(不过,还是想说,适配的核心始终是AutoLayout)

023.png

概念初探

iOS8之前,公司在开发项目时,先做的iPhone版,然后要求开发iPad版本,其实内容是完全一样的,只是UI变化了,但是我们就需要建立2个工程来分别对应实现.iOS8推出的Size Class,可以让我们在一个工程的storyboard中进行所有尺寸屏幕的适配,不仅是iPhone 4s-5/5s-6-6 Plus,还包括iPad界面.它引入了一种新的概念,抛弃传统意义上我们适配时所谓的具体宽高尺寸,把屏幕的宽和高分别分成两种情况:Compact-紧凑, Regular-正常(Any-任意,其实就是这2种的组合,所以我没分成3种情况).搭配起来是3*3,也就是无论如何变化,加起来也就9种,如上图. 

1.实际应用中,这Compact,Any,Regular如何运用呢?

w:Any h:Any 是我们刚建立工程时候默认选择的,算是一切描述的父类.其他的种类描述都是在此基础上变化的,比如:如果weight设为Any,height设置为Regular,那么在该状态下的界面元素在只要height为Regular,无论weight是Regular还是Compact的状态中都会存在.于是:

w:Compact h:Compact - (w:Any h:Compact , w:Compact h:Any , w:Any h:Any)

w:Regular h:Compact - (w:Any h:Compact , w:Regular h:Any , w:Any h:Any)

w:Compact h:Regular - (w:Any h:Regular , w:Compact h:Any , w:Any h:Any)

w:Regular h:Regular - (w:Any h:Regular , w:Regular h:Any , w:Any h:Any) 

2. 再来看一组数据和一张图(国外一位博主给出的,很形象):

iPhone4S,iPhone5/5s,iPhone6

竖屏:(w:Compact h:Regular)

横屏:(w:Compact h:Compact)

iPhone6 Plus

竖屏:(w:Compact h:Regular)

横屏:(w:Regular h:Compact)

iPad

竖屏:(w:Regular h:Regular)

横屏:(w:Regular h:Regular)

size_classes.png

3.可以总结为: 

  • 如果项目不支持横屏显示,使用w:Compact h:Regular(或者直接取消使用Size Class) 

  • 如果项目支持横屏显示,使用w:Compact h:Regular+w:Any h:Compact 

  • 对于一些公有的约束(任意组合中都适用),一般放在w:Any h:Any中设置 

  • iPad同理

所以,我觉得Size Class最大的帮助是,解决横屏适配和iPhone iPad共享一个设计板…(个人意见) 

试验反馈一

1.首先,先建立一个工程,展开如下页面

02.png

PS:这是iOS8的新特性,真的用到项目里需要等放弃兼容iOS7 。。。显然,目前还是不行的 

2.在Any Any情况下,放置一个Label,并设置约束上-左-下-右为0-0-20-0

 03.png

04.png

3.在Compact Any情况下,又放置一个Label,并设置约束上为20

 05.png

4.继续在Compact Any情况下,来看看横屏状态下的变化

 06.png

5.最后切换到Regular Any下,完成6 Plus 的横屏显示

 07.png

试验反馈二

试验一里面,验证了一下概念中所列举的各个屏幕适用的组合,接下来,算是Size Class 解决横屏的妙用

 08.png

11.png


PS:运用于,横屏适配,重新排版竖屏时候的UI布局 

除了改动不同组合下约束,也能改动控件在不同组合下是否显示

试验反馈三

AutoLayout这里不给具体如何设置,因为不知道如何写,感觉还是大家多动手去写,去试,最有效了

下面给出AutoLayout设置的图解

简答测试Demo结果图:

17.png

如果不横屏,也可以直接取消Size Classes(图不一样,不同时间写的…囧)

 18.png

最终Demo

Demo的Github地址:https://github.com/ConanMTHu/Size-Classes-Demo/tree/master

 20.gif


总结

直接说以后都应该使用storyboard+autolayout感觉是不负责的说法,但是深入思考autolayout是很有必要的!

如下情况使用autolayout会有帮助: 

  • 当需要展示的内容很多并且尺寸不固定; 

  • 程序需支持屏幕旋转(主要是iPad程序,iPhone程序横屏的场景有点非主流,也不排除..手游..); 

  • 程序通用于iPhone和iPad(最重要的吧). 

但storyboard中使用autolayout有利有弊,好处当然是可视化,实现简单功能很节省时间,但也有弊端,例如不小心移动一个控件就会让弄乱那些约束或者控件一多加上自定义的XXXXXXXX 


本文转载自:

法斗斗
粉丝 22
博文 368
码字总数 17774
作品 0
杨浦
程序员
私信 提问
iOS开发tips-UITableView、UICollectionView行高/尺寸自适应

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jianxin160/article/details/55002487 UITableView 我们都知道UITableView从iOS 8开始实现行高的自适应相对比...

KenshinCui
2017/02/12
0
0
iOS8开发~UI布局(一)初探Size Class

一、新特性Size Class介绍 随着iOS8系统的发布,一个全新的页面UI布局概念出现,这个新特性将颠覆包括iOS7及之前版本的UI布局方式,这个新特性就是Size Class。Size Class配合Auto Layout可以...

sea_god
2015/01/26
0
0
iOS常用的三方库

UI相关:(转载http://www.jianshu.com/p/be0401e35e06) 上拉下拉刷新控件: 链接:MJRefresh 动态启动图: 链接:YFStartView MBProgressHUD: 链接:MBProgressHUD 一个效果很好的弹出下拉框:...

oschina6k
2016/05/11
416
1
Windows Bridge for iOS:开发进度和开发计划

八月份,微软开源了 Windows Bridge for iOS,WinObjC,本文主要讲述近几个月 WinObjC 的一些开发进度,引入的一些新特性和未来计划加入的新特性。 开发进度 Windows Bridge for iOS 在 GitH...

oschina
2015/11/26
4.4K
33
iOS 自定义控件兼容AutoLayout

练习做一个自定义控件。需要支持3种布局方式 Interface Builder initWithFrame init 加 AutoLayout 自定义控件是评分控件,有五颗星星。 设计 在View中放下5个ImageView。每一个ImageView的间...

Nov_Eleven
2015/07/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

任正非对华为热点问题的回应亮了,终于知道华为为什么能扛过这一次的冲击!

任正非对华为热点问题的回应亮了,终于知道华为为什么能扛过这一次的冲击! 如果你是华为的老板,看到一条传遍网络的“美国封锁华为”、“华为禁令”的消息,你会怎么办? 昨天上午,华为创始...

forespider
35分钟前
1
0
Java HTTP 组件库选型看这篇就够了

最近项目需要使用 Java 重度调用 HTTP API 接口,于是想着封装一个团队公用的 HTTP client lib. 这个库需要支持以下特性: 连接池管理,包括连接创建和超时、空闲连接数控制、每个 host 的连...

Java面经
35分钟前
2
0
nginx 重启

在 nginx.config 配置目录下 输入命令: nginx -s reload 在 nginx 中,如果我修改了一个配置文件,或者新增了一个配置文件。按照群里网友的描述,我需要关闭 nginx,或者重启 nginx,比较麻...

MrBoyce
36分钟前
0
0
Cesium中级5 - Terrain 地形

Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ CesiumJS支持对与水流相关的海洋、湖泊和河流以及全球高分辨率地形进行流式处理和可视化。查看山峰、山谷...

Cesium中文网
49分钟前
0
0
搭建jupyter+nginx服务

Tips:该文章面向Mac和centos用户,如果是Windows用户,请先安装虚拟机。 概述 Jupyter Notebook(此前被称为 IPython notebook)是一个交互式笔记本,支持运行 40 多种编程语言。 Jupyter ...

阿dai学长
50分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部