iOS 8 UI布局 AutoLayout及SizeClass(二)
随着iOS8系统的公布,一个全新的页面UI布局概念出现,这个新特性将颠覆包含iOS7及之前版本号的UI布局方式,这个新特性就是Size Class。
Size Class配合Auto Layout能够解决全部(包含iPhone及iPad)iOS设备屏幕尺寸及屏幕旋转时候的UI适配问题 。
二、为什么要使用Size Class
直到iPhone6公布后。眼下iOS设备的屏幕尺寸已经有4种了,如图:
iPhone6没出现之前,还能够通过代码来适配两种尺寸的UI,但iPhone6公布后。渐渐的发现曾经的方式可能真的要淘汰了,由于以后可能还要面对很多其它的屏幕尺寸。显然硬编码UI的Frame的时代要过去了。要使用Auto Layout了。
自从iOS6開始就引入了Auto Layout。但一直没用推广使用,原因有非常多(比如:Auto Layout本身不是非常成熟、硬编码能够解决iPhone仅有两种屏幕尺寸的UI适配、iPhone项目和iPad项目分开来进行等)。
Size Class是配合Auto Layout来使用的。让Auto Layout方式变得不那么复杂。
三、该怎样使用Size Class
要使用Size Class。首先要安装最新的Xcode6,新建一个Single View Application template项目,选择Main.storyboard-> View,查看Inspector属性:
默认Size Classes就已经使用了,当然假设不想使用它也能够关掉,然后使用旧的布局方式。但假设选择使用Size Class。然后关掉Auto Layout。Xcode会弹出一个警告框:(稍后就会明确为什么!)
选择cancel,由于接下来要使用Size Classes。
Size Classes事实上就是将iOS设备屏幕的Size进行分类。怎样分类的呢?
对于iOS设备(不管iPhone还是iPad)。宽度和高度都各分为3种情况:紧凑(Compact)、规则(Regular)、不论什么(Any)
当中“不论什么”(Any)包括紧凑(Compact)、规则(Regular)类型。假设屏幕宽度用w表示。高度用h表示,那么w(Regular)/h(Regular)组合就是iPad屏幕尺寸(size)的类别(class),不管iPad横屏还是竖屏,屏幕尺寸类别都是w(Regular)/h(Regular)。上图能够非常清楚的表达。
官网也列举了一些:
到这里应该明确了。Size Classes是将屏幕尺寸的种类做了进一步的抽象。
那有一个问题,分类的有什么用?该怎么用啊?
曾经为不同的iOS设备尺寸或者同尺寸横竖屏不同适配UI,都要依据实际情况而去计算frame。
使用Size Classes是依据当前的屏幕size类型而使用Auto Layout方式进行布局了,要摒弃之前计算frame的思路。而改用相对布局的思维去思考(实际上还是要计算frame)。
并且Xcode6最大的突破也是这里,不在须要建立不同尺寸的storyboard了。仅仅要建立一个。然后改动其view的size就能够做各种屏幕尺寸的适配。例如以下:
比如我要做iPad页面设计,就设置成w (Regular)/h(Regular)
然后相同的project,又要兼容横屏的iPhone6 plus。就能够把view的size class设置成:w (Regular)/h(Compact),然后继续适配
然后当程序跑在不同的设备上。或者设备横屏和竖屏切换。就能显示对应的UI了。
说了这么多。还是动手实验一下吧:
适配iPhone6,在RootViewController的view上加入一个新的view。让这个新的view不管屏幕横屏还是竖屏时候都距离其superview的边缘50点宽,而且横屏时候为绿颜色,竖屏时候为红颜色。
1、新建项目(刚刚已经新建了一个AL8的项目,不反复步骤了)
2、切换size class为wCompact/hRegular模式
而且加入一个view,不用管其frame。并设置其背景色为红色
接下来选中红色的view。然后点击Xcode顶部工具栏的Editor-Pin,然后分别加入红色view相对superview边框的约束(上下左右)
加入约束的过程中会看到约束的线是黄颜色。表明当前的约束还不能确定view的frame。须要继续加入,当加入完4个约束后。约束线的颜色是蓝色的。表明当前约束是正确的。
然后选中约束,设定约束的值(我们不是想让新的view距离其superview边界50点宽吗。),4个约束都要设置。
设置完后点击下view会自己主动更新frame,应该是这种:
3、切换size class为wRegular/hCompact模式,然后反复第二步中的设置,差别是新加入的view背景颜色设置为绿色。
4、大功告成,用模拟器执行下吧,模拟器要选择iPhone6 plus哦!然后旋转屏幕看看是不是我们想要的效果!
思考:把模拟器切换为iPhone6、iPhone5、iPhone4s、iPad会有什么现象!下一篇会解释!
Demo下载
转载于:https://www.cnblogs.com/jhcelue/p/7102327.html
iOS 8 UI布局 AutoLayout及SizeClass(二)相关推荐
- iOS开发UI篇—Quartz2D简单使用(二)
iOS开发UI篇-Quartz2D简单使用(二) 一.画文字 代码: // // YYtextview.m // 04-写文字 // // Created by 孔医己 on 14-6-10. // ...
- iOS开发~UI布局(二)storyboard中autolayout和size class的使用详解
一.概要:前一篇初步的描述了size class的概念,那么实际中如何使用呢,下面两个问题是我们一定会遇到的: 1.Xcode6中增加了size class,在storyboard中如何使用? 2.a ...
- iOS8开发~UI布局(二)storyboard中autolayout和size class的使用详解
一.概要:前一篇初步的描述了size class的概念,那么实际中如何使用呢,下面两个问题是我们一定会遇到的: 1.Xcode6中增加了size class,在storyboard中如何使用? 2.a ...
- iOS开发~UI布局(三)深入理解autolayout
一.概要 通过对iOS8界面布局的学习和总结,发现autolayout才是主角,autolayout是iOS6引入的新特性,当时还粗浅的学习了下,可是没有真正应用到项目中.随着iOS设备尺寸逐渐碎片化 ...
- iOS8开发~UI布局(三)深入理解autolayout
一.概要 通过对iOS8界面布局的学习和总结,发现autolayout才是主角,autolayout是iOS6引入的新特性,当时还粗浅的学习了下,可是没有真正应用到项目中.随着iOS设备尺寸逐渐碎片化 ...
- iOS 8 AutoLayout 及SizeClass(三) 使用详解 好多值得学习及研究的地方
一.概要 通过对iOS8界面布局的学习和总结,发现autolayout才是主角,autolayout是iOS6引入的新特性,当时还粗浅的学习了下,可是没有真正应用到项目中.随着iOS设备尺寸逐渐碎片化 ...
- iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局
iOS开发UI篇-使用xib自定义UItableviewcell实现一个简单的团购应用界面布局 iOS开发UI篇-使用xib自定义UItableviewcell实现一个简单的团购应用界面布局 一.项目 ...
- 二、更换Abp Vnext默认的UI 布局
上一节我们搭建了简单的项目环境,但是默认的UI看起来比较low,也不大满足我们的使用习惯,我们有必要替换默认的UI主题. 这里我们只讨论angular前端的实现,并且使用的UI框架是基于bootstr ...
- iOS开发UI基础—手写控件,frame,center和bounds属性
iOS开发UI基础-手写控件,frame,center和bounds属性 一.手写控件 1.手写控件的步骤 (1)使用相应的控件类创建控件对象 (2)设置该控件的各种属性 (3)添加控件到视图中 (4 ...
最新文章
- pycharm执行python程序报错ImportError: DLL load failed: torchvision找不到指定的程序
- 关于AIX lv 4k offset问题初步了解
- 解读Cardinality Estimation算法(第四部分:HyperLogLog Counting)
- .NET Core Tools转向使用MSBuild项目格式
- SpringCloud Alibaba 框架下公司架构图
- Leetcode 456. 132 Pattern
- 问题与事务跟踪系统jira中的版本管理
- 从操作系统内核看设计模式--linux内核的facade模式
- mysql练习----SUM and COUNT/zh图(二)
- .net中对象序列化技术
- Delphi2010Excel导入数据库
- 人脸生成黑科技:实现人脸转变特效,让人脸自动戴墨镜
- 嵌入式研发人员的核心竞争力浅谈
- 教你去掉 U盘写保护
- Docker基础、利用Docker Compose部署Vue项目
- android wear手表6,Android Wear(手表)开发
- 最简单web工程接收消息图片--微信企业号
- 斐波那契数列、小青蛙跳台阶
- mysql联合主键,也就是两个数据字段一起做主键的情况
- 财务应付结算系统设计-账单
热门文章
- textaligncenter仍然不居中_5个word你不知道的功能
- Linux内存带宽的一些测试笔记
- 【clickhouse】yandex 官方 BalancedClickhouseDataSource 源码分析
- 95-910-330-源码-FlinkSQL-Calcite-Flink结合Calcite
- 95-25-010-命令-topic 创建过程
- 95-10-132-启动-TransactionCoordinator-源码
- 【java】java 关键字: final详解
- 【Kafka】kafka无法查看消费组消费信息,其他相关组件正常
- Greenplum元数据信息
- 【Flink】Flink 启动报错 DirectoryNotEmptyException Could not close resource