Auto Layout - BNR
通过Homepwner TARGETS -> General -> Deployment Info -> Devices中的iPhone改为Universal。当在iPad上运行时,自定义的细节界面不能自动调整大小来适应iPad的屏幕大小。因此,需使用Auto Layout来改变其显示方式。
一个约束(constraint)定义了视图层级间特定的关系,其可以用来决定一个或多个视图的布局。
视图校准矩阵的布局属性:

对于BNRDetailViewController.xib文件中,给底部的toolbar添加约束:
1)toolbar的底边缘跟最邻近的单元相距0点(其为toolbar的容器,即BNRDetailViewController视图);
2)toolbar的左边缘跟最邻近的单元相距0点;
3)toolbar的右边缘跟最邻近的单元相距0点;
4)toolbar的高度应为44点。
打开BNRDetailViewController.xib文件,点击图
中的左数第三个pin按钮,按下图添加约束:

在上图中,在Spacing to nearest neighbor部分,点击红色虚线,变成红色实现,即添加了一个距离约束。并将Height左边的方框打钩,给Height添加约束。最后,点击底部的Add 4 Constraints使添加的约束生效。
当创建了一个约束时,它将被添加到视图层级中特定的视图对象上。该约束影响了那个视图,则该视图就拥有这个约束。
按下图给Name标签添加约束:

按下图给Name右边的field添加约束:

接着,选中Name标签和该field,点击图
中的左数第二个Align图标,如下,给Baselines添加约束:

每一个约束都有一个优先级(Priority level),其用于当约束发生冲突时,哪个约束会获胜。优先级从1到1000,1000是必须的一个优先级。
约束调试:
Ambiguous layout——意味着至少缺少一个约束。
在BNRDetailViewController.xib文件中添加两个Label,如下图:
选中两个Label,按照添加约束下图添加top、left、right约束:

