SwiftUI 탐방기 001

안녕하세요. 밀쿄 입니다.

오늘은 애플의 새 프레임워크 'SwiftUI'에 대해서 탐방을 해볼 겁니다.

파티션 나눠서 맥 OS 베타를 올렸으니 이 점 참고해서 봐주시면 될 것 같습니다.

그럼 저도 잘 모르지만 같이 한 번 살펴보겠습니다.

https://developer.apple.com/tutorials/swiftui/creating-and-combining-views

Apple Developer Documentation

먼저 유의사항은 프로젝트 만들 때

저렇게 SwiftUI 체크해주세요.

그다음에 ContentView.swift를 보시면

아마 이렇게 돼있으실 건데 Resume을 눌러주면

Hello World가 맞아주네요.

Text안의 String을 바꿔서 원하는 걸 출력해 봅시다.

따로 빌드하지 않아도 자동으로 오른쪽 화면에 반영이 되네요.

그럼 폰트나 글자색은 어떻게 바꿀까요?

자 이제, 위에 링크대로 따라 해봅시다.

오, 간단하네요.

아 저렇게 코드로 치는 것 말고도 command 키 누르고 글자를 클릭하면

이렇게 나와서 Inspect에 들어가서 색을 바꿀 수도 있네요. 

사진처럼 검은색으로 돌아옵시다.

 

자 여기까지 챕터 1 - 섹션 2 였습니다. 아직까지는 쉽네요...

식겁하고 시작했는데 다행입니다. 

챕터 3부터는 스택 뷰네요. 계속 이어서 보겠습니다.

스택을 적용한 모습입니다.

지금은 가운데 정렬 상태인데요.

왼쪽 정렬로 바꿔 볼게요.

alignment를 적용해서 왼쪽으로 바꿨네요.

참고로 leading이 왼쪽은 아닙니다.

leading은 글 시작 방향입니다.

오늘은 그걸 말하는 시간이 아니니 여기까지만 말하고

HStack을 살펴보겠습니다.

옆으로 쌓이네요.

눈치가 있다면 발견하셨겠지만

VStack의 V는 Vertical

HStack의 H는 Horizontal

인 것 같네요.

그 다음은 디바이스의 width를 전부 사용하기 위하여

Spacer를 사용하는 모습인데요.

잠시 Spacer 문서를 보고 가겠습니다.

 

포함된 주요 축(가로나 세로)에 따라 확장되거나 

스택에 포함되어있지 않은 경우 두 축 모두로 확장되는 유연한 공간이다.

라네요.

넣어 봅시다.

HStack에 넣었으니까 가로로 확장이 되었네요.

근데 좌우 여백이 없는데 이 다음 과정이 좌우 여백을 만들어 줍니다,

'padding' 으로 말이죠

padding도 한 번 보고가겠습니다.

 

지정된 Edge Inset을 가지고 뷰를 패딩하세요.

무슨 말인지 모르겠습니다.

아마도 패딩은

뷰와 컨텐츠사이의 간격 같으니까

Edge Inset을 가지고 뷰와 컨텐츠 사이에 간격을 만드세요.

같네요.

양 옆에 간격이 잘 들어갔네요.

 

참고로

기본값이 잡혀있으므로 

그냥 .padding()으로 사용 가능합니다.

 

1탄은 여기까지 하고

2탄으로 찾아뵙겠습니다.