iOS/SwiftUI (4) 썸네일형 리스트형 [SwiftUI] Grid에 대해서 알아보자 List?? Grid? List는 UIkit에 테이블뷰와 거의 유사하고, Grid는 CollectionView라고 생각하면 이해하기 쉬운 것 같습니다. 가장 큰 차이점으로는 List는 수직스크롤만 가능하다는 점이고, Grid는 수직, 수평 스크롤 둘다 가능합니다. 수직은 LazyVGrid, 수평은 LazyHGrid를 사용합니다. 예시 1부터 99까지의 숫자들을 수직 형식으로 구현해보려 합니다. Cell로 사용될 View를 다음과 같이 작성해주었습니다. 먼저 LazyVGrid로 수직 방향으로 스크롤이 되도록 구현하려 합니다. 그런데 [GridItem] 타입을 넣어주어야 하는군요. LazyGrid의 layout을 구현하는 용도라고 합니다. GridItem을 작성하려고 하니 다음과 같은 enum 타입의 무언가.. [SwiftUI] State, Binding에 대해 알아보기 State란? SwiftUI에서 관리하는 값을 읽고 쓸 수 있는 property wrapper 속성을 선언할 때, 앞에 @State를 작성해주어야 합니다. 상태가 변경된다면 View는 자동으로 업데이트 됩니다. SwiftUI에서는 이러한 상태 정보를 따로 보관하고, 관리합니다. 주의해야할 점으로 @State로 작성한 경우에는 private 접근 제어자를 붙여주어야 하고, 가장 상위 뷰에서 작성해야 합니다. Binding이란? 값을 읽고 쓸 수 있는 property wrapper Binding을 사용하여 State를 사용한 View와 양방향 연결을 만들 수 있습니다. 사용 @State를 사용해 버튼이 눌릴 때 toggle이 되도록 작성하였습니다. 이 버튼을 따로 빼주어서 사용하고 싶은데, 저 isPlayi.. [SwiftUI] Stack을 사용해 Layout 그리기 Stack UIKit에서는 AutoLayout을 사용하여 layout을 구성했는데, SwiftUI에서는 Stack을 사용한다고 합니다. HStack, VStack, ZStack을 사용하며 생김새는 다음과 같습니다. UIKit의 StackView와 비슷한 것 같네요. Spacer와 Divider를 사용하면 유연하고 복잡한 레이아웃을 만들 수 있다고 합니다. Stack Initializer alignment: 서브뷰를 정렬 (default: .center) spacing: 서브뷰의 간격 (default: nil) content: 구현부 spacing은 HStack과 VStack에만 존재합니다. Spacer 그렇다면 Spacer란 뭘까요? 스택에 포함된 경우, 스택 레이아웃의 주축을 따라 확장되며 스택에 포함.. [SwiftUI] Modifier에 대해 알아보자! Modifier란? 각 컴포넌트들의 속성을 바꿀 수 있습니다. 쉽게 말해서 옵션이나 설정 값들을 변경할 수 있습니다. 예를들어, Text의 font를 정해줄 때 다음과 같이 사용합니다. 여기서 사용된 .font가 modifier 입니다. 이 .font를 한 번 살펴보겠습니다. Text를 받아서 Text를 리턴해주고 있네요. 즉, 기존 Text에서 속성을 변경한 Text를 리턴해주고 있습니다. 또한 modifier는 순서대로 진행되며, 컴포넌트들의 타입별로 다르기 때문에 순서에 주의해야합니다. 순서 주의 Text에서 View로 리턴하는 modifier를 사용한다면 이제 타입이 Text에서 View로 변경되었기 때문에 Text를 받는 modifier는 사용할 수 없습니다. 다른 타입에서도 마찬가지 입니다. .. 이전 1 다음
