Day#12 登入画面(1)

前言

确定画面都可以正确呈现与转换後，我们来正式实作登入的画面。

Nav

LoginViewController

我们新增一个nav，title为登入，且把背景色设成白色。
并在navbar新增右上方的按钮为注册，当点下的时候会套用方法didTapRegister。

diidTapRegitser会新增一个viewcontroller，并放到receiver stack中。

override func viewDidLoad() {
    super.viewDidLoad()
    title = "Sign In"
    view.backgroundColor = .white

    navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Sign Up",
                                                        style: .done,
                                                        target: self,
                                                        action: #selector(didTapRegister))
}

// push the register controller to screen
@objc private func didTapRegister(){
    let vc = RegisterViewController()
    vc.title = "Create Account"
    navigationController?.pushViewController(vc, animated: true)
}

Logo

我们要放上登入的logo，因此在asset中右键新增一个image set，命名为logo并将我们想要的图片放上去。

接着在同一个view controller中加上刚刚的图片。使用UIImageView可以呈现一个或多张image於画面上。

LoginViewController

private let imageView: UIImageView = {
    let imageView = UIImageView()
    imageView.image = UIImage(named: "Logo")
    imageView.contentMode = .scaleAspectFit
    return imageView
}()

接着在viewDidLoad加上

view.addSubview(imageView)

确保imageView有被加到画面上!

最後一个小细节，是关於图片尺寸计算的方法，但是在此计算有点麻烦，在程序管理上也不是那麽正确(?)，因此我们可以写一个extension，把所有计算的规则放在extension中。

因此可以在resource中新增一个swift档案，就命名为Extensions。

Extensions

import Foundation
import UIKit

extension UIView {
    public var width: CGFloat {
        return self.frame.size.width
    }

    public var height: CGFloat {
        return self.frame.size.height
    }

    public var top: CGFloat {
        return self.frame.origin.y
    }

    public var bottom: CGFloat {
        return self.frame.size.height + self.frame.origin.y
    }

    public var left: CGFloat {
        return self.frame.origin.x
    }

    public var right: CGFloat {
        return self.frame.size.width + self.frame.origin.x
    }
}

其中的长宽就是画面的长宽。而frame.origin是上一层(父层)的相对座标。

LoginViewController

最後我们回到login画面，可以使用刚刚的计算方式去加上图片。

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    let size = view.width/3
    imageView.frame = CGRect(x: (view.width-size)/2,
                             y: 20,
                             width: size,
                             height: size)
}