Stacks, Grids, and Outlines in SwiftUI

[TaekH]

Stacks, Grids, Outlines

• SwiftUI 에는 뷰 컬렉션을 수평 및 수직으로 정렬하기 위한 다양한 레이아웃 기본 요소가 내장되어 있다.
  Stacks, Grids를 활용하여 계층 정렬, 간격을 사용하여 레이아웃을 간단하게 구성할 수 있고 이 예시로는 Mac OS의 알림센터가 있다.

Stacks

-Stack의 종류에는 수직으로 배열되는 VStack, 수평으로 배열되는 HStack, 겹겹이 쌓아 배열하는 ZStack이 있다.

• 이중에서 VStack 을 예시로 들면 VStack은 컴포넌트들을 수직으로 배열해준다.
  그러나 VStack 은 자동으로 스크롤 되지 않으므로 배열되는 컴포넌트들이 많아지면 ScrollView 를 활용하여 스크롤을 하여 보여준다.
  밑은 ScrollView를 활용하여 스크롤 되는 것을 확인할 수 있는 VStack 예시이다.

        ScrollView {
            VStack(spacing: 0) {
                ForEach(1...100, id: \.self) {
			Text("Row \($0)")
		}
            }
        }

이 경우에는 쌓이는 컴포넌트들이 많아질수록 화면이 표시될 때의 반응이 점점 오래걸리기 시작한다.
화면에 보이지 않는 컴포넌트들까지 불러와 미리 그리기 때문이다.
이를 해결하고자 나온 것이 LazyV(H)Stack 이다.

• Lazy 라는 뜻은 '화면에 무언가 그릴 것이 생기기 전까지는 구성하지 않는다.' 라는 뜻으로
  LazyV(H)Stack 은 쉽게 말해서 화면에 표시되는 부분만을 로드한다.

        ScrollView {
            LazyVStack(spacing: 0) {
                ForEach(1...100, id: \.self) {
			Text("Row \($0)")
		}
            }
        }

또한 LazyV(H)Stack 은 내부 컴포넌트 크기 만큼의 여백을 차지하는 V(H)Stack과는 다르게자동으로 여유있는 여백을 차지한다는 차이점이 있다.

LazyV(H)Stack / V(H)Stack

Grids

Grid는 쉽게 말해 여러 V(H)Stack 을 결합한 형태라고 볼 수 있을 것 같다.
SwfitUI 에는 LazyV(H)Grid가 있고 사용 방법은

        let columns = [
            GridItem(spacing: 10),
            GridItem(spacing: 10),
            GridItem(spacing: 10)
        ]
        
        ScrollView {
            LazyVGrid(columns: columns, spacing: 30) {
                ForEach(1...100, id: \.self) {
                    Text("Row \($0)")
                }
            }
        }

LazyHGrid 라면 row를 LazyVGrid 라면 column을 인스턴스로 생성하여 사용한다.

기존 SwiftUI 에는 LazyV(H)Stack 처럼 화면이 표시되는 부분만 렌더링하는 LazyV(H)Grid 밖에 없었지만
iOS 16 부터는 Grid 라는 것이 생긴다고 한다.
https://developer.apple.com/documentation/swiftui/grid

OutLineGroup

• OutLineGroup 이란 파일 디렉토리와 같이 데이터의 계층 구조를 나타내고 싶을 때 사용한다.

코드를 살펴보면

struct FileItem: Hashable, Identifiable, CustomStringConvertible {
    var id: Self { self }
    var name: String
    var children: [FileItem]? = nil
    
    var description: String {
        switch children {
        case nil:
            return "📄 \(name)"
        case .some(let children):
            return children.isEmpty ? "📂 \(name)" : "📁 \(name)"
        }
    }
}

먼저 데이터 구조를 살펴보면 children이 자식으로(계층) 파일 구조를 가질 수 있으므로 [FileItem] 타입으로 선언 하였고 없을 수도 있으므로 옵셔널을 주었다.
description 은 children이 없으면 파일 이름을 보여주고 있다면 폴더 이름을 보여준다.

    let data =
    FileItem(name: "users", children:
                [FileItem(name: "user1234", children:
                            [FileItem(name: "Photos", children:
                                        [FileItem(name: "photo001.jpg"),
                                         FileItem(name: "photo002.jpg")]),
                             FileItem(name: "Movies", children:
                                        [FileItem(name: "movie001.mp4")]),
                             FileItem(name: "Documents", children: [])
                            ]),
                 FileItem(name: "newuser", children:
                            [FileItem(name: "Documents", children: [])
                            ])
                ])
    var body: some View {
        NavigationView {
            Form {
                OutlineGroup(self.data, children: \.children) { item in
                    Text("\(item.description)")
                }
            }.navigationTitle("OutLineGroup")
        }
    }

