Swift — UIKit 之（3）—— 通过实现一个登陆界面来讲解 MVC 架构

1. MVC 架构简介

参考资料：https://baike.baidu.com/item/MVC

MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。

• Model（模型）是应用程序中用于处理应用程序数据逻辑的部分。

  • 通常模型对象负责在数据库中存取数据。

• View（视图）是应用程序中处理数据显示的部分。

  • 通常视图是依据模型数据创建的。

• Controller（控制器）是应用程序中处理用户交互的部分。

  • 通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。

△ 本篇主要部分是 V 和 C

2. 本篇内容

本篇主要总结一下 Swift 中如何用代码来控制界面的交互和布局等等。有三种模式：

① 纯 swift 代码文件

② swift 代码文件 + storyboard

③ swift 代码文件 + XIB 文件

3. 设计登陆主界面

[0] 创建一个 Single View App

[1] 创建一个新的 storyboard

[2] 添加 ViewController

[3] 切换该Storyboard作为起始界面

• 点 Info.plist 文件

[4] 选择初始化的 ViewController

因为一个storyboard可能有多个ViewController，所以我们需要指定哪一个先初始化。

[5] 页面设计

[6] 为该 V 添加对应的 C

3. 设计登录弹出窗口(①纯代码控制)

[0] 新建文件

[1] 代码

• 设置Storyboard ID

//
//  UserLogin.swift
//  Review_05
//
//  Created by Hedon - on 2020/5/6.
//  Copyright © 2020 Hedon -. All rights reserved.
//

//import Foundation
import UIKit


//定义一个类，继承UIViewController
class UserLoginViewController:UIViewController{
    
    var txtUser:UITextField!   //用户名输入框
    var txtPwd:UITextField!    //密码输入框
    var btnLogin:UIButton!     //确认登录按钮
    
    //界面登陆时加载的函数
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //获取屏幕尺寸
        let mainSize = UIScreen.main.bounds.size
        
        //登录框背景
        let vLogin = UIView(frame: CGRect(x: 30, y: 200, width: mainSize.width-30, height: 250))
        vLogin.layer.borderWidth = 0.5  //边框宽度
        vLogin.layer.borderColor = UIColor.lightGray.cgColor   //边框颜色
        vLogin.backgroundColor = UIColor.white  //背景颜色
        self.view.addSubview(vLogin)   //把登录框界面添加到当前界面
        
        
        //用户名输入框
        txtUser = UITextField(frame: CGRect(x: 30, y: 30, width: vLogin.frame.width-60, height: 44))
        txtUser.layer.cornerRadius = 5          //边角弧度
        txtUser.layer.borderColor = UIColor.lightGray.cgColor
        txtUser.layer.borderWidth = 0.5
        txtUser.autocapitalizationType = .none  //是否自动大写，这里否
        txtUser.leftView = UIView(frame: CGRect(x: 0, y: 0, width: 44, height: 44)) //用户名输入框左边的视图（待会要添加一个图标）
        txtUser.leftViewMode = UITextField.ViewMode.always   //图标是否要一直显示
        
        //用户名输入框左侧图标
        let imgUser = UIImageView(frame: CGRect(x: 11, y: 11, width: 22, height: 22))
        imgUser.image = UIImage(named: "iconfont-user")  //设置图片
        txtUser.leftView!.addSubview(imgUser)   //把图标添加到用户名输入框的左侧
        vLogin.addSubview(txtUser)   //把用户名输入框添加到弹出窗口的界面中
        
        
        
        //密码输入框
        txtPwd = UITextField(frame: CGRect(x: 30, y: 90, width: vLogin.frame.size.width-60, height: 44))
        txtPwd.layer.cornerRadius = 5
        txtPwd.layer.borderColor = UIColor.lightGray.cgColor
        txtPwd.layer.borderWidth = 0.5
        txtPwd.isSecureTextEntry = true   //输入的时候不显示具体字符，用 * 代替
        txtPwd.leftView = UIView(frame: CGRect(x: 0, y: 0, width: 44, height: 44))
        txtPwd.leftViewMode = UITextField.ViewMode.always
        
        //密码输入框左侧图标
        let imgPwd = UIImageView(frame: CGRect(x: 11, y: 11, width: 22, height: 22))
        imgPwd.image = UIImage(named: "iconfont-password")
        txtPwd.leftView!.addSubview(imgPwd)
        vLogin.addSubview(txtPwd)
        
        
        //登录确认按钮
        btnLogin = UIButton(frame: CGRect(x: mainSize.width/2-120/2, y: 150, width: 120, height: 50))
        btnLogin.setTitle("登录", for: .normal)//按钮名称
        btnLogin.backgroundColor = UIColor.green  //按钮背景颜色
        vLogin.addSubview(btnLogin)
        
        
        //当按钮点击时就触发 loginEvent 函数执行
        btnLogin.addTarget(self, action: #selector(loginEvent), for: .touchUpInside)
        
    }
    
