iOS 8 AutoLayout与Size Class自悟

前言

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

概念初探

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)

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.首先,先建立一个工程,展开如下页面

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

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

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

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

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

试验反馈二

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

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

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

试验反馈三

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

下面给出AutoLayout设置的图解

简答测试Demo结果图:

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

最终Demo

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

 

总结

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

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

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

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

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

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

iOS 8 AutoLayout与Size Class自悟(转载)的更多相关文章

  1. iOS 8 AutoLayout与Size Class自悟

    前言 iOS8和iPhone6发布已经过去蛮久了,广大的果粉终于迎来了大屏iPhone,再也不用纠结为大屏买三星舍苹果了…但是对于iOS开发人员来说,迎来了和Android开发开发一样的问题—> ...

  2. iOS 8 AutoLayout与Size Class

    转自:http://www.cocoachina.com/ios/20141217/10669.html 前言 iOS8 和iPhone6发布已经过去蛮久了,广大的果粉终于迎来了大屏iPhone,再也 ...

  3. iOS开发~UI布局(二)storyboard中autolayout和size class的使用详解

    一.概要:前一篇初步的描述了size class的概念,那么实际中如何使用呢,下面两个问题是我们一定会遇到的: 1.Xcode6中增加了size class,在storyboard中如何使用? 2.a ...

  4. iOS 8 AutoLayOut入门

    http://blog.csdn.net/asdfg13697116596/article/details/42562565 iOS 8 AutoLayOut入门自从iOS6带来Auto Layout ...

  5. Xcode iOS布局autolayout和sizeclass的使用

    一.关于自动布局(Autolayout) 在Xcode中,自动布局看似是一个很复杂的系统,在真正使用它之前,我也是这么认为的,不过事实并非如此. 我们知道,一款iOS应用,其主要UI组件是由一个个相对 ...

  6. iOS8开发~UI布局(二)storyboard中autolayout和size class的使用具体解释

    一.概要:前一篇初步的描写叙述了size class的概念,那么实际中怎样使用呢,以下两个问题是我们一定会遇到的: 1.Xcode6中添加了size class,在storyboard中怎样使用? 2 ...

  7. ios 7 Autolayout bug

    ios 7 Autolayout bug 错误类型:NSInternalInconsistencyException(SIGABRT) 详情:Auto Layout still required af ...

  8. iOS Autoresizing Autolayout Size classes

    Autoresizing:出现最早,仅仅能够针对父控件做约束(注意:要关闭Autolayout&Size classes才能够看到Autoresizing) 代码对应: UIView.h中的a ...

  9. ios中autolayout

    IOS 6 自动布局 入门-1  Matthijs Hollemans on September 29, 2012 Tweet 这篇文章还可以在这里找到 英语, 韩语, 土耳其语 If you're ...

随机推荐

  1. WCF心跳判断服务端及客户端是否掉线并实现重连接

    WCF心跳判断服务端及客户端是否掉线并实现重连接 本篇文章将通过一个实例实现对WCF中针对服务端以及客户端是否掉线进行判断:若掉线时服务器或客户端又在线时将实现自动重连:将通过WCF的双工知识以及相应 ...

  2. ASP.NET MVC基础学习

    ASP.NET MVC基础学习 传统的MVC概念 模型:组类,描述了要处理的数据以及修改和操作数据的业务规则 视图:定义应用程序用户界面的显示方式 控制器:一组类,用来处理来自用户,整个应用程序流以及 ...

  3. java调用计算机显示文档

    import java.awt.Desktop; import java.io.File; import java.io.IOException; /** * Java调用系统默认程序打开本地文件 * ...

  4. [置顶] Java开源代码研究总结

          由于工作中的需要,最近在研究SNMP协议和利用snmp4j和snmp4j.agent(   http://www.snmp4j.org/ ),实现snmp的南向和北向功能. 结合以前看过的 ...

  5. Java 和 IOS 区别

    Java接口与Objective-C正式协议类似,因为都需要实现     一组方法.Java具有抽象类,但Objective-C没有.Java具有类变量,但Objective-C中,可以使用文件范围内 ...

  6. 说说Request.Params[key]和Request[key]

    摘要 其实你一看到,就应该会想到,这个不简单吗,不就是服务端接收参数的一种方式吗?是的.在asp.net编程中,QueryString.Form.Cookie是三种比较常见的接收客户端参数的方式.Qu ...

  7. 标签<a>的注意事项1

    使用a标签时,其子元素可以为其他元素,但是不能包含<a>标签,否则会造成布局改变! 因此请尽量不要在a标签里放太多子元素,可以在外层套一个div,其他子元素放在a标签同级下. 正确布局: ...

  8. CodeForces 384C Milking cows

    水题. 对于两个$0$,肯定是先删去后面的$0$,再删去前面的$0$. 对于两个$1$,肯定是先删去前面的$1$,再删去后面的$1$. 对于一个$0$和一个$1$,无论先删哪一个,对答案做出的贡献都是 ...

  9. C#Redis列表List

    一.前戏 在Redis中,List类型是按照插入顺序排序的字符串链表.和数据结构中的普通链表一样,我们可以在其头部(left)和尾部(right)添加新的元素.在插入时,如果该键并不存在,Redis将 ...

  10. Extjs的GridPanel分页前后台完整代码实例

    第一次写文章啊,有些冲动.最近在公司学习Extjs,做了一个分页的小实例和大家分享. 1.首先编写paging-grid.js文件,这是我在网上参考的例子改写的,大同小异. Ext.onReady(f ...