前言

確定畫面都可以正確呈現與轉換後，我們來正式實作登入的畫面。

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)
}

結語

可喜可賀，明天會繼續把登入畫面的輸入欄位加上～
過1/3，繼續加油!

參考資料

1. iOS Fundamentals: Frames, Bounds, and CGGeometry

若上述內容有誤或可以改進的部分，歡迎留言以及提出任何指教～
謝謝 १|˚–˚|५