목록SwiftUI (6)

klioop for iOS

SwiftUI AlignmentGuide 2, Custom AlignmentGuide

이번 포스팅에서는 지난 포스팅(https://klioop.tistory.com/31)에 이어서 AlignmentGuide 에 대해 알아보겠습니다. alignmentGuide 를 적용했을 때 Stack 안에서 뷰 들이 어떻게 정렬될지 예상이 되어야 이번 포스팅을 이해하실 수 있습니다. 시작은 지난 번 포스팅과 동일한 예제로 가겠습니다. struct DaysView: View { var body: some View { VStack { Day(label: "월요일") Day(label: "화요일") Day(label: "수요일") Day(label: "목요일") Day(label: "금요일") Day(label: "토요일") Day(label: "일요일") } .frame(width: 200) .padding..
SwiftUI 2021. 5. 27. 16:59
SwiftUI AlignmentGuide 1

안녕하세요 이번 포스팅부터 SwiftUI 레이아웃에서 핵심 중 하나인 AlignmentGuide 를 알아보겠습니다. 공부할 때 헛갈리는 부분이 많았는데 나중에도 참고할 수 있도록 정리하겠습니다. 우선 왜 필요한지 생각해볼까요? AlignmentGuide 는 WWDC 2019 Building Custom Views with SwiftUI 에서 일부분 소개되는데요. 컨테이너뷰인 Stack 안에서 뷰들이 컨테이너 정렬 파라미터에 기준으로 정렬되는데, 거기서 만족하지 않고 디테일하게 뷰를 정렬하는데 필요합니다. 하나하나 필요한 개념들을 살펴볼게요. 먼저 익숙한 VStack 예시입니다. struct DayView: View { var body: some View { VStack { Day(label: "월요일")..
SwiftUI 2021. 5. 27. 09:04
SwiftUI 레이아웃 시스템 2, Stack

안녕하세요 지난번에 이어서 SwiftUI 레이아웃 시스템 원리에 대해서 공부해 볼게요. Stack(VStack, HStack) 안에서 뷰들이 어떻게 정렬되는지 알아보겠습니다. struct StackExample: View { var body: some View { VStack { HStack { Text("Cute") Image("cat_100x100") Text("baby cat") } .border(Color.blue) } .frame(width: 300, height: 200) .border(Color.red) } } VStack 은 일단 부모 뷰가 크기를 제안하는 용도로 생각하고 HStack 안에서 뷰들이 어떻게 정렬되는지 알아보겠습니다. 빨강색 보더라인이 부모 뷰가 제안하는 크기이고 파랑색 보더..
SwiftUI 2021. 5. 22. 02:02
SwiftUI, 좌표공간 각도방향

안녕하세요 SwiftUI 에서 Path Shape 을 이용해서 곡선을 추가해야 할 때가 종종 있는데요. path.addArc( center: startAngle: endAngle: clockwise: ) 저기서 clockwise 를 true 로 하면 시계방향, false 로 하면 반시계방향으로 그린다는 것을 쉽게 추측할 수 있습니다. SwiftUI 의 좌표공간 방향은 익숙한 데카르트 공간을 x 축 대칭하면 되는데요. 간단하게, 아래로 내려갈 수록 y 값이 증가한다는 의미입니다. 그런데 저는 평소 좌표공간에 익숙해져있어서 각도 방향이 계속 헛갈리더라구요 ㅜ 까먹을 때마다 참고하려고 정리를 해놓으려고 합니다. 먼저 우리에게 익숙한 좌표공간과 각도 방향을 살펴볼게요. 반시계방향으로 각도가 정의되는게 자연스럽죠..
SwiftUI 2021. 5. 21. 10:42
이전 Prev 1 2 Next 다음