SwiftUI 날씨앱 UI 짜며 배운점(22.03.07)

간단하게 SwiftUI를 사용해서 실제 온도를 보여주는 것이 아닌!

UI만을 작성해보고 배운점을 정리해본다.

 

백그라운드의 그라디언트는 LinearGradient 구조체를 사용하여 지정할 수 있다.

LinearGradient(gradient: Gradient(colors: [isNight ? .black : .blue,
                                           isNight ? .gray : Color("lightBlue")]),
                                  startPoint: .topLeading,
                                  endPoint: .bottomTrailing)
	.edgesIgnoringSafeArea(.all)

gradient프로퍼티로 Gradient 구조체를 매개변수로 받는다.

그라데이션으로 사용할 색상(여기서는 밤에는 검정-회색, 낮에는 파랑-하늘)

lightBlue는 내가 정의해준 색상이다.

startPoint는 그라데이션이 시작할 지점.

endPoint는 그라데이션이 끝날 지점이다.

edgeIgnorginSafeArea 메서드는 Safe Area를 넘어서 뷰를 지정할 수 있게 해준다.

백그라운드 색상이 Safe Area를 넘어선다고 문제가 발생하는것은 아니기 때문에 지정해주었다.

 

ZStack은 View의 계층(Hierachy)를 나타낸다.

HStack은 수평방향으로 요소를 쌓고(Horizontal), VStack은 수직방향으로 요소를 쌓는다면(Vertical)

ZStack은 View 계층을 나타내고 쌓는다는 개념이다, X, Y, Z방향의 Z방향을 따서 ZStack이라고 이름지은 것 같다.

 

HStack과 VStack도 매개변수를 가질 수 있다.

정확히 말하면 alignment, spacgin, content 세가지의 매개변수를 가진다.

alignment는 VStack이나 HStack에 있는 요소를 어떻게 정렬할 것인지(.center, .leading, .trailing)

spacing은 요소끼리의 간격을 얼마로 할지,

content는 Stack을 구성할 뷰를 나타낸다.

 

Spacer는 가능한 만큼의 공간을 가진다.

Spacer는 늘어날 수 있는 최대치 만큼 빈공간을 만들어 준다. 

오브젝트의 공간에 우선순위를 두고, 가질 수 있는 최대치의 공간을 만들어낸다.

UI를 짤때 유용하게 사용할 수 있다.

 

SF Symbol을 출력할 때는 Image의 프로퍼티로 systemName을 사용한다.

시스템에서 주어지는 이미지가 아닌 일반 이미지, Assets에 있는 이미지는 이미지의 이름만을 매개변수로 받지만,

SF Symbol같은 이미지는 systemName 매개변수를 사용한다.

// Assets에 저장된 이미지를 사용할 때
Image("이미지 이름")

//SF Symbol과 같은 시스템의 이미지를 사용할 때
Image(systemName: "이미지 이름")