개발하는 정대리님의 유튜브를 보면서 SwiftUI에 대한 본격적인 공부를 시작하려고 한다.
Swift 문법 공식문서는 거의 다 봐서 한 일주일만 구체적으로 더 보면 될듯?
1학기때 만들었던 앱을 좀 더 다듬어야 하기 때문에.. 일단 스유를 빠르게 시작하려구 함.
1학기에 보면서 되게 도움이 많이 됐던 정대리님 유튜브를 다시 정독하면서 빠트렸던 내용들을 좀 더 세세하게 채울 생각!
아무리 급해도 기본을 탄탄히 다져야 나중에 어려운 내용이 나와도 다시 볼 수 있기 때문에 아예 처음부터 보려구 한다.
- 강의: basic guide, @State
<ContentView.swift>
이렇게 만들어둔 구조체를 아예 새로운 swift 파일을 생성해서 작성해줘도 된다.
ContentView.swift에 작성해둔 MyVStackView를 없애고
MyVStackView.swift를 만들어 넣어준다.
이런식으로 다른 파일에 작성해둔 구조체를 별다른 import 없이 사용할 수 있다는 게 SwiftUI의 장점!
.
HStack에다 .onTapGesture 를 추가해서 클릭 시 액션을 주는 코드이다. 버튼이라면 그냥 액션에다 코드를 넣어주면 되겠지만 HStack은 버튼이 아니기에 클릭 액션을 추가해 줘야 클릭시 반응이 나타남!
SwiftUI 코드를 보다 보면 @State
라는 어노테이션을 많이 볼 수 있다. 요게 뭐냐면! 이걸 붙여준 변수가 변경될 때마다 View를 새로 그려주는 것! 즉 화면이 새로고침 되는 것이다.
@State 공식문서를 참고해 보면, 해당 값이 바뀌면 이 값이 영향을 주는 계층의 View를 업데이트 하는거라구 함.
@State는 프로퍼티 래퍼이기 때문에 값 자체가 아닌 값을 읽고 쓰는 걸 해 주는 거임. 그래서 이 변수를 사용하고 싶으면 변수 이름 자체로 접근하면 된다. 딱히 뭘 해줄 필요가 없음.
State로 지정해둔 프로퍼티를 자식 뷰에게 넘겨주면?
부모 뷰에서 이 값이 바뀔 때 자식 뷰도 동시에 업데이트된다. 근데 자식뷰는 값을 바꿀 수 없음!
이때 @State
대신 @Binding
을 사용하면 자식 뷰에서도 값을 바꿀 수 있다.
이건 다음에 따로 자세히 알아보도록 하자!
암튼 @State private var isActivated: Bool = false
는 ContentView
구조체 안에서만 쓰이기 때문에 private으로 선언했음!
원래 배경색을 지정할 때는 .background(.yellow)
이런식으로 추가하지만, 특정 조건을 괄호 안에 넣어서 만들 수도 있음!
여기서는 3항 연산자를 사용해 isActivated
가 true이면 노랑, false이면 까만색 배경을 사용하고 싶었으므로
.background(isActivated? ? .yellow: : .black)
을 사용해 표현한 것!
padding값도 클릭 시 바꿨을 때, 모션이 좀 더 부드럽게 흘러가게 하기 위해서 애니메이션을 추가할 수 있음!
프로퍼티의 값이 변하는 self.isActivated.toggle()
을 withAnimation
으로 감싸서 해결해 주면 된다.
요런식으로 수정됨.
이제 버튼을 추가해서 다른 페이지로 넘어갈 수 있도록 할건데, NavigationLink
를 사용할 것이므로 뷰 전체를 NavigationView
로 감싸줘야 함.
지금 있는 페이지 뷰 전체가 새로운 뷰로 덮어써지는 것이기 때문에 현재 페이지의 요소 전체를 NaviationView
로 감싸줘야 하는 것!!
요런식으로 지금까지 써뒀던 코드 전부를 감싸준다.
그리고 이 감싸둔 NaviationView 안에 NaviationLink
를 정의해줌!
import SwiftUI
struct ContentView: View {
@State private var isActivated: Bool = false
var body: some View {
NavigationView{
VStack{
HStack{
MyVStackView()
MyVStackView()
MyVStackView()
}
.padding(isActivated ? 50 : 10)
.background(isActivated ? .yellow : .black)
.onTapGesture {
print("HSTack clicked")
withAnimation{
self.isActivated.toggle()
}
} // HStack
NavigationLink(destination: Text("hoho")){
Text("navButton")
}
}
} // NavigationView
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
NavigationLink 안에는 인자가 여러 개 들어갈 수 있는데, 여기서는 NavigationLink(destination:label:)
을 사용했다.
destination은 말 그대로 목적지, 즉 이동할 뷰를 넣어주면 되고,
label은 이 네비게이션링크가 만든 버튼에 넣을 무언가를 넣어주면 됨.
여기서는 hoho 라는 텍스트 뷰로 이동하고, 버튼 이름은 navButton으로 설정해줬다.
이런식으로 됨!
이제 hoho같은 시시한 게 나오는 뷰 말고 색깔을 바꿀 수 있는 새로운 뷰를 만들어서 넣을거임!
클릭할 때마다 5가지 색이 번갈아가면서 나오는 뷰인데, 생각보다 쉽게 만들 수 있ㅆ따.
import SwiftUI
struct MyTextView: View{
@State private var index: Int = 0
private let backgroundColors = [Color.red, Color.yellow, Color.blue, Color.green, Color.orange]
var body: some View{
VStack{
Spacer()
//화면에 꽉 차게 하기 위해서 프레임의 너비와 높이 조정
Text("Background item Index \(self.index + 1)")
.font(.system(size: 30, weight: .bold))
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
Spacer()
}
.background(backgroundColors[index])
//safearea를 없애버리기 위한 옵션
.edgesIgnoringSafeArea(.all)
//클릭할때마다 색깔을 바꾸기 위한 onTapGesture
.onTapGesture {
print("background item clicked")
// index는 4가 최대이므로 넘어갔을 때 다시 0으로 초기화해줘야 함.
if(self.index == self.backgroundColors.count - 1){
self.index = 0
}
else{
self.index+=1
}
}
}
}
struct MyTextView_Previews: PreviewProvider{
static var previews: some View{
MyTextView()
}
}