Swift — UIKit 之（4）—— TabBar|ToolBar|NavigationBar

0. 本篇主要内容

• TabBar
• ToolBar
• NavigationBar
• 4 种转场
  • show
  • show details
  • present modally
  • present as popover

1. TabBar

[0] 长啥样

[1] 建立项目

新建一个 Single View 的 Project，然后把原来 Main.storyboard 里面的 ViewController 删掉，然后再删掉其对应的控制类 ViewController.swift。

[2] 添加一个 TabBarController

[3] 添加一个 NavigationController

效果：（我这里已经改了图标）

2. ToolBar

这部分的操作基本都在 TabBar的第一个界面（樱桃????），这个部分我们要实现的功能是点击ToolBar中的每一个按钮，就显示其对应的界面，这里用颜色来区分。

[4] 在TabBar的第一个界面（樱桃）添加一个ToolBar

[5] 在ToolBar下面添加一个View并拉满

[6] 为该界面绑定一个控制类

[7] 绑定事件

这里把_ sender:Any 改成 _ sender: UIBarButtonItem

[8] 编写代码

• ToolBarPageViewController.swift

//
//  ToolBarPageViewController.swift
//  Review_)6
//
//  Created by Hedon - on 2020/5/8.
//  Copyright © 2020 Hedon -. All rights reserved.
//

import UIKit

class ToolBarPageViewController: UIViewController {

    @IBOutlet weak var contextView: UIView!
    
    //声明3个ViewController
    let vc1 = UIViewController()
    let vc2 = UIViewController()
    let vc3 = UIViewController()
    
    
    
    override func viewDidLoad() {
        super.viewDidLoad()

        //为3个ViewController设置背景颜色
        vc1.view.backgroundColor = UIColor.blue
        vc2.view.backgroundColor = UIColor.green
        vc3.view.backgroundColor = UIColor.red
        
        
        //逻辑上面加载了这三个VC，但是还不会呈现，需要我们按按钮才会呈现
        self.addChild(vc1)
        self.addChild(vc2)
        self.addChild(vc3)
        
        
        //默认是蓝色
        contextView.addSubview(vc1.view)
    }
    

    @IBAction func ItemPressed(_ sender: UIBarButtonItem) {        
        let text = sender.title
        switch text {
        case "蓝色":
            contextView.addSubview(vc1.view)
        case "绿色":
            contextView.addSubview(vc2.view)
        case "红色":
            contextView.addSubview(vc3.view)
        default:
            return
        }   
    }
}

---

---

下面我们将展示四种转场的使用方法和区别

• show

  • ① Show

    • 后面的 3.NavigationBar 演示的就是 Show 的效果，就是将一个VC盖在另外一个VC上面，然后可以通过Back来回退到原本的VC。

    

  • ② Show Details

    • 这个在 iPad上面比较常用，目前我还没学习到 iPad 部分的知识，这里先略过。
    

• present

  • ③ Present Modally

    • 以模态的方式展示，在取消该窗口的之前不能点击“底部”的内容

    

  • ④ Present As Popover

    • 其实就是在我们点击按钮的地方，弹出一个小窗口，当我们点击窗口的其他地方，这个小窗口就会自动消失。

      

---

---

3. NavigationBar

NavigationBar是一种层次结构（支持压栈，一个VC压着另外一个VC）。

前面的 TabBar 和 ToolBar 都是一种平展结构（每一个ViewController都是平级的）

• 层次结构
  

• 平展结构
  

[1] 删除原来的根视图

[2] 添加两个ViewController并设置根视图

[3] 加两个按钮并添加 Show 转场

可以看到两个变化，它会自动帮我们生成一个 “Back” 的按钮，所以 Show 其实是一种压栈的方式，我们可以一层一层叠加上去，然后再一层一层退回去。

[4] 效果

效果其实很简单，就是点击“Go”，就到达了橙色页面，然后在点击“Back”，就回到了绿色页面。

4. Present

剩下的两种转场方式 Present Modally 和 Present As Popover 我们在 TabBar 中间那个 “苹果” 来演示。

[1] 准备

[2] 建立 Present 连接

[3] 为转场到达的页面添加对应的控制类并绑定

因为我们要实现点击“关闭”按钮，来实现返回，所以需要为其添加对应的控制类来编写代码。

[4] 编写返回代码

本系列的上一篇文章就讲到，Present 要搭配 dismiss

@IBAction func closePressed(_ sender: UIButton) {
  self.dismiss(animated: true, completion: nil)
}

[5] Present Modally 效果

其实到这里，Present Modally 就可以做完了。

Present As Popover 我们还需要再操作操作才能搞定。

[6] 为上面添加的两个转场设置辨识ID

• 上面的叫 M
• 下面的叫 P

[7] 为上图左边这个 VC 添加响应的控制类并进行绑定

[8] 编写 Prepare 方法

[9] PresentPageViewController.swift 完整代码

//
//  PresentPageViewController.swift
//  Review_)6
//
//  Created by Hedon - on 2020/5/8.
//  Copyright © 2020 Hedon -. All rights reserved.
//

import UIKit

//为了实现Popover效果，需要添加UIPopoverPresentationControllerDelegate协议
class PresentPageViewController: UIViewController,UIPopoverPresentationControllerDelegate {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }
    

    
    // MARK: - Navigation

    //这个prepare方法是建立本文件的时候自动生成的方法，我们只需要解开注释就可以了
    // 具体来说：Prepare 方法是指在 Present 过渡到另外一个 View Controller 之前会执行的方法
    // segue：具体是哪一个过渡
    // sender：是哪一个对象发生的
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // Get the new view controller using segue.destination.
        // Pass the selected object to the new view controller.
        
        //通过上面两行注释我们就可以读出这个prepare的方法就是用来：
        // ① 使用segue.destination获取新的视图控制器。
        // ② 将选定的对象传递给新的视图控制器。
        
        //只有是 Present As Popover 的时候才执行，这个 P 是我们前面为两个 Present 设定的辨识ID
        if segue.identifier == "P"{
            let vc = segue.destination   //转场的目标，就是我们建立的那个带有“关闭”按钮的ViewController
            let button = sender as! UIButton   //我们知道sender是一个按钮
            vc.modalPresentationStyle = .popover        //设置popover效果
            vc.preferredContentSize = CGSize(width: 200, height: 200)       //设置显示出来的框大小
            
            if let pvc = vc.popoverPresentationController{
                pvc.sourceView = button     //表示弹出的小窗口指向按钮
                pvc.sourceRect = button.bounds   //这一行没有好像也没什么区别
                pvc.permittedArrowDirections = .up   //表示箭头的指向，是指向上的
                pvc.delegate = self         //处理与弹出框相关的消息的委托
            }
            
        }
    }
    
    
    //设置横屏状态不满屏
    func adaptivePresentationStyle(for controller: UIPresentationController, traitCollection: UITraitCollection) -> UIModalPresentationStyle {
        return .none
    }
    
    
    /**
        iPhone 下默认是 .overFullScreen（全面显示）
            需要返回 .none，否则没有弹窗效果，iPad 则不需要这一步
     */
    func adaptivePresentationStyle(for controller: UIPresentationController) -> UIModalPresentationStyle {
        return .none
    }
}

这也是我们学习中的一些笔记，所以如果有错误的地方，敬请斧正~