继续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命令教程(4)- 转移(add/rm/mv)

    今天是Git系列课程第四课,上一课我们在Git空间里做了一些文件改动并且知道了如何利用Git查看这些变动,今天痞子衡要讲的是将这些变动提交到Git本地仓库前的准备工作. Git仓库目录下的文件改动操作 ...

  2. 初识TensorFlow

    在前边几期的文章中,笔者已经用TensorFlow进行的一些基础性的探索工作,想必大家对TensorFlow框架也是非常的好奇,本着发扬雷锋精神,笔者将详细的阐述TensorFlow框架的基本用法,并 ...

  3. Perl IO:IO重定向

    文件句柄和文件描述符的关系 文件描述符是操作系统的资源,对于实体文件来说,每打开一次文件,操作系统都会为该进程分配一个文件描述符来关联(指向)这个文件,以后操作文件数据都根据这个文件描述符来操作,而不 ...

  4. IEnumerable<T>和IQueryable<T>区分

    LINQ查询方法一共提供了两种扩展方法,在System.Linq命名空间下,有两个静态类:Enumerable类,它针对继承了IEnumerable<T>接口的集合进行扩展:Queryab ...

  5. WebClient下载文件

    public void DownDile(string url) { WebClient client = new WebClient(); string URLAddress = @"ht ...

  6. 日志收集ELK+kafka相关博客

    SpringBoot+kafka+ELK分布式日志收集 使用 logstash + kafka + elasticsearch 实现日志监控 Kibana 安装 与 汉化 windows系统安装运行f ...

  7. 基于element-tree-table树型表格点击节点请求数据展开树型表格

    效果: 引用CSS.JS: Vue.element-ui.Axios treeTable: https://github.com/ProsperLee/element-tree-grid 模拟根据父i ...

  8. 广州.NET微软技术俱乐部休闲活动 - 每周三五晚周日下午爬白云山活动

    基于如下原因: 正如我们在<广州.NET微软技术俱乐部与其他技术群的区别>里面提到的:有人在活动中表达"少了一点自由交流的时间, 我们来自五湖四海, 希望多点时间彼此认识&quo ...

  9. Android 性能优化:使用 Lint 优化代码、去除多余资源

    前言 在保证代码没有功能问题,完成业务开发之余,有追求的程序员还要追求代码的规范.可维护性. 今天,以“成为优秀的程序员”为目标的拭心将和大家一起精益求精,学习使用 Lint 优化我们的代码. 什么是 ...

  10. eos 创建两对的公钥和私钥, 钱包,交易所转账到主网,主网到交易所

    在ubuntu18.04上安装EOS的目的: 在ubuntu中,进行eos源码编译和安装 在不联网的安全环境下,用eos官方的命令行工具,创建自己的公钥和私钥 用eos官方的命令行工具,创建钱包,执行 ...