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. IOS开发学习笔记023-UIToolBar的使用

    这里使用代码实现 大概过程: 1.创建工具条 2.创建插入条 3.添加头像.标签.删除按钮 4.点击头像获取标签信息 做一个简单的联系人列表,可以添加删除联系人,现在还没有添加头像和文字,接下来慢慢添 ...

  2. log4j2异步日志配置及官方文档的问题澄清

    配置及demo 方法一全部打开 加启动参数 -DLog4jContextSelector=org.apache.logging.log4j.core.async.AsyncLoggerContextS ...

  3. Python学习-day12 Mysql

    MYSQ数据库的安装使用 Linux/UNIX上安装Mysql Linux平台上推荐使用RPM包来安装Mysql,MySQL AB提供了以下RPM包的下载地址: MySQL - MySQL服务器.你需 ...

  4. 实用拜占庭容错算法PBFT

    实用拜占庭容错算法PBFT 实用拜占庭容错算法PBFT 96 乔延宏 2017.06.19 22:58* 字数 1699 阅读 4972评论 0喜欢 11 分布式架构遭遇的问题 分布式架构会遭遇到以下 ...

  5. BZOJ1797 [Ahoi2009]Mincut 最小割 【最小割唯一性判定】

    题目 A,B两个国家正在交战,其中A国的物资运输网中有N个中转站,M条单向道路.设其中第i (1≤i≤M)条道路连接了vi,ui两个中转站,那么中转站vi可以通过该道路到达ui中转站,如果切断这条道路 ...

  6. react当中子组件改变父组件的状态

    子组件直接改变父组件传入的props值是不被允许的, 当需要在子组件当中改变父组件的某一个状态, 父组件传入一个改变状态的函数,然后在子组件当中调用函数即可

  7. Nim积

    假如把Nim游戏的取胜规则改为谁取走最后一个石子谁输的话 先手必胜当且仅当: 1.所有堆的石子数都为1且游戏的SG值为0 2.有些堆的石子数大于1且游戏的SG值不为0

  8. CODEVS【3372】选学霸

    题目描述 Description 老师想从N名学生中选M人当学霸,但有K对人实力相当,如果实力相当的人中,一部分被选上,另一部分没有,同学们就会抗议.所以老师想请你帮他求出他该选多少学霸,才能既不让同 ...

  9. js3:数据类型,数组,String各个属性,以及字符串表达式用eval计算

    原文发布时间为:2008-11-08 -- 来源于本人的百度文章 [由搬家工具导入] <html> <head> <title>js</title> & ...

  10. 【SQL Server】修改DB逻辑文件名称

    步骤一:查询当前DB逻辑文件名称(主逻辑文件.日志逻辑文件) ; 步骤二:步骤二改变(还原)DB逻辑文件名称 RESTORE DATABASE AW831 FROM DISK='D:\AW831.DA ...