100 Days of SwiftUI - Day 20

2023-11-07

이전 프로젝트를 마무리하고, 새로운 프로젝트로 넘어가게 된다.
VStack, Image, LinearGradient 등을 배운다.

HStack, VStack

요소들을 가로, 세로로 배치하기 위해 사용한다. HStack은 요소들을 가로로 배치하고, VStack은 요소들을 세로로 배치한다.

VStack, HStack의 속성

alignment 속성 내부에 배치되는 뷰들을 정렬할 수 있다.
.leading
spacing 속성 두 뷰 사이의 간격을 명시적으로 조정한다.

Spacer

뷰들은 기본적으로 중앙에 정렬된다. Spacer() 뷰를 사용하여 나머지 뷰들을 밀어내고 남은 공간을 차지한다.

ZStack

요소들을 깊이별로 배치할 때 사용한다.
위에서 아래로, 뒤에서 앞으로 요소들을 순서대로 배치한다.

Color

컴포넌트의 배경색을 지정할 때는 수정자 .background()를 사용.
HStack, VStack의 경우 전체 배경의 배경색을 지정할 때는 클로저 안에 Color.색상을 사용

Color 자체도 뷰이다.
기본적으로는 사용 가능한 공간을 모두 채우지만, 특정 영역만 채우기 위해 수정자 .frame()을 사용할 수 있다.

뷰의 배치는 안전영역의 안쪽이다. 예시로 Color로 배경색을 지정해도 안전영역까지만 색이 채워지고, 안전영역의 밖은 칠해지지 않는다.
안전영역의 바깥까지 화면을 채워서 뷰를 배치하고 싶을 때는 .ignoreSafeArea() 수정자를 사용한다.

Gradient

색상에 그래디언트를 사용할 수 있는 Gradient뷰

그래디언트의 구성요소

사용할 색상의 배열
그래디언트의 방향과 크기
그래디언트의 종류

종류에 따라 Linear, …

일직선 그래디언트 : LinearGradient

Gradient.Stop()을 사용하여 사용 가능한 공간에서 그래디언트의 위치를 지정할 수 있다.

//화면 상단에서 시작해 하단에서 끝나는 선형 그래디언트
//흰색으로 시작해 초록색으로 끝난다.
LinearGradient(
    colors: [.white, .green], 
    startPoint: .top, endPoint: .end
)

//화면 상단에서 시작해 하단에서 끝나는 선형 그래디언트
//사용 가능한 공간의 45%를 흰색으로 채우고, 사용 가능한 공간의 55%를 초록색으로 채운다.
LinearGradient(
    stops: [
        Gradient.Stop(color: .white, location: 0.45),
        Gradient.Stop(color: .green, location: 0.55)
        //.init(color: .white, location: 0.45)와 같이 사용해도 동작한다.
    ],
    startPoint: .top,
    endPoint: .bottom
)

방사형(원형) 그래디언트: RadialGradient

RadialGradient(
    colors: [.white, .black],   //색상을 지정하는 배열
    center: .center,            //화면 중앙에서 그래디언트가 생성
    startRadius: 20,            //시작하는 색상의 그래디언트 생성 범위
    endRadius: 200              //끝나는 색상의 그래디언트 생성 범위
)

원뿔형 그래디언트: AngularGradient
원형으로 돌면서 여러 색상이 섞여있는 그래디언트

AngularGradient(
    colors: [.red, .yellow, .green, .blue, .purple],
    center: .center
)

Color의 .gradient
색상 뒤에 .gradient를 붙이면, swiftUI가 자동으로 선형 그래디언트를 생성한다.

Button

버튼 뷰 생성에는 두 가지 방법이 있다.

//버튼 뷰를 정의하고 클로저에 버튼 동작을 정의하는 방식
Button("버튼 텍스트") {
    //버튼을 누르면 실행할 동작들을 클로저에 작성
}

//버튼 뷰와 버튼의 동작을 따로 정의하는 방식, action 인자에 함수를 전달한다
Button("버튼 텍스트", action: 함수명) 
...
func 함수명() {
    ...
}

role 인자를 통해 버튼의 역할에 따라 스타일을 지정할 수 있다.
버튼의 색상을 사용자화 하려면 .tint 수정자를 사용한다.

버튼들에 색상을 너무 주는 경우 시선이 분산될 수 있기 때문에, 애플에서는 너무 많이 사용하지 않을 것을 권장한다.

Image

앱 내에서 이미지를 보여주기 위한 뷰로 Image를 사용한다.

Image(이미지이름)   //프로젝트에 추가한 이미지를 로드
Image(decorative: 이미지이름)   //위와 동일한 이미지를 로드하지만 스크린 리더가 읽지 않음
Image(systemName: 이미지이름)   //iOS에 내장된 이미지를 로드함. SF 심볼 아이콘에서 이미지를 로드한다.

Alert

사용자에게 어떠한 경고, 알림을 보여주기 위한 창을 띄운다.

iOS 15부터는, .alert() 수정자와 @State프로퍼티를 사용하여 사용자에게 알림을 표시한다.

@State private var showingAlert = false

//var body:some View { ...
Button("Alert Message") {
    showingAlert = true
}
.alert("Important Message", isPresented: $showingAlert) {
    Button("OK") {

    }
}

*View 하나에는 최대 10개까지의 요소들만 자식으로 삼을 수 있다고 하는데, VStack 안에 Text 뷰 11개를 넣었을때 정상적으로 빌드되었다. 왜그런지는 추후에 알아가야 할 듯

chanheelee913