[스윗한 SwiftUI] 02장 뷰 구성하기 - 1

수식어 적용 순서 유의사항

 

수식어에는 특정 뷰에만 있는 수식어와 모든뷰에 공통적으로 적용되는 수식어가 있다.

후자의 경우 반환타입이 View로 반환되기 때문에 그 이후에 특정 뷰에만 있는 수식어를 사용할시 에러가 발생한다.

 

padding 수식어를 사용한 후에 some View 가 반환되었으므로 Text전용 수식어인 italic 사용시 에러가 뜨는 모습이다.

따라서 전용수식어를 먼저 다 적용한 이후에 공용수식어를 적어야한다.

 

두번째 주의사항은

수식어를 넣어주는 시점에 따라서 결과물이 달라질 수 있다는 것이다.

첫번째는 background색상까지 padding이 적용되지만

두번째는 text만 padding이 적용된다.

 

# Image

안드로이드의 ImageView와 비슷하다

기본적으로 Image는 아무 수식어를 주지 않았을때 이미지의 본래 크기를 유지하려고 한다.

프레임수식어를 통해서 뷰 자체 크기를 줄이더라도 이미지는 줄어들지 않는다.

 

.resizable() : 이 수식어를 사용하면 frame크기에 맞게 이미지가 크기조절이 된다. resizingMode 옵션을 통해서 이미지를 채우는 방식을 바꿀 수 있다.

 

- ContentMode

Scale to Fill : 기본값. 비율과 관계없이 이미지를 늘려서 주어진 공간을 다 채운다

Aspect Fit : 이미지 원본의 비율을 유지한 상태로 주어진 공간을 채운다. 다만 주어진 공간의 높이와 너비중 작은값을 기준으로 채우기 때문에 이미지가 공간을 벗어나진 않지만 여백이 생긴다.

Aspect Fill : 위와 같지만 높이와 너비중 큰값을 기준으로 채우기 때문에 여백이 생기지 않지만 이미지가 공간을 벗어나버린다.

 

- AspectRatio

Aspect Fit, Fill을 사용할때 이미지의 비율조정이 필요하다면 해당 수식어를 쓴다

첫번째 매개변수로 CGFloat or CGSize를 전달해주는데 전자는 '너비 / 높이' 를 계산한 소수값을 전달해주고 CGSize는 width와 height 비율을 직접 적어준다. 두번째 매개변수는 fit 혹은 fill 을 적어준다.

 

- ClipShape

원하는 모양으로 이미지를 잘라줄 수 있다.

 

 

# SF Symbols

SF Symbols는 애플에서 직접 만들고 제공하는 간단한 이미지 아이콘 소스들이다.

별도로 이미지를 추가하지 않고

Image(systemName: "star.circle")

이런식으로 systemName을 통해서 이미지를 불러올 수 있다.

SF Symbols의 장점은 여러 수식어를 통해서 이미지를 변형할 수 있다는 것이다.

 

.imageScale = 기본값은 medium이고 small, large 값으로 조절가능

.foregroundColor = 색상 조절 가능

.font = 폰트 크기 조절로 이미지 크기 조절이 가능?하다 좀 이상한데 아무튼 그럼

.Weight = 이미지의 굵기를 조절할 수 있다. 화살표같은 아이콘에 유용

 

 

# 스택

뷰를 배치하는데 사용하는 컨테이너뷰로써

HStack

VStack

ZStack

이렇게 3가지 종류가 있다.

 

- 생성자

alignment : 자식뷰 정렬 방식 기본값 center

spacing : 자식뷰간의 간격 기본값 nil (뷰에 따라 다른 기본값)

@ViewBuilder content: () -> Content : 실제 컨텐츠... 마지막 매개변수로 람다가 들어오기 때문에 생성자 바깥에 중괄호로 표현된다.

 

- 수식어

스택도 역시 수식어를 사용할 수 있다.

font와 같이 자식들에게 전체적으로 영향을 주는 수식어도 있다

 

- Spacer

스택 내부에서 사용될때는 단순히 공간을 채우기 위한 용도

스택 외부에서 사용될때는 자식뷰의 크기에 관계없이 스택의 크기를 확장하는 역할

 

 

오늘은 여기까지.

jetpack compose보다도 더 간단하다는 느낌을 받는다

다만 안드로이드는 뷰를 만들때 match parent같은 옵션으로 뷰의 크기를 최대로 확장할지 정하고 margin과 padding을 주로 활용하여 뷰간의 관계를 설정하는데 Spacer를 활용한 뷰 간격 조절같은경우는 확 와닿는 부분은 아니였다.

 

 

----

 

Zstack과 유사하게 뷰를 겹치는 방법으로

overlay와 background가 있다.

 

이는 특정 뷰에 수식어처럼 붙여서 해당 뷰 위에 뷰를 겹쳐 올리거나 바닥에 깔 수 있다.

 

둘다 두번째 인자로 정렬값을 줄 수 있는데 왼쪽 오른쪽 정렬이 leading, Trailing 이라는 생소한 단어가 나오는거에 주의해야겠다.