在BNRDetailViewController.m文件中添加viewDidLayoutSubviews方法如下:
//当视图改变大小时自动被调用(如第一次在屏幕上显示,或屏幕旋转)
- (void)viewDidLayoutSubviews {
//检查子视图是否有任何模凌两可的布局
for(UIView *subview in self.view.subviews) {
if ([subview hasAmbiguousLayout]) {
NSLog(@"AMBIGUOUS: %@", subview);
}
}
}
运行程序,将报告两个label的布局是模凌两可的。
修改backgroundTapped:方法如下:
- (IBAction)backgroundTapped:(id)sender {
[self.view endEditing:YES];
for(UIView *subview in self.view.subviews) {
if ([subview hasAmbiguousLayout]) {
[subview exerciseAmbiguityInLayout];
}
}
}
当点击背景视图时,模凌两可的两个label将互相转换。
从一个labelControl-Drag到另一个label,选中Equal Widths,使两个label的宽度相等。
exerciseAmbiguityInLayout方法纯粹是调试的工具,允许Auto Layout向你展示可能存在的布局。不应将该代码留在程序中。
Unsatisfiable constraints:当两个或更多个约束冲突时发生。意味着一个视图约束太多。
Misplaced Views:在XIB文件中视图的位置与其约束不匹配。意味着程序运行时,视图的框架跟在画布(canvas)上显示的不一样。
在不同的设备上,为了使视图控制器加载恰当的XIB文件,可以给xib文件加后缀,文件名为 BNRDetailViewController~iphone.xib BNRDetailViewController~ipad.xib 。
但是,该方法不能替代Auto Layout。Auto Layout亦会对用户的语言、字体大小或设备朝向作出反应。
Auto Layout - BNR的更多相关文章
- Auto Layout: Programmatic Constraints - BNR
继续Auto Layout - BNR篇. 打开BNRDetailViewController.m文件,重载viewDidLoad方法来创建UIImageView对象.当你想要给通过加载NIB文件创建 ...
- 【Auto Layout】Xcode6及以上版本,创建Auto Layout 约束时产生的一些变化【iOS开发教程】
[#Auto Layout#]Xcode6创建Auto Layout 约束时产生的一些变化 通过两个小Demo来展示下变化: Demo1需求: 为控制器的根视图(图中的“控制器View”)的子 ...
- iOS 8 Auto Layout界面自动布局系列2-使用Xcode的Interface Builder添加布局约束
http://blog.csdn.net/pucker/article/details/41843511 上一篇文章<iOS 8界面自动布局系列-1>简要介绍了iOS界面布局方式的前世今生 ...
- 手写代码自动实现自动布局,即Auto Layout的使用
手写代码自动实现自动布局,即Auto Layout的使用,有需要的朋友可以参考下. 这里要注意几点: 对子视图的约束,若是基于父视图,要通过父视图去添加约束. 对子视图进行自动布局调整,首先对UIVi ...
- Auto Layout
Auto Layout XCode5+ Auto Layout Concepts 核心的概念是约束. Constraint Basics Constant value Relation Priorit ...
- 使用Auto Layout中的VFL(Visual format language)--代码实现自动布局【转】
本文将通过简单的UI来说明如何用VFL来实现自动布局.在自动布局的时候避免不了使用代码来加以优化以及根据内容来实现不同的UI. 一:API介绍 NSLayoutConstraint API 1 2 3 ...
- 转载自@机智的新手:使用Auto Layout中的VFL(Visual format language)--代码实现自动布局
本文将通过简单的UI来说明如何用VFL来实现自动布局.在自动布局的时候避免不了使用代码来加以优化以及根据内容来实现不同的UI. 一:API介绍 NSLayoutConstraint API 1 2 3 ...
- ios auto layout demystified (二)
Constraints Constraint Types Layout constraints (NSLayoutConstraint class, public)—这些规则指定了view的几何学.他 ...
- ios auto layout demystified (一)
Ambiguous Layout 在开发过程中,你可以通过调用hasAmbiguousLayout 来测试你的view约束是否足够的.这个会返回boolean值.如果有一个不同的frame就会返回ye ...
随机推荐
- [九]JavaIO之ObjectInputStream 和 ObjectOutputStream
序列化 序列化是指把Java对象保存为二进制字节码的过程,Java反序列化是指把二进制码重新转换成Java对象的过程 序列化是一种轻量级的持久化,对象都是存活在内存中的,当JVM运行结束,对象便不存在 ...
- 关于微信小程序textarea层级过高问题解决
一.前言 相信做过微信小程序开发的人应该都碰到过这个问题,因为这个需求实在太常见了 由于textarea是属于原生组件,层级最高,不管在页面中我们设置z-index值多少都会被textarea组件遮挡 ...
- Powershell:关于hashtable你想知道的一切
译者语:本篇为一篇译文,详细介绍了在powershell中如何使用hashtable这种数据类型.本文为本人2018年最后一篇博文(哈哈,一年内写没写几篇),也是本人的第一次译文,有不足之处还请指教. ...
- Scala(二) —— 函数
try 表达式 var result = try{ Integer.parseInt("dog") }catch{ case _ => 0 }finally{ println ...
- DSAPI多功能组件编程应用-网络相关(中)
[DSAPI.DLL下载地址] 在中篇,我将演示比上篇稍微复杂点的功能.如HTTP监听和局域网广播. 有时,我们会有这样的需求:用户通过浏览器来访问获取数据,我们的程序需要监听指定端口,根据不同的请求 ...
- 环境搭建 - Java(Windows)
Java开发环境搭建 本文以window7下搭建JDK8示例,其他版本无特殊说明同理. 下载JDK安装包 网址:JDK8 非C盘下根目录新建文件夹:Java D:\Java 安装JDK至Jav ...
- 深入理解JavaScript作用域和作用域链
前言 JavaScript 中有一个被称为作用域(Scope)的特性.虽然对于许多新手开发者来说,作用域的概念并不是很容易理解,本文我会尽我所能用最简单的方式来解释作用域和作用域链,希望大家有所收获! ...
- 在sublimen中整理CSS代码及其兼容性问题
1,使用鼠标选中前面浅灰色缩进. 2,Ctrl+H 查找替换 点击 Find All 查找全部缩进. 3,按backspace向后删除两次,如下图所示: 4,向下按一次方向键,再向左按一次方向键,最 ...
- Flask框架搭建REST-API服务
一.目的 为了能够将测试工具部署成RESTful-API服务,这样就能通过接口的方式提供统一测试工具服务,使用人员就不用构建application而产生的各种环境问题.使用问题. 适合人群:Pytho ...
- Python使用Plotly绘图工具,绘制气泡图
今天来讲讲如何使用Python 绘图工具,Plotly来绘制气泡图. 气泡图的实现方法类似散点图的实现.修改散点图中点的大小,就变成气泡图. 实现代码如下: import plotly as py i ...