【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记26 AutoLayout自动布局1

简介: 上一话中我们讲解了viewController的生命周期。这一话来讲解一下自动布局,之前的Demo中都有涉及自动布局的知识,今天来系统讲解。

上一话中我们讲解了viewController的生命周期。这一话来讲解一下自动布局,之前的Demo中都有涉及自动布局的知识,今天来系统讲解。


之前你接触过面板上的蓝线来对齐控件,重置位置来适应系统推荐,在大纲视图中消去警告,利用尺寸检查器可以看到详细的约束等等

自动布局需要大量的经验,想要掌握好它,你必须去多练多想。

自动布局也可以用代码实现。

那么当你旋转的时候该怎么办呢?


旋转之后几何位置可能会有较大变动,这时候自动布局是不够的。拿我们之前的计算器Demo来举例,计算器有20个键,当我们横屏的时候希望有五列四行,当竖屏的时候希望有五行四列,使用自动布局没法实现这个变动。这种情况并不仅限旋转,我们使用分屏控制器的时候同样会遇到这种问题,解决这个问题的方式是使用Size Classes(尺寸等级),并且对所有当前的空间来说,当前的尺寸等级可以是compact(紧凑的),也可以是regular(普通的)。

我们之前提到过ip6 plus是一个很有意思的设备。


在竖屏模式下,它的宽是紧凑的,它的高是普通的。而当横屏的时候高是紧凑的,宽是普通的。

其他除了ip6 lus的iphone竖屏时宽紧凑高普通,但是在横屏的时候它们的宽和高都是紧凑的。

ipad在全方向上作为普通处理。

例如我们的计算器在不同的尺寸等级组合下理想的显示效果:


我们还有其他的尺寸等级Any


当垂直方向是紧凑的时候,我们不关心横向的尺寸等级,这种情况我们把按键变成四行的,其他情况通通是五行,这样简化了我们的工作。接下来我们将做一个Demo。

新建一个工程命名为AutoLayout。在storyboard中新建两个文本框和两个标签:

文本框右对齐,并且设定两个文本框间距固定:


然后设置两个标签左对齐,长度相同,并且与对应的文本框baseline:


然后添加标签到文本框的水平空间约束。之后我们可以进入尺寸检查器中设置具体的sizeclass。

尺寸检查器中的数字被称作magic number(魔法数):




这个数字可以编辑,比如这里展示的标签到文本框的距离,这个392是系统根据蓝线生成的,这个距离不应该是固定的所以我们要修改这个数据:


修改之后的效果:


然后把上面的文本框距顶部距离调整为standard,把baseline的距离调整为0。下面文本框做同样的处理,现在的效果:


下面来展示一些xcode的小技巧,点开联合视图,在右侧的菜单中选择Preview:


然后你将看到这样一个页面:


你可以通过点击+,在不运行工程的情况下查看不同尺寸下的页面展示,非常的好用。右边的English也是可选项,你可以选择标签为字体重复一次,大家可以试一下。

然后我们在下面添加两个按钮,按钮并不靠边,所以它们的左侧没有蓝线可以对齐,怎么保证这两个按钮在不同尺寸的屏幕中能整齐地排列呢,答案是在左右两侧各添加一个空的view,为了方便观察我们把view的颜色设置为灰色。

我们让两个view贴住左右蓝线,然后让两个按钮分别对view做如下约束:


两个view之间设置等宽


两个按钮间作如下约束:


另外需要有一个按钮设置到上方文本框的垂直距离。


然后左右view分别设置到两边的距离


全部设置好之后update一下你可以看到:


但是这并不是我想要的确切位置,我们还要消除魔法数,把左右两侧view和按钮之间的距离设为标准值、顶部和底部距离设为0,通常我们都会选标准值,当标准值不可选时我们一般选0.


现在来看一下两个按钮之间的约束:


这个魔法数代表两个按钮间的间距,我们可以在storyboard中之间点击两个按钮间的蓝线就能修改这个魔法数,这里修改间距为50,因为我们做的并不是一个标准化的东西。

每当我们要做一个非标准化的东西,我们都要问问自己是不是的确需要这么做,显然在这里这是必须的。在预览里看一下:


看起来不错,两个辅助视图的宽度是相同的。现在我们把辅助视图的颜色去掉。现在让我们继续,当我点击Change Security按钮的时候我希望能修改标签的显示,并且当我输入密码的时候变成星号。

我们需要写一些代码:

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var loginField: UITextField!
   
    @IBOutlet weak var passwordField: UITextField!

    @IBOutlet weak var passwordLabel: UILabel!
    override func viewDidLoad() {
        super.viewDidLoad()
        
    }
    @IBAction func toggleSecurity(sender: UIButton) {
        secure = !secure
    }
    var secure = false { didSet{ updateUI()}}
    
    private func updateUI(){
    passwordField.secureTextEntry = secure
    passwordLabel.text = secure ? "Secure Password":"Password"
    }
}

我们设置了一个标识secure,它有一个属性观察器,我们已经很熟练了,当secure的值变化时密码文本框输入的文字会变成星号,同时密码标签也会修改,现在让我们运行一下:


当我点击第一个按钮:



目录
相关文章
|
前端开发 API
【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记4 MVC enum Tuple Dictionary
 回顾一下我们上一话中的代码: @IBAction func operate(sender: UIButton) { let operation = sender.
778 0
|
前端开发 iOS开发
【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记3 Xcode、Auto Layout及MVC
   继续上一话中的计算器Demo,上一话讲到类必须被初始化,类中的属性也必须被初始化,所以你不能只声明而不给它一个处置,那么问题来了,我们从storyboard中拖拽的@IBOutlet为什么只有声明而不需要初始化呢,这是因为它的类型依旧是一个optional,在你初始化之前已经被赋值为nil了,这也就是为什么你不需要再初始化它的原因。
858 0
|
Unix iOS开发
【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记1 IOS8概述
  首先感谢网易公开课和SwiftV课堂的朋友们辛苦翻译,这个系列是我学习斯坦福IOS8公开课的个人心得体会和笔记,希望能给大家带来启发。
1035 0
|
iOS开发
iOS开发之UIScrollView在Autolayout下的使用
一、使用的基本原则: 原则1:UIScrollView的size依赖于subviews 首先在StoryBoard中拖入一个UIScrollView,用Pin按钮,随意设置其布局。
791 0
|
iOS开发 容器
iOS8开发~UI布局(二)storyboard中autolayout和size class的使用详解
<div class="article_title" style="margin:5px 0px; font-size:20px; line-height:30px; font-family:'Microsoft YaHei'"> <span style="font-family:Arial; font-size:14px; line-height:26px">一、概要:前一篇初步的描述
1253 0
|
iOS开发 数据可视化
iOS8开发~UI布局(三)深入理解autolayout
<span style="font-family:Arial,Helvetica,sans-serif; font-size:12px">一、概要</span> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="font-size:12px">通
1536 0
|
1天前
|
Swift iOS开发 Kotlin
苹果iOS新手开发之Swift中实现类似Kotlin的作用域函数
Swift可通过扩展实现类似Kotlin作用域函数效果。如自定义`let`, `run`, `with`, `apply`, `also`,增强代码可读性和简洁性。虽无直接内置支持,但利用Swift特性可达成相似功能。
17 7