iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
自我挑戰組

來寫看看app好了! Swift探索之旅系列 第 13

Day#13 登入畫面(2)

前言

昨天成功的放上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


上一篇
Day#12 登入畫面(1)
下一篇
Day#14 註冊與按鈕
系列文
來寫看看app好了! Swift探索之旅30

尚未有邦友留言

立即登入留言