FlashChat (1)
VC 구성
많아야 VC가 2개였는데 이번에는 4개의 VC로 이루어져있다.
- 초기화면
- 가입화면
- 로그인화면
- 채팅화면
가입화면에서 textField로 보이는곳에 shadow가 있는것은 assets의 images를 사용하였다.
현재 warning이 나오고 있다.
VC가 서로 연결이 되어있지 안다보니 나타나는 경고이다.
그리고 여기에 있는 화살표가, 앱이 어디서 부터 시작될지를 나타내는 표시이다. (즉 앱을 실행하고 보여주는 초기화면이다)
Segue를 사용하여 VC간 연결하기
이건 뭐 워낙 쉽다보니 생략하겠다. Control 누른채로 드래그하자
우린 여태 VC와 VC를 이어 주었다.
하지만 VC의 특정 버튼을 통해 다른 VC로 이동하게 끔하려면 그 버튼을 Control 누른채로 드래그 해주면된다.
Register를 우클릭 해보면?
이렇게 action으로 RegisterVC로 이동이 되게끔 잘 연결이 되었다!.
실행을 해보면?
잘된다. 하지만 이렇게 나오는건 우리가 원하는게 아니다.
Root View Controller(앱 구동시 보이는 초기 VC) 에서 NavigationVC를 만들면 된다.
실행해보면?
우리가 흔히 아는 back 버튼이 위에 생겼다.
이게 보통 우리가 화면을 다른 화면으로 전환하는 흔한 방법이다.
Navigation Stack 이라고 한다.
Segue Identifier 명명하기
사진으로 대체 하겠다.
Animation 만들기
Animation을 만들기 위해선 Loop 가 필요하다
1
2
3
4
5
6
7
8
9
10
11
12
override func viewDidLoad() {
super.viewDidLoad()
titleLabel.text = ""
let titleText = "⚡️FlashChat"
for letter in titleText {
titleLabel.text?.append(letter)
}
}
한글자씩 띄우게 하고 실행했는데 안된다?
안된게 아니라 너무 빨라서 보이지 않았다가 맞다.
즉 우리는 타이머가 필요하다!
Timer를 만들어 보자.
1
2
3
4
5
6
7
8
9
10
11
12
13
override func viewDidLoad() {
super.viewDidLoad()
titleLabel.text = ""
let titleText = "⚡️FlashChat"
for letter in titleText {
Timer.scheduledTimer(withTimeInterval: 0.1 , repeats: false) { timer in
self.titleLabel.text?.append(letter)
}
}
}
이것 역시도 너무나 빠르다. 근데 빠른도 문제지만 결과가 이상하다?
다시실행해보자
타이머가 0.1초라는 아주 짧은 찰나에 이뤄지기에 거의 동시에 시작된다고 봐도 무방하다.
이걸 고치기 위해서 즉 딜레이를 주기 위해서는 withTimeInterval을 변경해줘야한다.
우선 charIndex라는 변수를 하나 만들어준다. 값은 0으로 한다.
그리고 for문이 끝날때마다 1씩 증가하게 한다.
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
override func viewDidLoad() {
super.viewDidLoad()
titleLabel.text = ""
var charIndex = 0
let titleText = "⚡️FlashChat"
for letter in titleText {
print(charIndex)
print(letter)
Timer.scheduledTimer(withTimeInterval: 0.1 , repeats: false) { timer in
self.titleLabel.text?.append(letter)
}
charIndex += 1
}
}
/*
0
⚡️
1
F
2
l
3
a
4
s
5
h
6
C
7
h
8
a
9
t
*/
위와 같이 print가 되는걸 알 수 있다.
그리고 원하는대로 다시 글자가 나오지만 아직도 애니메이션 효과를 볼 수는 없다.
여기서 우리가 할 수 있는건 withTimeInterval의 parameter를 charIndex로 곱하는 것이다.
이렇게 되면 하나가 실행 되면 그다음 0.2 초 뒤에 프린트가 되고 그다음건 0.3초 이렇게 자연스럽게 시간 딜레이가 발생하면서 보여지게 될것이다.
그전에 type에러가 나므로 type을 맞춰주자.
시간 딜레이를 보기 위해 다음과 같이 하고 실행을 해보자.
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
override func viewDidLoad() {
super.viewDidLoad()
titleLabel.text = ""
let titleText = "⚡️FlashChat"
var charIndex = 0.0
for letter in titleText {
print("-")
print(0.1 * charIndex)
print(letter)
Timer.scheduledTimer(withTimeInterval: 0.1 * charIndex, repeats: false) { timer in
self.titleLabel.text?.append(letter)
}
charIndex += 1
}
}
/*
-
0.0
⚡️
-
0.1
F
-
0.2
l
-
0.30000000000000004
a
-
0.4
s
-
0.5
h
-
0.6000000000000001
C
-
0.7000000000000001
h
-
0.8
a
-
0.9
t
*/
이제 실행해보자
위와 같이 시간 딜레이가 조금씩 증가하면서 print가 되는걸 알 수있다.
잘된다.
