iOS 8 AutoLayout与Size Class有感笔记

最新推荐文章于 2018-04-18 14:59:59 发布
最新推荐文章于 2018-04-18 14:59:59 发布
阅读量559 收藏
点赞数
分类专栏： iOS 文章标签： iOS ios8 适配 AutoLayout
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sammyieveo/article/details/42462865
版权

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

48181677_1.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 


sammyieveo
关注
专栏目录
屏幕适配之Size Classes 2---分屏适配
catchZeng的专栏
09-26 1345
屏幕适配之Size Classes 2—分屏适配仅供大家参考如有问题欢迎加Q群157672725讨论。在上一期中我们了解了Size Classes的基本用法，这一期主要讲一下其在iOS9分屏适配中的作用。 iOS9分屏介绍 项目如何开启分屏模式 Size Classes在分屏中的作用 iOS9分屏介绍当初Surface分屏功能出现的时候，我就在想要是iPad也能分屏那该多好，所幸的是在iOS9上终于
屏幕适配 size class
ohyeahhhh的博客
04-20 1272
1. size class尺寸类型如果把屏幕的长和宽都按长度划分三种类型：压缩（compact）、任意（any）、常规（regular），那么长和宽的组合就有9种类型。这里我把每一种类型称为一种模式。另外，屏幕的状态根据尺寸大小和其方向可以分为很多情况。模式和屏幕的状态有着对应关系，可以是一对一，也可以是一对多。比如说，一种模式叫任意模式，也就是长是任意的，宽也是任意的，这种模式可以对应所有的屏幕状
5、iOS 8 AutoLayout与Size Class自悟
逆袭的青年的专栏
12-18 571
前言 iOS8和iPhone6发布已经过去蛮久了,广大的果粉终于迎来了大屏iPhone,再也不用纠结为大屏买三星舍苹果了…但是对于iOS开发人员来说,迎来了和Android开发开发一样的问题—>各种屏幕的适配(是不是可以要求加工资的节奏).对于适配,网传各种有关Size Class的论点,前段时间太忙,一直没去研究,套用+总的话,苹果在适配方面提供的方法做的比安卓好太多了.自己实测之后,确实
自动布局autolayout与sizeclass
yejiexiaobai的博客
10-18 538
屏幕适配发展： 1. 通过代码计算 frame 2. Autoresizing（设置控件与父控件的相对关系,从而实现间接设置frame， ios系统在运行时会根据设置的规则, 计算出对应的frame,无需手动计算frame） 通过设置子控件与父控件的关系来决定如何显示控件 3. autolayout 通过设置某控件与任意其他控件间的关系来决定如何显示这个控件, 不仅
iOS关于autolayout的使用
weixin_33725807的博客
01-11 126
一、关于自动布局（Autolayout） 在Xcode中，自动布局看似是一个很复杂的系统，在真正使用它之前，我也是这么认为的，不过事实并非如此。 我们知道，一款iOS应用，其主要UI组件是由一个个相对独立的可视单元构成，这些可视单元有的主要负责向用户输出有用的信息，有些则负责信息的输 入（交互），交互的过程中往往还伴随有动画的效果，已达到整个信息传递的连贯性以及用户体验的细腻感。可...
MyLinearLayout：MyLayout是由Objective-C实现的功能强大的iOS UI框架。 它与Android Layout，iOS AutoLayout，SizeClass，HTML CSS float和flexbox和bootstrap集成了功能。 因此，您可以使用LinearLayout，RelativeLayout，FrameLayout，TableLayout，FlowLayout，FloatLayout，PathLayout，GridLayout，LayoutSizeClass
01-29
它集成了以下功能：iOS的Autolayout和SizeClass，Android的五个布局类，float和flex-box以及HTML / CSS引导程序。 MyLayout的Swift版本的名称为： 中文（简体）： 用法 有一个容器视图S，其宽度为100，高度包装为...
iOS8AutoLayout-Demo3
10-09
在iOS应用开发中，UI设计和布局是至关重要的部分，特别是在iOS8及更新版本中，引入了AutoLayout和Size Classes，极大地增强了界面的适应性和可维护性。本Demo3将详细解析如何在Storyboard中利用这两种技术来构建...
iOS 8 AutoLayout与Size Class
梦醒梦飞翔的专栏
04-08 651
iOS8和iPhone6发布已经过去蛮久了,广大的果粉终于迎来了大屏iPhone,再也不用纠结为大屏买三星舍苹果了…但是对于iOS开发人员来说,迎来了和Android开发开发一样的问题—>各种屏幕的适配(是不是可以要求加工资的节奏).对于适配,网传各种有关Size Class的论点,前段时间太忙,一直没去研究,套用+总的话,苹果在适配方面提供的方法做的比安卓好太多了.自己实测之后,确实很方便0.0
TangramKit：TangramKit是由Swift实现的功能强大的iOS UI框架。 它将功能与Android布局，iOS AutoLayout，SizeClass，HTML CSS float和flexbox和bootstrap集成在一起。 因此，您可以使用LinearLayout，RelativeLayout，FrameLayout，TableLayout，FlowLayout，FloatLayout，LayoutSizeClass来构建您的App。自动布局UIView UITableView
02-03
它集成了以下功能：iOS的Autolayout和SizeClass，Android的五个布局类，float和flex-box以及HTML / CSS引导程序。 TangramKit的Objective-C版本名为： 中文（简体）： 用法 有一个容器视图S，其宽度为100，高度...
iOS使用SizeClass适配不同屏幕
weixin_42003092的博客
04-18 1548
1、介绍图2、不同屏幕、方向对应的类型 （wAny hAny 是所有类型）2.1、iPhone4S/SE/6/X2.2、iPhone6Plus2.3、iPad（分全屏、split view）3、如何选中各种类型3.1、所有类型        如下图，仅仅选了设备，没有选择Vary for Traits，这种类型就是 wAny hAny，在这种类型下做的操作是适配所有类型3.2、wC hC类型（iP...
初识Auto Layout和Size Classes
Code_Ninja
11-27 2156
之前一直没有接触过Auto Layout，本人自从工作以后一直纯代码完成项目，很少用到StoryBoard和XIB了.自从Apple发布了iPhone 6和iPhone 6 plus，要完美适配屏幕，就必须接触Auto Layout了，StoryBoard看来也是要学习一下怎么使用了。最近不是特别忙，就看了一下苹果官方的Auto Layout的介绍文档。至于Auto Layout的详细教程，个人觉
[iOS] 初探 iOS8 中的 Size Class
汪海的实验室
09-15 1万+
原文地址：http://blog.callmewhy.com/2014/09/12/learn-ios8-size-class/以前和安卓的同学聊天的时候，谈到适配一直是一个非常开心的话题，看到他们被各种屏幕适配折磨的欲仙欲死，心里真替他们高兴。不过在做到 iPhone 和 iPad 的适配的时候，一个页面需要配置多个 xib 进行开发还是个很头疼的事情。再加上 iPhone6 和 iPhone6
Xcode7中自动布局autolayout和sizeclass的使用
厚积薄发
01-12 3797
周末宅在家里写自己的一个Demo的时候发现Xcode7中关于自动布局autolayout和sizeclass的使用和Xcode6有了很明显的变化。去年我曾写过一篇文章xcode6中自动布局autolayout和sizeclass的使用，转载量很大，但这篇文章在目前的Xcode7中已经有些过时了，这里为了不误人子弟，我决定再写一篇Xcode7中的使用的简介
ios8autoLayout
12-24
总之，"ios8autoLayout"这个项目提供了对iOS8 AutoLayout特性的实战演示，包括Size Classes、Smart Constraints、Visual Format Language和新属性的使用。通过研究这个项目，开发者可以更好地理解和掌握如何在不同...
xcode6中自动布局autolayout和sizeclass的使用
热门推荐
厚积薄发
09-15 2万+
一、关于自动布局（Autolayout） 在Xcode中，自动布局看似是一个很复杂的系统，在真正使用它之前，我也是这么认为的，不过事实并非如此。 我们知道，一款iOS应用，其主要UI组件是由一个个相对独立的可视单元构成，这些可视单元有的主要负责向用户输出有用的信息，有些则负责信息的输入（交互），交互的过程中往往还伴随有动画的效果，已达到整个信息传递的连贯性以及用户体验的细腻感。可视单元，在
iOS：storyBoard、xib布局，AutoLayout、sizeClass技术
rolandMan_的专栏
10-06 779
起因 去了一家相对成熟的公司面试，很意外也很惊喜，技术面试官是个美女！她进来的时候笑着说，刚就听人事说面试的是个帅哥，哈哈，我不好意思地笑了笑，她说，你笑起来更帅O(∩_∩)O！我自然是害羞的，我说你也很漂亮，况且美女程序员，本身就是个“珍稀动物”！然后，我们…… 好吧，开个玩笑，重点是，要上机面试，要求是用IB，其实一开始我是拒绝的，因为IB用得不是很多，不过我还是硬着头皮干了，结果我是
iOS基础——屏幕适配之autoResizing、autoLayout、sizeClass
点击置顶文章查看博客目录（全站式导航）
03-13 1903
iOS基础——屏幕适配之autoResizing、autoLayout、sizeClass一、autoResizing1、autoResizing的出现在iOS6之前，屏幕为了支持横屏，开始出现autoResizing作为屏幕适配的首选2、autoResizing缺点autoResizing只能指定View与父View之间的适配3、autoResizing的使用autoResizing使用简单，在点
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值