Swift隨手紀錄Day22-LoginController UI修改

防止偷懶Day22

今天時間不太夠，就來修正一下UI好了

決定在LoginController實作一下用SegmentedControl的選擇來動態調整UI的功能

用來區分使用者是登入還是註冊

如果是註冊就多一個UITextField來讓使用者輸入名稱

之後讓主畫面可以顯示目前登入的使用者名稱

如果是登入就只需要email

先把要移動的部分處理一下

首先來看一下效果

接下來就進入LoginController.swift修改一下

import
import

class
LoginController
AddMemberController
    
    let
UISegmentedControl
=
        let
=
UISegmentedControl
"Login"
"Register"
        sc.selectedSegmentIndex =
0
        sc.translatesAutoresizingMaskIntoConstraints =
false
        sc.addTarget(self
#selector
        return
    }()
    
    let
UITextField
=
        let
=
UITextField
        text.placeholder =
"email"
        text.translatesAutoresizingMaskIntoConstraints =
false
        text.layer.borderColor =
UIColor
        text.layer.borderWidth =
1
        return
    }()
    
    let
UITextField
=
        let
=
UITextField
        text.placeholder =
"password"
        text.translatesAutoresizingMaskIntoConstraints =
false
        text.isSecureTextEntry =
true
        text.layer.borderColor =
UIColor
        text.layer.borderWidth =
1
        return
    }()
    
    lazy
var
UIButton
=
        let
=
UIButton
        button.translatesAutoresizingMaskIntoConstraints =
false
        button.setTitle("Login"
        button.backgroundColor =
        button.addTarget(self
#selector
        return
    }()
    
    func
handleRegister
        guard
let
=
let
=
else
            print
"Input Error"
            return
        }
        
        FIRAuth
?
FIRUser
in
            
            if
!=
nil
                print
!
                return
            }
            
            let
=
FIRDatabase
"https://hbcrecord-5a3d4.firebaseio.com/"
            let
=
"User"
            let
=
"email"
            userReference.updateChildValues(accountValue, withCompletionBlock: { (err, ref) in
                
                if
!=
nil
                    print
!
                    return
                }
                
                print
"New user saved success"
                
            })
            
        })
    }
    
    func
handleChangeButtonTitle
        if
==
0
            loginButton.setTitle("Login"
            profileImageTopAnchor?
=
64
            emailTopAnchor?
=
8
        } else
            loginButton.setTitle("Register"
            profileImageTopAnchor?
=
32
            emailTopAnchor?
=
48
        }
    }
    
    var
NSLayoutConstraint
    var
NSLayoutConstraint
    
    override
func
viewDidLoad
        super
        
        profileImage.removeAllConstraints()
        positionSegmentedControl.removeFromSuperview()
        nameText.removeFromSuperview()
        registerButton.removeFromSuperview()
        
        view.addSubview(loginSegmentedControl)
        view.addSubview(emailText)
        view.addSubview(passwordText)
        view.addSubview(loginButton)
        
        profileImageTopAnchor =
64
        profileImageTopAnchor?
=
true
        profileImage.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive =
true
        profileImage.heightAnchor.constraint(equalToConstant: 110
=
true
        profileImage.widthAnchor.constraint(equalToConstant: 110
=
true
        
        loginSegmentedControl.topAnchor.constraint(equalTo: profileImage.bottomAnchor, constant: 8
=
true
        loginSegmentedControl.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 22
=
true
        loginSegmentedControl.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -
22
=
true
        loginSegmentedControl.heightAnchor.constraint(equalToConstant: 24
=
true
        
        emailTopAnchor =
8
        emailTopAnchor?
=
true
        emailText.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 22
=
true
        emailText.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -
22
=
true
        emailText.heightAnchor.constraint(equalToConstant: 32
=
true
        
        passwordText.topAnchor.constraint(equalTo: emailText.bottomAnchor, constant: 8
=
true
        passwordText.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 22
=
true
        passwordText.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -
22
=
true
        passwordText.heightAnchor.constraint(equalToConstant: 32
=
true
        
        loginButton.topAnchor.constraint(equalTo: passwordText.bottomAnchor, constant: 8
=
true
        loginButton.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 22
=
true
        loginButton.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -
22
=
true
        loginButton.heightAnchor.constraint(equalToConstant: 50
=
true
        
    }

}

extension
UIView
    func
removeAllConstraints
        self
self
        for
in
self
            view.removeAllConstraints()
        }
    }
}

先新增一個function來移除原本的constrains

然後定義兩個變數profileImageTopAnchor、emailTopAnchor之後用來調整位置

接下來在viewDidLoad裡面利用這兩個變數來調整anchor的定義

最後在handleChangeButtonTitle這個function內調整這兩個anchor的數值以達到移動UI的效果

下篇繼續把調整完成～