前言

昨天成功的放上imageView以及標題，今天來把其他的欄位放上～

登入欄位

LoginViewController

private let scrollView: UIScrollView = {
    let scrollView = UIScrollView()
    scrollView.clipsToBounds = true
    return scrollView
}()

在iOS中，滾動視圖（scroll view）是用來瀏覽無法在整個畫面容下的其他內容。滾動視圖有兩個主要用途：

• 提供使用者拖曳至他們想要呈現的內容區域
• 提供使用者使用手指縮放手勢來對所呈現的內容放大或縮小

也就是說，透過scroll view，我們可以完整的把登入/註冊頁面裝不下的所有欄位透過滑動的方式讓使用者看到。

viewDidLoad

view.addSubview(scrollView)

然後在viewDidLoad中加入新增的這個scrollview。
因為沒有特別需要縮放的設定，因此這樣就可以了！

接著回到LoginViewController class中新增我們需要的欄位如下

private let emailField: UITextField = {
    let field = UITextField()
    field.autocorrectionType = .no
    field.autocapitalizationType = .none
    field.returnKeyType = .continue
    field.layer.cornerRadius = 12
    field.layer.borderWidth = 1
    field.layer.borderColor = UIColor.lightGray.cgColor
    field.placeholder = "Email Address"
    field.leftView = UIView(frame: CGRect(x: 0, y:0, width: 5, height: 0)) // padding
    field.leftViewMode = .always
    field.backgroundColor = .white
    return field
}()

private let passwordField: UITextField = {
    let field = UITextField()
    field.autocorrectionType = .no
    field.autocapitalizationType = .none
    field.returnKeyType = .done
    field.layer.cornerRadius = 12
    field.layer.borderWidth = 1
    field.layer.borderColor = UIColor.lightGray.cgColor
    field.placeholder = "Password"
    field.leftView = UIView(frame: CGRect(x: 0, y:0, width: 5, height: 0)) // padding
    field.leftViewMode = .always
    field.backgroundColor = .white
    field.isSecureTextEntry = true
    return field
}()

大部分都是一些UI的設定。比較值得注意的是returnKeyType會影響鍵盤的return鍵顯示。因此，在這邊password是最後一欄，我們就把return key type設定為.done～

然後如前一個做法，我們把新增的欄位放入scroll view當中。

viewDidLoad

scrollView.addSubview(emailField)
scrollView.addSubview(passwordField)

viewDidLayoutSubviews

稍微調整一下UI的顯示

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    scrollView.frame = view.bounds
    let size = scrollView.width/3
    imageView.frame = CGRect(x: (scrollView.width-size)/2,
                             y: 20,
                             width: size,
                             height: size)

    emailField.frame = CGRect(x: 30,
                              y: imageView.bottom+10,
                             width: scrollView.width-60,
                             height: 50)
    passwordField.frame = CGRect(x: 30,
                              y: emailField.bottom+10,
                             width: scrollView.width-60,
                             height: 50)
}

按鈕

最後一個是提交的按鈕，我們先把UI做出來。
希望的情境是，在使用者按下按鈕後，可以把相對的資料傳送到後端資料庫做登入/註冊。

LoginViewController

private let loginButton: UIButton = {
   let button = UIButton()
    button.setTitle("Sign In", for: .normal)
    button.backgroundColor = .link
    button.setTitleColor(.white, for: .normal)
    button.layer.cornerRadius = 12
    button.layer.masksToBounds = true
    button.titleLabel?.font = .systemFont(ofSize: 20, weight: .bold)
    return button
}()

好了之後就加入scroll view的subview。

viewDidLoad

scrollView.addSubview(loginButton)

結語

今天的內容也是沒有很長，實在不知道按照這個節奏能不能把app寫完XDD
說實在的，我也不知道自己到底有沒有喜歡寫app。平常寫後端都沒有介面，因此能看到畫面是蠻好玩的啦，但有時也蠻瑣碎的，就有點討厭，哈哈。

參考資料

UIScrollView 滾動視圖初學者指南

若上述內容有誤或可以改進的部分，歡迎留言以及提出任何指教～
謝謝 o(〃＾▽＾〃)o