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。