Auto Layout to the rescue!

接下来就看看如何使用Auto Layout来实现这个效果。

首先移除viewWillLayoutSubviews方法,选择Main.storyboard然后勾选Use Autolayout

注意:auto layout适用于整个的nib或者storyboard文件。所有在其中的views都将使用auto layout。

选择后运行app产生如下的效果

  • Leading Space to Superview 与父视图的左边界线保持固定距离
  • Trailing Space to Superview 与父视图的右边界线保持固定距离
  • Top Space to Superview 与父视图的顶部边界线保持固定距离
  • Bottom Space to Superview 与父视图的底部边界线保持固定距离
  • Horizotal Spacing 两个子视图之间的水平距离保持固定长度
  • Vertical Spacing 两个子视图之间的垂直距离保持固定长度
  • Width Equally 两个子视图之间保持相等的宽度
  • Height Equally 两个子视图之间保持相等的高度

选择 按键,然后选择上面的两个view视图。选择Xcode’s Editor菜单,下面的Pin\Widths Equally

选择两个view,然后选择Editor\Pin\Horizontal Spacing

For the view on the left, choose from the Editor\Pin menu:

  • Top Space to Superview
  • Leading Space to Superview

For the view on the right, choose:

  • Top Space to Superview
  • Trailing Space to Superview

And for the big view at the bottom:

  • Leading Space to Superview
  • Trailing Space to Superview
  • Bottom Space to Superview

最后的效果图如下:

到目前位置,你的T-bars还是橘色而不是蓝色的,证明约束还是不对的。需要添加更多的约束来实现这个效果。

选择选择三个views然后选择Pin\Heights Equally,然后选择top-left corner和bottom view然后选择Editor\Pin\Vertical Spacing。就ok了

实际中,因为创建的view比较宽,然后报的高度有建议高度,这个只要在size属性中修改为建议的高度或者宽度等就可以了。然后就是这个view最好居中屏幕显示。

你可以在document outline的constrains下面看到所有的constrains。选择任何一个可以高亮。任何一个constraint都有他自己的属性可以用来设置和修改。

Beginning Auto Layout Tutorial in iOS 7: Part 2的更多相关文章

  1. Beginning Auto Layout Tutorial in iOS 7: Part 3

    How Auto Layout works 在使用auto layout之前,你可能总是使用initWithFrame或者frame, bounds or center属性. 使用约束的好处在于你不需 ...

  2. Beginning Auto Layout Tutorial in iOS 7: Part 6

    Gallery example 屏幕有四个分开的相同的矩形,每个矩形有一个label和一个image view.创建一个Gallery的项目.在Main.storyboard中,拖拉一个view大小为 ...

  3. Beginning Auto Layout Tutorial in iOS 7: Part 1

    可以更好的结局屏幕方向和兼容iphone和ipad的解决方案. iOS6有一个新的技术auto layout来帮助解决这个问题.这个技术不仅可以支持app不同尺寸下的开发,而且你也不需要为每一种语言创 ...

  4. Beginning Auto Layout Tutorial in iOS 7: Part 4

    A little runtime excursion 为两个button都添加同一个ibaction方法在viewcontroller.m中实现如下的方法:

  5. Swift语言Auto Layout入门教程:上篇

    原文:Beginning Auto Layout Tutorial in Swift: Part 1/2,译者:@TurtleFromMars 开始用自动布局约束的方式思考吧! 更新记录:该教程由Br ...

  6. iOS布局之Auto Layout

    学习资源: <iOS6核心编程>自动布局部分 <iOS6范例经典>自动布局部分 Tutorial: iOS 6 Auto Layout versus Springs and S ...

  7. How to Use Auto Layout in XCode 6 for iOS 7 and 8 Development

    The Auto Layout is available on the Storyboard for iOS or OS X development since XCode 5. But, I did ...

  8. iOS Programming Auto Layout: Programmatic Constraints 自动布局:通过编程限制

    iOS Programming  Auto Layout: Programmatic Constraints  1.  However, if your views are created in co ...

  9. 【转】使用 Auto Layout 的典型痛点和技巧

    layoutIfNeeded()强制立刻更新布局 原文网址:http://www.jianshu.com/p/0f031606e5f2 官方文档:Auto Layout Guide 加上去年WWDC上 ...

随机推荐

  1. 2018安恒杯11月月赛 MISC

    题目放评论了 Numeric password 这次隐写没有按照套路出牌,很强. 记录一下 看来自主学习的能力很有待提高. 打开Numeric password.txt 中华文化博大精深,近日在教小外 ...

  2. Mac进行一些操作时提醒Operation not permitted的完美解决

    Mac版本10.14.5 ,向下向上都行: 1.关闭mac的安全机制,首先可以在正常模式下,输入 csrutil status 命令,查看mac安全机制是否开启. 2.如果 Protection st ...

  3. LeetCode668马在棋盘上的概率

    已知一个 NxN 的国际象棋棋盘,棋盘的行号和列号都是从 0 开始.即最左上角的格子记为 (0, 0),最右下角的记为 (N-1, N-1). 现有一个 “马”(也译作 “骑士”)位于 (r, c)  ...

  4. PAT——乙级1008

    1008 数组元素循环右移问题 (20 point(s)) 一个数组A中存有N(>0)个整数,在不允许使用另外数组的前提下,将每个整数循环向右移M(≥0)个位置,即将A中的数据由(A​0​​A​ ...

  5. sqlserver 操作access数据库

    exec sp_configure 'show advanced options',1  reconfigure  exec sp_configure 'Ad Hoc Distributed Quer ...

  6. SGX技术初探

    一.SGX技术背景 1.1 SGX技术定义 SGX全称Intel Software Guard Extensions,顾名思义,其是对因特尔体系(IA)的一个扩展,用于增强软件的安全性.这种方式并不是 ...

  7. 微信小程序--微信小程序tabBar不显示:缺少文件,错误信息:error:iconPath=

    1.list中的第一个tab的地址必须定义在pages 中 2.pagePath的地址一定要正确 正确写法是: "tabBar": { "color": &qu ...

  8. selenium webdriver——控制浏览器

    from selenium import webdriver import time def controlBrowser(): #启动浏览器 driver = webdriver.Firefox() ...

  9. AngularJs 特性 之 指令系统

    <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf- ...

  10. 折线统计(line)

    折线统计(line) 题目描述 二维平面上有n个点(xi, yi),现在这些点中取若干点构成一个集合S,对它们按照x坐标排序,顺次连接,将会构成一些连续上升.下降的折线,设其数量为f(S).如下图中, ...