그 다음은 더미 데이터를 넣어주고
구현부인 OutlineGroup에서 root 데이터를 접근하고 children 들을 받는다.

이렇게 하면 OutlineGroup를 구현할 수 있다.

DisclosureGroup

상태에 따라 콘텐츠를 표시하거나 숨길 수 있는 리스트라고 할 수 있을 것 같다.
앞서 배웠던 OutlineGroup의 초기 상태에 계층이 접혀있는 것이 DisclosureGroup 하나라고 할 수 있다.

DisclosuerGroup은 닫혀 있는지 열려 있는지의 상태를 초기값으로 받고 상태를 받지 않았을 때는 false로 디폴트값이 들어간다.

코드를 먼저 보면

struct ToggleStates {
        var oneIsOn: Bool = false
        var twoIsOn: Bool = true
    }
    
    @State private var toggleStates = ToggleStates()
    @State private var Expanded: Bool = true
    
    var body: some View {
        Form {
            DisclosureGroup("Items", isExpanded: $Expanded) {
                Text("Item1")
                Toggle("Toggle 1", isOn: $toggleStates.oneIsOn)
                DisclosureGroup("subItems") {
                    Toggle("Toggle 2", isOn: $toggleStates.twoIsOn)
                }
            }
        }
    }

ToggleStates 로 토글의 상태를 지정해주었고 Items 라는 타이틀을 갖고 펼쳐져 있는 DisclosureGroup을 먼저 생성해주었다.
그리고 그 안에 텍스트와 토글, 또 다른 DisclosureGroup를 넣어주었다.
이때 두번째 계층의 DisclosureGroup 은 isExpanded의 초기값을 할당해주지 않았으므로 자동으로 false가 된다.

빌드를 해보면

+Stack으로 보는 View Layout System

SwiftUI의 기본적인 뷰 레이아웃 원칙은

1. 부모뷰는 자식뷰에게 부모뷰 크기만큼을 그대로 제안한다.
2. 자식뷰는 자신의 크기와 부모뷰의 크기를 고려해서 자신의 크기를 직접 정한다.
3. 부모뷰는 자식뷰가 결정한 크기를 부모뷰의 좌표 공간에 놓는다. (기본적으로는 센터)

그렇다면 Stack 안에서의 컴포넌트들 뷰는 어떻게 결정될까?

VStack {
            HStack() {
                Text("Taek")
                    .font(.largeTitle)
                Image("memoji3")
                Text("Memoji")
                    .font(.largeTitle)
            }
            .border(.blue)
        }
        .frame(width: 300, height: 300)
        .border(.red)

코드를 보면 일단 VStack이 부모뷰에게 300*300의 크기를 제안받고
그 안에 HStack은 두개의 텍스트와 이미지만큼의 크기를 받아 VStack 안에서 자신의 뷰 크기를 결정한다.
HStack이 받은 크기가 내부 텍스트와 이미지를 모두 표시할 만큼의 크기가 되지 않아서 텍스트가 두줄로 나오는 것을 확인할 수 있는데
여기서 우선순위가 같다면 이미지와 같이 크기에 제약이 있는 자식뷰 먼저 그려지고 그 뒤에 남은 자리를 텍스트가 채우는 것을 알 수 있다.

그렇다면 만약 여기서 텍스트를 한줄로 써야하고 우선순위를 부여한다면 어떻게 될까?

VStack {
            HStack() {
                Text("Taek")
                    .font(.largeTitle)
                Image("memoji3")
                Text("Memoji")
                    .layoutPriority(1)
                    .font(.largeTitle)
            }
            .lineLimit(1)
            .border(.blue)
        }
        .frame(width: 300, height: 300)
        .border(.red)

크기를 한줄로 줄이고 우선순위를 부여했을 때, 우선순위가 높지 않은 텍스트가 잘리는 것을 볼 수 있다.

이렇게 미루어 봤을 때

스택 안에서의 뷰들이 동등한 우선순위라면 이미지와 같은 크기에 제약이 있는 뷰를 먼저 그리고
그 뒤에 다른 뷰들이 그려지는 것을 알 수 있다.
또한 우선순위가 다르다면 우선순위에 따라 뷰가 그려지고
이를 기반으로 Stack이 자식뷰들의 정렬과 자신의 크기도 결정하는 것을 알 수 있다.

Reference🔗

https://developer.apple.com/documentation/swiftui/building-layouts-with-stack-views
https://developer.apple.com/documentation/swiftui/lazyvstack
https://developer.apple.com/documentation/swiftui/disclosuregroup