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 【 Remove Duplicates from Sorted Array 】python 实现

    题目: Given a sorted array, remove the duplicates in place such that each element appear only once and ...

  2. 启用hyper后无法打开vmware

    十万火急,想办法先让虚拟机能够打开,毕竟经常用. 网上看了无数教程都是让在控制面板中关闭hyper-v,然而并没有用. 找了好久说是不能那样关闭,得用指令.管理员运行powershell,输入下列指令 ...

  3. Leetcode 593.有效正方形

    有效正方形 给定二维空间中四点的坐标,返回四点是否可以构造一个正方形. 一个点的坐标(x,y)由一个有两个整数的整数数组表示. 示例: 输入: p1 = [0,0], p2 = [1,1], p3 = ...

  4. Flask-WebSocket案例

    实验1:实现初始的通信 客户端:用浏览器向服务端发送信息 服务端:首先接收浏览器发来的信息,并作出相应应答 第一步:需要导入模块: from flask import Flask,request fr ...

  5. 【转载】zookeeper使用和原理探究(一)

    最近开始看到一些公司在使用zookeeper,本身对此了解的很少,这里看到一篇非常好的文章,因此转载 原贴地址:http://www.blogjava.net/BucketLi/archive/201 ...

  6. java.net.BindException: Permission denied

    端口号报错: 解决办法:把端口号改为1000以上的,比如8080

  7. 【Luogu】P4219大融合(LCT)

    题目链接 LCTrotate打错尬死 容易发现本题就是问两边子树大小乘积,于是开个数组动态维护LCT每个节点虚子树上有多少点,在Access和Link的时候更新即可. #include<cstd ...

  8. Codeforces Round #402 (Div. 2) D. String Game(二分答案水题)

    D. String Game time limit per test 2 seconds memory limit per test 512 megabytes input standard inpu ...

  9. BZOJ3166 [Heoi2013]Alo 【可持久化trie树 + 二分 + ST表】

    题目 Welcome to ALO ( Arithmetic and Logistic Online).这是一个VR MMORPG , 如名字所见,到处充满了数学的谜题. 现在你拥有n颗宝石,每颗宝石 ...

  10. 【CCF】URL映射 模拟

    #include<iostream> #include<cstdio> #include<cstring> #include<string> #incl ...