防止偷懶Day22

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

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

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

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

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

如果是登入就只需要email

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

首先來看一下效果

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
import UIKit
import Firebase

class LoginController: AddMemberController {

let loginSegmentedControl: UISegmentedControl = {
let sc = UISegmentedControl(items: ["Login", "Register"])
sc.selectedSegmentIndex = 0
sc.translatesAutoresizingMaskIntoConstraints = false
sc.addTarget(self, action: #selector(handleChangeButtonTitle), for: .valueChanged)
return sc
}()

let emailText: UITextField = {
let text = UITextField()
text.placeholder = "email"
text.translatesAutoresizingMaskIntoConstraints = false
text.layer.borderColor = UIColor.cyan.cgColor
text.layer.borderWidth = 1
return text
}()

let passwordText: UITextField = {
let text = UITextField()
text.placeholder = "password"
text.translatesAutoresizingMaskIntoConstraints = false
text.isSecureTextEntry = true
text.layer.borderColor = UIColor.cyan.cgColor
text.layer.borderWidth = 1
return text
}()

lazy var loginButton: UIButton = {
let button = UIButton()
button.translatesAutoresizingMaskIntoConstraints = false
button.setTitle("Login", for: .normal)
button.backgroundColor = .cyan
button.addTarget(self, action: #selector(handleRegister), for: .touchUpInside)
return button
}()

func handleRegister() {
guard let email = emailText.text, let password = passwordText.text else {
print("Input Error")
return
}

FIRAuth.auth()?.createUser(withEmail: email, password: password, completion: { (user: FIRUser?, error) in

if error != nil {
print(error!)
return
}

let ref = FIRDatabase.database().reference(fromURL: "https://hbcrecord-5a3d4.firebaseio.com/")
let userReference = ref.child("User")
let accountValue = ["email": email]
userReference.updateChildValues(accountValue, withCompletionBlock: { (err, ref) in

if err != nil {
print(err!)
return
}

print("New user saved success")

})

})
}

func handleChangeButtonTitle() {
if loginSegmentedControl.selectedSegmentIndex == 0 {
loginButton.setTitle("Login", for: .normal)
profileImageTopAnchor?.constant = 64
emailTopAnchor?.constant = 8
} else {
loginButton.setTitle("Register", for: .normal)
profileImageTopAnchor?.constant = 32
emailTopAnchor?.constant = 48
}
}

var profileImageTopAnchor: NSLayoutConstraint?
var emailTopAnchor: NSLayoutConstraint?

override func viewDidLoad() {
super.viewDidLoad()

profileImage.removeAllConstraints()
positionSegmentedControl.removeFromSuperview()
nameText.removeFromSuperview()
registerButton.removeFromSuperview()

view.addSubview(loginSegmentedControl)
view.addSubview(emailText)
view.addSubview(passwordText)
view.addSubview(loginButton)

profileImageTopAnchor = profileImage.topAnchor.constraint(equalTo: view.topAnchor, constant: 64)
profileImageTopAnchor?.isActive = true
profileImage.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
profileImage.heightAnchor.constraint(equalToConstant: 110).isActive = true
profileImage.widthAnchor.constraint(equalToConstant: 110).isActive = true

loginSegmentedControl.topAnchor.constraint(equalTo: profileImage.bottomAnchor, constant: 8).isActive = true
loginSegmentedControl.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 22).isActive = true
loginSegmentedControl.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -22).isActive = true
loginSegmentedControl.heightAnchor.constraint(equalToConstant: 24).isActive = true

emailTopAnchor = emailText.topAnchor.constraint(equalTo: loginSegmentedControl.bottomAnchor, constant: 8)
emailTopAnchor?.isActive = true
emailText.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 22).isActive = true
emailText.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -22).isActive = true
emailText.heightAnchor.constraint(equalToConstant: 32).isActive = true

passwordText.topAnchor.constraint(equalTo: emailText.bottomAnchor, constant: 8).isActive = true
passwordText.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 22).isActive = true
passwordText.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -22).isActive = true
passwordText.heightAnchor.constraint(equalToConstant: 32).isActive = true

loginButton.topAnchor.constraint(equalTo: passwordText.bottomAnchor, constant: 8).isActive = true
loginButton.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 22).isActive = true
loginButton.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -22).isActive = true
loginButton.heightAnchor.constraint(equalToConstant: 50).isActive = true

}

}

extension UIView {
func removeAllConstraints() {
self.removeConstraints(self.constraints)
for view in self.subviews {
view.removeAllConstraints()
}
}
}

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

然後定義兩個變數profileImageTopAnchoremailTopAnchor之後用來調整位置

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

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

下篇繼續把調整完成~

Support

Comments

2017-07-13

⬆︎TOP