iOS开发~UI布局(二)storyboard中autolayout和size class的使用详解
1、Xcode6中增加了size class,在storyboard中如何使用?
2、auto layout该如何与size class配合来进行UI布局?
二、了解一件新事物的最好的办法就是实践,让我们揭开那神秘的面纱:
例子1、新建一个Single View Application template项目Demo1,拖拽一个newView到rootView上,并设置背景色为绿色, 然后不做任何其他修改,运行项目,模拟器选择iPhone6,运行效果如图:
横屏:
竖屏:
把模拟器更改为iPad、iPhone4s等,然后再旋转屏幕,发现绿色的newView的位置几乎没有变化。查看Document Outline发现没有任何constraint(约束)作用于绿色view上,理论上如果一个view没有任何constraint,那么view将没有位置及大小,但目前来看是没问题的,何解?
查看view的size inspector,发现秘密了:
原来如果不给一个view添加任何constraint,系统会自动给view添加左、上、宽、高四个约束,就是说新绿色的view会有固定的宽和高,然后以屏幕左上角为参考点,有一个系统添加的默认位置。(如果我们向绿色view添加任何其他约束,那么系统自动添加的约束将实效)
还有一个问题是,刚刚切换了很多不同类型的模拟器,相当于切换了不同的size class,但显示绿色view都正常,而size class的存在的目的就是为了区分不同的size class(例如:iPhone4s横屏wCompact/hCompact,iPhone4s竖屏wCompact/hRegular,iPad横竖屏都是wRegular/hRegular),然后来做不同的UI布局,何解?
查看当前的size class:
当前的size class为wAny/hAny,也就是说在size class为wAny/hAny的时候添加constraint,在其他size class的时候也生效。其实从字面上也可以看出,Any就是任何的意思,Compact和Regular是Any的子类。
例子2、基于iPhone适配界面,添加三个view到rootView上,然后无论横屏还是竖屏,新添加的三个view之间及与屏幕边框的距离都保持不变的间距20点宽,效果如图:
新建一个Single View Application template项目Demo2,因为要适配iPhone横竖屏,所以修改size class为wCompact/hRegular来适配竖屏:
拖拽3个view到rootView上,并设置其背景颜色
为了满足设计要求,要添加如下constraint:
(1)设定绿色view距离superview左边距和上边距;
(2)设定黄色view距离superview右边距和上边距,相对绿色view的的左边距;
(3)设定蓝色view的左边距和右边距和下边距,上边距离绿色view下边的距离;
(4)设定绿色view与黄色view等宽
(5)设定蓝色view与绿色view等高
现在开始动手吧:选中绿色view,Eidtor->Pin->Leading Space to Superview给绿色view添加相对其superview的左边距,然后选中constraint,修改约束的值为20,其他constraint以此类推:
添加完如图:
其中红色框部分清晰的表达了所添加的constraint;
蓝色框部分时添加的constraint,目前为黄色线,表明当前的constraint还不能定位view,当一个view的constraint正确的时候,constraint的颜色会变为蓝色。
绿色线框的部分表达了constraint的数值,我们想让边距为20,所以设置数值为20 。wC hR Installed表明当前constraint适用于wC hR这种size class,不适合any any的size class。
添加绿色view与黄色view之前的距离时候,由于是设定两个子view的constraint,所以要选中两个view,然后Editor->Pin ->Horizontal,设定值为20:
同样方法Editor->Pin ->Width Equally,设定绿色view与黄色view等宽度,蓝色view与绿色view等高,结果如图:
但发现constraint颜色仍然后黄色,原因是当前view的位置和constraint希望的不一致,更新下frame(要选中3个view,因为constraint关联3个view)或者点击Document Outline中的黄色小箭头,然后会看到具体的constraint信息来一步步调试,这个也是Xcode6最有突破的地方:
然后效果如图:
然后运行下项目吧,发现确实和预期的一样。然后旋转屏幕,是不是发现横屏时候白了,屏幕什么都没有了?原因是我们仅仅适配的竖屏,横屏还没有适配啊!
修改size class,iPhone4s横屏的size class为wCompact/hCompact,而iPhone6 plus为wReguage/hCompact,那我们不如设置为wAny/hCompact吧!然后安装上边适配竖屏的方式适配横屏。适配好后再次运行,横竖屏都应该是我们想要的了。
完整项目下载
例子3、新建一个Single View Application template项目Demo3,添加一个view,是这个view的宽度和高度都是100点宽,并且始终居中于superview,效果如图:
这个例子很简单,也很容易实现,目的是补充以上两个例子没有提及到的一些细节。
在rootView上添加一个view,设定背景色为绿色:
由于不打算区分是哪种iOS设备,所以size class选择wAny/hAny,然后绿色的view随便放到superview上就可以,Auto Layout的理念就是不用去管具体view的frame,要注意的是这个view最终想如何的显示,属于基于目的设计的范畴。
这个例子要完成两件事情:
(1)设定约束使view的宽和高为100点宽
(2)设定约束使view始终居中于superview
先做第(1)件事:选中view,然后Editor->Pin->Width,设定为100,同样方法设定Height
然后第(2)件是让view居中:还是选中view,然后Editor ->Aligh ->Horizontal Center in Container,同样方法设定垂直居中对齐:
然后会发现Document Outline右上角有一个黄色小箭头:
点击黄色箭头进入structure页面,可以看到一些提示信息,可以了解当前布局存在问题,指导下一步该做什么。在view中看到一个黄色虚线框,这个框代表目前约束得到的view,在structure页面有一个黄色的点,点击后会提示你如何修改:
选择Update Frame就是按照当前的约束去更新view,选择Update Constains是按照拖拽进去view的frame更新约束。在这个例子中Update Frame是我们需要的。然后运行项目看看是不是我们想要的效果吧!
转载于:https://www.cnblogs.com/jgCho/p/5065758.html
iOS开发~UI布局(二)storyboard中autolayout和size class的使用详解相关推荐
- iOS8开发~UI布局(二)storyboard中autolayout和size class的使用详解
一.概要:前一篇初步的描述了size class的概念,那么实际中如何使用呢,下面两个问题是我们一定会遇到的: 1.Xcode6中增加了size class,在storyboard中如何使用? 2.a ...
- iOS开发UI篇—使用storyboard创建导航控制器以及控制器的生命周期
一.基本过程 新建一个项目,系统默认的主控制器继承自UIViewController,把主控制器两个文件删掉. 在storyboard中,默认的控制器是View Controller,而我们需要的是导 ...
- iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局
iOS开发UI篇-使用xib自定义UItableviewcell实现一个简单的团购应用界面布局 iOS开发UI篇-使用xib自定义UItableviewcell实现一个简单的团购应用界面布局 一.项目 ...
- iOS开发UI篇-在UItableview中实现加载更多功能
iOS开发UI篇-在UItableview中实现加载更多功能 一.实现效果 点击加载更多按钮,出现一个加载图示,三秒钟后添加两条新的数据. 二.实现代码和说明 当在页面(视图部分)点击加载更多按钮的时 ...
- iOS开发UI篇—Quartz2D简单使用(二)
iOS开发UI篇-Quartz2D简单使用(二) 一.画文字 代码: // // YYtextview.m // 04-写文字 // // Created by 孔医己 on 14-6-10. // ...
- iOS开发UI篇—IOS开发中Xcode的一些使用技巧
iOS开发UI篇-IOS开发中Xcode的一些使用技巧 一.快捷键的使用 经常用到的快捷键如下: 新建 shift + cmd + n 新建项目 cmd + n 新建文 ...
- iOS开发UI基础—手写控件,frame,center和bounds属性
iOS开发UI基础-手写控件,frame,center和bounds属性 一.手写控件 1.手写控件的步骤 (1)使用相应的控件类创建控件对象 (2)设置该控件的各种属性 (3)添加控件到视图中 (4 ...
- android tableview实现多选功能,iOS开发UI篇-tableView在编辑状态下的批量操作(多选)...
先看下效果图 直接上代码 #import "MyController.h" @interface MyController () { UIButton *button; } @pr ...
- iOS开发UI篇—Quartz2D使用(信纸条纹)
iOS开发UI篇-Quartz2D使用(信纸条纹) 一.前导程序 新建一个项目,在主控制器文件中实现以下几行代码,就能轻松的完成图片在视图中的平铺. 1 #import "YYViewCon ...
最新文章
- LeetCode Rotate List
- ASP将查询数据导出EXCEL
- Hadoop权威指南 _01前言感悟
- 正确处理kafka多线程消费的姿势
- wp7开发官方教程和开发包
- python--lambda
- C语言深入理解系列 - 关键字:auto和register
- npy文件转图像并显示
- FileResponse django下载文件问题
- c语言编程数的平方,C语言编程实例:由两个平方三位数获得三个平方二位数
- 几款好用的录屏软件推荐
- C语言error2005,关于ERROR LNK 2005错误
- 学生考勤及行为管理系统_学生考勤信息管理系统.doc
- php获取当前域名的方法 如何获得域名
- 在VMware上如何创建虚拟机以及安装linux系统
- [UE4]设置虚幻引擎的Visual Studio
- [note] 微电子学概论(二) PN结 MOS和MOSFET
- Ptyhon 入门:通过高德地图获取经纬度
- emoji-mart或者emoji-picker-react实现一个类似于微信聊天的在线发送表情,再加一个带源码的纯js实现,emoji图片本地加载
- 全面解析5种常见悬挂——连杆支柱悬挂
热门文章
- leetcode43. 字符串相乘 经典大数+和*
- leetcode205. 同构字符串 一般人一次做不对的简单题
- UNIX(进程间通信):16深入理解Socket
- 用Java的Set实现交并差等集合运算
- web3 0.2.x 和 1.x.x版本之间的差异
- codeforces 266B-C语言解题报告
- Android Studio 自定义Gradle Plugin
- 小两口攒钱不吵嘴 用理财加固你的爱情
- C语言探秘:C代码在内存中的分布
- .NET Framework各版本比较