继续UIImageView - 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的更多相关文章

  1. Auto Layout: Programmatic Constraints - BNR

    继续Auto Layout - BNR篇. 打开BNRDetailViewController.m文件,重载viewDidLoad方法来创建UIImageView对象.当你想要给通过加载NIB文件创建 ...

  2. 【Auto Layout】Xcode6及以上版本,创建Auto Layout 约束时产生的一些变化【iOS开发教程】

    [#Auto Layout#]Xcode6创建Auto Layout 约束时产生的一些变化     通过两个小Demo来展示下变化: Demo1需求: 为控制器的根视图(图中的“控制器View”)的子 ...

  3. iOS 8 Auto Layout界面自动布局系列2-使用Xcode的Interface Builder添加布局约束

    http://blog.csdn.net/pucker/article/details/41843511 上一篇文章<iOS 8界面自动布局系列-1>简要介绍了iOS界面布局方式的前世今生 ...

  4. 手写代码自动实现自动布局,即Auto Layout的使用

    手写代码自动实现自动布局,即Auto Layout的使用,有需要的朋友可以参考下. 这里要注意几点: 对子视图的约束,若是基于父视图,要通过父视图去添加约束. 对子视图进行自动布局调整,首先对UIVi ...

  5. Auto Layout

    Auto Layout XCode5+ Auto Layout Concepts 核心的概念是约束. Constraint Basics Constant value Relation Priorit ...

  6. 使用Auto Layout中的VFL(Visual format language)--代码实现自动布局【转】

    本文将通过简单的UI来说明如何用VFL来实现自动布局.在自动布局的时候避免不了使用代码来加以优化以及根据内容来实现不同的UI. 一:API介绍 NSLayoutConstraint API 1 2 3 ...

  7. 转载自@机智的新手:使用Auto Layout中的VFL(Visual format language)--代码实现自动布局

    本文将通过简单的UI来说明如何用VFL来实现自动布局.在自动布局的时候避免不了使用代码来加以优化以及根据内容来实现不同的UI. 一:API介绍 NSLayoutConstraint API 1 2 3 ...

  8. ios auto layout demystified (二)

    Constraints Constraint Types Layout constraints (NSLayoutConstraint class, public)—这些规则指定了view的几何学.他 ...

  9. ios auto layout demystified (一)

    Ambiguous Layout 在开发过程中,你可以通过调用hasAmbiguousLayout 来测试你的view约束是否足够的.这个会返回boolean值.如果有一个不同的frame就会返回ye ...

随机推荐

  1. 痞子衡嵌入式:第一本Git命令教程(1)- 准备(init/config/.gitignore)

    今天是Git系列课程第一课,痞子衡给大家要讲的是创建仓库的准备工作. 1.建仓库git init 第一步是创建一个空仓库,这是一切操作的前提. // 打开git bash命令行,切换到指定目录下 ja ...

  2. 深度学习(Deep Learning)资料大全(不断更新)

    Deep Learning(深度学习)学习笔记(不断更新): Deep Learning(深度学习)学习笔记之系列(一) 深度学习(Deep Learning)资料(不断更新):新增数据集,微信公众号 ...

  3. Jenkins结合.net平台综合应用之使用FileZilla搭建ftp服务器

    上一节我们讲解了如何编译web项目,web项生成以后我们是手动复制到iis目录下的,这显然不符合devops初衷,这里我们讲解如何利用ftp协议把文件传到远程服务器的iis目录下. 这一讲分两部分一部 ...

  4. python学习笔记(十 三)、网络编程

    最近心情有点儿浮躁,难以静下心来 Python提供了强大的网络编程支持,很多库实现了常见的网络协议以及基于这些协议的抽象层,让你能够专注于程序的逻辑,而无需关心通过线路来传输比特的问题. 1 几个网络 ...

  5. Android项目刮刮奖详解(二)

    Android项目刮刮奖详解(一) 前言 上期我们简单地实现了一个画板的功能,用户可以在上面乱写乱画,其实,刮刮奖也是如此,用户刮奖的时候也是乱写乱画的. 刮刮奖原理 一共有两层画布,底层画布存放中奖 ...

  6. Css实现手机端页面强制横屏的方法示例

    样式 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 @media screen ...

  7. C#自定义FTP访问类的代码

    如下资料是关于C#自定义FTP访问类的代码,应该对各朋友有帮助. using System; using System.Collections.Generic; using System.Text; ...

  8. Android 异步框架 RxJava2

    观察者模式的概念 RxJava是android的异步框架,官方介绍是可观测的序列,组成异步基于事件程序的库.特点是观察者模式,基于事件流的链式调用,随着异步操作调度过程复杂的情况下,程序逻辑也变得越来 ...

  9. 使用 Nexus Repository Manager 搭建 npm 私服

    目录 环境 下载与安装 添加npm仓库 配置与验证npm仓库 发布自己的包 Nexus开启启动 脚注 环境 windows10(1803) Nexus Repository Manager OSS 3 ...

  10. 转摘Linux命令工作中常用总结

    Linux命令工作中常用总结   1. 搜索 在vi和vim中如果打开一个很大的文件,不容易找到对应的内容,可以使用自带的搜索关键字进行搜索定位: 在vi和vim界面中输入:"/" ...