[SwiftUI] 1일차

상 원·2022년 7월 29일
0

SwiftUI

목록 보기
1/4
post-thumbnail

개발하는 정대리님의 유튜브를 보면서 SwiftUI에 대한 본격적인 공부를 시작하려고 한다.
Swift 문법 공식문서는 거의 다 봐서 한 일주일만 구체적으로 더 보면 될듯?

1학기때 만들었던 앱을 좀 더 다듬어야 하기 때문에.. 일단 스유를 빠르게 시작하려구 함.
1학기에 보면서 되게 도움이 많이 됐던 정대리님 유튜브를 다시 정독하면서 빠트렸던 내용들을 좀 더 세세하게 채울 생각!

아무리 급해도 기본을 탄탄히 다져야 나중에 어려운 내용이 나와도 다시 볼 수 있기 때문에 아예 처음부터 보려구 한다.


1일차

구조체 다른 파일로 빼기


<ContentView.swift>

이렇게 만들어둔 구조체를 아예 새로운 swift 파일을 생성해서 작성해줘도 된다.
ContentView.swift에 작성해둔 MyVStackView를 없애고
MyVStackView.swift를 만들어 넣어준다.


이런식으로 다른 파일에 작성해둔 구조체를 별다른 import 없이 사용할 수 있다는 게 SwiftUI의 장점!

HStack 클릭시 색깔 바꾸기

.onTapGesture




.


HStack에다 .onTapGesture 를 추가해서 클릭 시 액션을 주는 코드이다. 버튼이라면 그냥 액션에다 코드를 넣어주면 되겠지만 HStack은 버튼이 아니기에 클릭 액션을 추가해 줘야 클릭시 반응이 나타남!

@State

SwiftUI 코드를 보다 보면 @State 라는 어노테이션을 많이 볼 수 있다. 요게 뭐냐면! 이걸 붙여준 변수가 변경될 때마다 View를 새로 그려주는 것! 즉 화면이 새로고침 되는 것이다.
@State 공식문서를 참고해 보면, 해당 값이 바뀌면 이 값이 영향을 주는 계층의 View를 업데이트 하는거라구 함.

@State는 프로퍼티 래퍼이기 때문에 값 자체가 아닌 값을 읽고 쓰는 걸 해 주는 거임. 그래서 이 변수를 사용하고 싶으면 변수 이름 자체로 접근하면 된다. 딱히 뭘 해줄 필요가 없음.

State로 지정해둔 프로퍼티를 자식 뷰에게 넘겨주면?
부모 뷰에서 이 값이 바뀔 때 자식 뷰도 동시에 업데이트된다. 근데 자식뷰는 값을 바꿀 수 없음!
이때 @State 대신 @Binding을 사용하면 자식 뷰에서도 값을 바꿀 수 있다.
이건 다음에 따로 자세히 알아보도록 하자!

암튼 @State private var isActivated: Bool = falseContentView 구조체 안에서만 쓰이기 때문에 private으로 선언했음!

3항 연산자 옵션으로 전달하기

원래 배경색을 지정할 때는 .background(.yellow) 이런식으로 추가하지만, 특정 조건을 괄호 안에 넣어서 만들 수도 있음!

여기서는 3항 연산자를 사용해 isActivated 가 true이면 노랑, false이면 까만색 배경을 사용하고 싶었으므로
.background(isActivated? ? .yellow: : .black) 을 사용해 표현한 것!

withAnimation 넣어보기

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()
    }
}
profile
ios developer

0개의 댓글