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. loj2035 「SDOI2016」征途

    学了斜率优化这题就能一气呵成地做出来啦qwqqwq #include <iostream> #include <cstdio> using namespace std; typ ...

  2. 安装的 Python 版本太多互相干扰?pyenv 建议了解一下。

    写在之前 我们都知道现在的 Python 有 Python2 和 Python3,但是由于各种乱七八糟的原因导致这俩哥们要长期共存,荣辱与共,尴尬的是这哥俩的差异还比较大,在很多时候我们可能要同时用到 ...

  3. Detect Vertical&Horizontal Segments By OpenCV

    Detect Vertical&Horizontal Segments By OpenCV,and Save the data to csv. Steps: Using adaptiveThr ...

  4. JS判断是否是IE浏览器的几种方式

    1.得到浏览器的信息,返回由客户机发送服务器的 user-agent 头部的值. if(navigator.userAgent.indexOf("MSIE 8.0")>0){ ...

  5. POJ 2376:Cleaning Shifts(贪心)

    题目大意:有n个奶牛,他们负责在长为t个时间点的时间内值班,每个时间点至少有一个在值班,每个奶牛有一段空闲时间可以值班,求满足要求所需最少奶牛数量,无法满足则输出-1. 分析: 将奶牛空闲时间段看成线 ...

  6. 飘雪圣域(icekingdom)

    飘雪圣域(icekingdom) 题目描述 IcePrincess_1968 和 IcePrince_1968 长大了,他们开始协助国王 IceKing_1968 管理国内事物. IcePrinces ...

  7. python网络

    try: import urllib.request as urllib2 except ImportError: import urllib2 response = urllib2.urlopen( ...

  8. HTML 改变文字方向

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. pat 甲级 L3-002. 堆栈

    L3-002. 堆栈 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 大家都知道“堆栈”是一种“先进后出”的线性结构,基本操作有 ...

  10. POJ1927 Area in Triangle

      Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 1458   Accepted: 759 Description Give ...