[iOS] Swift UI Group, View 속성 사용해보기

Frontend/iOS

[iOS] Swift UI Group, View 속성 사용해보기

데니 Denny 2020. 3. 28. 20:52

SMALL

이번 포스트에서는 Swift UI에서 제공하는 기본적인 View 속성과 Container의 자식 View 개수 제한을 해결해보는 내용에 대해 살펴보도록 하겠습니다.

Swift UI View Stack

Swift UI는 VStack, HStack, ZStack이라는 3가지 Stack Layout View를 제공하고 있습니다.

VStack은 수직으로 View를 배치하는 레이아웃이며 HStack은 View를 가로로 배치하는 레이아웃, ZStack은 View를 중첩이 되도록 배치하는 레이아웃을 의미합니다.

예를 들어, 다음과 같이 VStack에 3개의 Text가 있다면 세로로 3개의 View가 배치되는 것입니다.

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Sample Text")
            Text("Sample Text")
            Text("Sample Text")
        }
    }
}

Spacer, Alignment, Padding

Swift UI는 뷰 간에 공간을 추가하기 위한 Spacer 컴포넌트를 가지고 있습니다. Spacer를 Stack 안에서 사용하면 배치된 뷰들의 간격을 제공하기 위해 Stack의 방향에 따라 (수직, 수평) 유연하게 축소 및 확장이 됩니다.

VStack(alignment: .center, spacing: 15) {
        Text("Finalcial Results").font(.title)

위 코드는 스택이 선언될 때 가로로 중앙 정렬이 되며 간격은 15로 하라는 뜻입니다.

HStack(alignment: .top) {
            Text("Q1 Sales").font(.headline)
            Spacer()
            VStack(alignment: .leading) {
                Text("January")
                Text("February")
                Text("March")
            }
            Spacer()
            VStack(alignment: .leading) {
                Text("$1000")
                Text("$200")
                Text("$3000")
            }
            .padding(5)
        }
        .padding(5)

위 코드는 HStack에 쌓이는 뷰들을 세로로 top 정렬을 하면서 중간중간 Spacer를 통해 공간을 벌려주고 padding 옵션을 통해 간격을 지정해주는 코드입니다. leading은 뷰의 왼쪽 영역으로 정렬하라는 것을 의미합니다.

전체 코드와 구동 화면을 살펴보겠습니다.

struct ContentView: View {
    var body: some View {
        VStack(alignment: .center, spacing: 15) {
            Text("Finalcial Results").font(.title)
            
            HStack(alignment: .top) {
                Text("Q1 Sales").font(.headline)
                Spacer()
                VStack(alignment: .leading) {
                    Text("January")
                    Text("February")
                    Text("March")
                }
                Spacer()
                VStack(alignment: .leading) {
                    Text("$1000")
                    Text("$200")
                    Text("$3000")
                }
                .padding(5)
            }
            .padding(5)
            
            limit
        }
        .padding(5)
    }
}

자식 뷰의 수 제한 풀기

Swift UI는 기본적으로 직접적인 자식 뷰의 개수가 10개 넘어가면 다음과 같은 오류를 발생시킵니다.

Argument passed to call that takes no argument

하지만 10개가 넘는 경우가 존재할 수도 있습니다. 이 경우에는 어떻게 해야 할까요?

Group이라는 컴포넌트를 활용하여 해결할 수 있습니다.

만약 14개의 자식 뷰가 필요하다면 7개 씩 Group을 묶고 2개의 Group을 넣어주면 해결이 될 것입니다.

Group은 여러 개의 뷰에서 작업을 일괄적으로 수행할 때에도 유용합니다. 예를 들어, Group에 속한 모든 뷰를 포함시키고 숨기는 명령을 주게 된다면 하나의 명령으로 해당하는 모든 뷰를 숨길 수 있다는 장점이 있습니다.

이번 포스트에서는 뷰의 정렬, 간격, 그룹에 대하여 살펴보았습니다.

LIST