【我们都爱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的值变化时密码文本框输入的文字会变成星号,同时密码标签也会修改,现在让我们运行一下:


当我点击第一个按钮:



目录
相关文章
|
12月前
|
编解码 Android开发 iOS开发
IOS使用AutoLayout让UIScrollView自动计算ContentSize
IOS使用AutoLayout让UIScrollView自动计算ContentSize
140 0
|
iOS开发
iOS界面布局之四——使用第三方库Masonry进行autolayout布局(二)
iOS界面布局之四——使用第三方库Masonry进行autolayout布局
177 0
iOS界面布局之四——使用第三方库Masonry进行autolayout布局(二)
|
iOS开发 开发者
AutoResizing and AutoLayout(IOS屏幕适配)
AutoResizing and AutoLayout(IOS屏幕适配)
89 0
AutoResizing and AutoLayout(IOS屏幕适配)
|
iOS开发
iOS界面布局之四——使用第三方库Masonry进行autolayout布局(一)
iOS界面布局之四——使用第三方库Masonry进行autolayout布局
152 0
iOS界面布局之四——使用第三方库Masonry进行autolayout布局(一)
|
iOS开发
iOS界面布局之三——纯代码的autoLayout及布局动画(二)
iOS界面布局之三——纯代码的autoLayout及布局动画(一)
225 0
iOS界面布局之三——纯代码的autoLayout及布局动画(二)
|
iOS开发
iOS界面布局之三——纯代码的autoLayout及布局动画(一)
iOS界面布局之三——纯代码的autoLayout及布局动画
333 0
iOS界面布局之三——纯代码的autoLayout及布局动画(一)
|
iOS开发 容器
iOS界面布局之二——初识autolayout布局模型(二)
iOS界面布局之二——初识autolayout布局模型
148 0
iOS界面布局之二——初识autolayout布局模型(二)
|
30天前
|
API 数据安全/隐私保护 iOS开发
利用uni-app 开发的iOS app 发布到App Store全流程
利用uni-app 开发的iOS app 发布到App Store全流程
84 3
|
3月前
|
存储 iOS开发
iOS 开发,如何进行应用的本地化(Localization)?
iOS 开发,如何进行应用的本地化(Localization)?
122 2
|
3月前
|
存储 数据建模 数据库
IOS开发数据存储:什么是 UserDefaults?有哪些替代方案?
IOS开发数据存储:什么是 UserDefaults?有哪些替代方案?
39 0