    @objc func loginEvent(){
        let usercode = txtUser.text!   //获取用户名
        let password = txtPwd.text!    //获取密码
        txtUser.resignFirstResponder()  //通知此对象，要求其在其窗口中放弃其作为第一响应者的状态。
        txtPwd.resignFirstResponder()
        
        //如果用户名和密码都正确的话
        if usercode == "hedon" && password=="123"{
            //取得id=“Main”的Storyboard的实例
            let mainBoard:UIStoryboard! = UIStoryboard(name: "Main", bundle: nil)
            //取得identifier = “vcMain”的ViewController
            //这里需要我们自己去 Main.storyboard 里面设置
            let VCMain = mainBoard!.instantiateViewController(withIdentifier: "vcMain");
            
            UIApplication.shared.windows[0].rootViewController = VCMain
        }
        else{  //登录不成功
            //定义一个警告窗口
            let p = UIAlertController(title: "登录失败", message: "用户名或密码错误", preferredStyle: .alert)
            
            //点击确定后，自动将密码清零
            p.addAction(UIAlertAction(title: "确定", style: .default, handler: {(act:UIAlertAction)in self.txtPwd.text=""}))
            
            //呈现出错误窗口(模态)
            present(p,animated: false,completion: nil)
        }
    }
    
}

[2] 切换到LoginViewController绑定Btn点击就弹出登录窗口

//登录按钮
@IBAction func LoginPressed(_ sender: UIButton) {
  //实例化登录窗口对象
  let loginVC = UserLoginViewController()
  present(loginVC, animated: true, completion: nil)
}

[3] 效果展示

• 登录窗口

• 用户名或密码错误

• 登录成功

登录成功就跳转到 Main.storyboard 的 ViewController 了

[4] 退出登录到登录界面

• 给 Login.storyboard 添加 identifier id

• 编写返回代码

4. 设计注册界面(② swift + storyboard)

[0] 新建文件

[1] 在 Login.storyboard 添加一个 ViewController 作为注册页面

[2] 设置转场

[3] 绑定返回主界面的事件

[4] 效果展示

5. 设置第三方登录界面(③ Swift + XIB)

[0] 新建文件

[1] 代码

//
//  User3rdViewController.swift
//  Review_05
//
//  Created by Hedon - on 2020/5/6.
//  Copyright © 2020 Hedon -. All rights reserved.
//

import UIKit

class User3rdViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

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


    @IBAction func login3rd(_ sender: UIButton) {
        //这里的preferredStyle前面我们也见过
        //.alert是警告窗口，弹出出现在中间
        //.actionSheet是提供选项的窗口，会弹出在屏幕底部
        let p = UIAlertController(title: "第三方登录", message: nil, preferredStyle: .actionSheet)
        //下面添加三个选项，*********注意比较 3个 style的不同**********
        p.addAction(UIAlertAction(title: "QQ", style: .default, handler: nil))
        p.addAction(UIAlertAction(title: "信息门户", style: .destructive, handler: nil))
        p.addAction(UIAlertAction(title: "取消", style: .cancel, handler: nil))
        //以模态方式呈现出第三方登录选项窗口
        self.present(p, animated: false, completion: nil)
    }
    
    
    @IBAction func close(_ sender: UIButton) {
        //点击关闭的时候关闭自身（第三方登录的XIB中的ViewController）
        self.dismiss(animated: false, completion: nil)
    }

}

[2] 切换到LoginViewController绑定Btn点击就弹出第三方登录窗口

//第三方登录按钮
@IBAction func Login3rdPressed(_ sender: UIButton) {
  //道理同上
  let login3rdVC = User3rdViewController()
  present(login3rdVC, animated: true, completion: nil)
}

[3] 效果展示

6. 注意点：两种返回的不同

上述例子中有涉及到两种返回

• ① 弹出模态窗口（如注册界面），然后返回
• ② 登录成功到登录成功界面，然后返回到登录主界面

这两种返回是不同的：

① 是在原来的 ViewController 上面 “盖上” 一个视图，原来那个还在”底下“。

② 是重新指定显示的视图，原来那个不在”底下“，被关闭了。

使用方法总结：

[1] 模块窗口

• 弹出：present

  

• 关闭：dismiss

  

[2] 重新指定显示的ViewController

一句话：怎么来的，怎么回去

• 跳转到登录成功界面

  

• 退出登录，返回登录主界面