LOTR Converter (1)
VHZStack
이미지로 간단하게 설명이 가능하다.
V: Vertical H: Horizontal Z는 그냥 Z Axis인듯하다.
우리가 최종적으로 만들 앱의 Structure는 다음과 같이 될것이다.
VHZStack도 View 라는것을 꼭 기억해두자.
뼈대 구성하기
여기 강의에서는 먼저 어떻게 할지 이미지화를 하고 그것에 대해서 크게 뼈대를 잡는 식으로 하였다.
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
struct ContentView: View {
var body: some View {
ZStack {
// Background Image
VStack {
// Prancing pony image
// Currency exchange text
// Currency conversion section
HStack {
// Left conversion section
VStack {
// Currency
HStack {
// Currency image
// Currency text
}
// Textfield
}
// Equal sign
// Right conversion section
VStack {
// Currency
HStack {
// Currency text
// Currency image
}
// Textfield
}
}
// Info Button
}
}
}
}
이렇게 주석을 잡아가면서 뼈대를 잡았다.
좋은 방법인듯 하다.
UI 추가하기
이미지는 Image(.background) 이렇게만 적으면 된다.
이전에 UIKit을 사용할때는 Image("background") 이런식으로 문자열을 사용했는데, SwiftUI에서는 간편하게 할 수 있다. 물론 두개 다 여기선 사용가능하다.
이미지를 추가하면 그냥 꽉 차버리는데 이때 .resizable() 을 사용하자.
그러면
이렇게 SafeArea는 유지한채로 이미지가 깔리는데,
우리는 전역에 배경화면이 깔리게 할것이므로 Modifier를 하나 더 추가해준다.
바로 .ignoresSafeArea()이다.
그냥 읽어봐도 직관적으로 어떤 걸 의미하는지 알 수 있다.
이렇게 깔끔하게 되었다.
1
2
3
4
5
6
VStack {
// Prancing pony image
Image(.prancingpony)
.resizable()
.scaledToFit()
.frame(height: 200)
이렇게 Image 추가하듯이 Text도 추가하면 된다.
코드를 추가해주면
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
struct ContentView: View {
var body: some View {
ZStack {
// Background Image
Image(.background)
.resizable()
.ignoresSafeArea()
VStack {
// Prancing pony image
Image(.prancingpony)
.resizable()
.scaledToFit()
.frame(height: 200)
// Currency exchange text
Text("Currency Exchange")
.font(.largeTitle)
.foregroundStyle(.white)
// Currency conversion section
HStack {
// Left conversion section
VStack {
// Currency
HStack {
// Currency image
Image(.silverpiece)
.resizable()
.scaledToFit()
.frame(height: 33)
// Currency text
Text("Silver Piece")
.font(.headline)
.foregroundStyle(.white)
}
// Textfield
Text("Textfield")
}
// Equal sign
Image(systemName: "equal")
.font(.largeTitle)
.foregroundStyle(.white)
.symbolEffect(.pulse)
// Right conversion section
VStack {
// Currency
HStack {
// Currency text
Text("Gold Piece")
.font(.headline)
.foregroundStyle(.white)
// Currency image
Image(.goldpiece)
.resizable()
.scaledToFit()
.frame(height: 33)
}
// Textfield
Text("Textfield")
}
}
Spacer()
// Info Button
Image(systemName: "info.circle.fill")
.font(.largeTitle)
.foregroundStyle(.white)
}
//.border(.blue)
}
}
}
equal이 pulse 효과를 주어 은은하게 반짝이지만 gif대신 png이미지로 대체한다.
그리고 Textfield는 임시로 Text로 해주었다.
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.