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. leetcode 【 Best Time to Buy and Sell Stock III 】python 实现

    题目: Say you have an array for which the ith element is the price of a given stock on day i. Design a ...

  2. 设置CMD默认代码页为65001或936

    之前不知道怎么改的,CMD的代码页被默认设置成了65001   但我右击CMD标题,选择‘默认值’,显示默认却是936,但为何每次打开都是65001呢   上网找到设置默认值的方法 1 win键+R打 ...

  3. android adb常用指令

    介绍一个更详细的介绍ADB的: https://github.com/mzlogin/awesome-adb/blob/master/README.md ----------------------- ...

  4. python - 接口自动化测试 - MysqlUtil - 数据库操作封装

    # -*- coding:utf-8 -*- ''' @project: ApiAutoTest @author: Jimmy @file: mysql_util.py @ide: PyCharm C ...

  5. HTML 长文本换行

    word-break 属性指定单词在到达行尾时应如何中断. p.a { word-break: break-all; } word-break: normal|break-all|keep-all|b ...

  6. 【转】Unity3d的单例及场景间的数据传递

    http://blog.csdn.net/zy19940906/article/details/47724387  单例是场景间切换时传递数据的最常见的方式之一,在unity中,很多方法被封装,有时候 ...

  7. 学习RMQ-ST表

    RMQ一般是一个二维数组,用$dp[i][j]$表示起点为i开始连续数$2^j$个元素其中的最值,由于对于一个闭区间有:$R-L+1=len$因此也可以用另外一种记法:闭区间为$[i,i+2^j-1] ...

  8. 开发人员为组件添加自定义的className

    在开发过程当中需要给组件写上自己的样式,这个时候怎么办呢? 直接给组件添加className这样是无效的 当给组件添加className之后 在写组件的时候需要对使用你的组件的开发人员提供自定义cla ...

  9. linux之创建临时文件的方法

    有时候,我们需要创建文件临时存放一些输出的信息,创建文件时就可能出现文件名存在的问题.如何创建唯一的文件名,Linux为我们提供几个方案: 1.mktemp(强烈推荐) The  mktemp  ut ...

  10. 当文字过长时裁剪(显示省略号或只裁剪 用CSS方法,不用程序)

    原文发布时间为:2009-09-16 -- 来源于本人的百度文章 [由搬家工具导入] CSS中ellipsis()应用【转】 CSS手册中text-overflow属性的定义:   语法: text- ...