View 정렬하기

woo94·2023년 1월 24일

swiftui

목록 보기

3/9

Intro

위, 아래, 오른쪽, 왼쪽으로 view를 정렬하는 것은 중요하다. 이것은 layout의 크기와도 밀접한 관련이 있는 주제이다. 자주 사용하는 HStack과 VStack에 있에서 정렬을 어떻게 하는지 알아보자.

Problem

HStack

1. 왼쪽 정렬

우선은 VStack을 HStack으로 바꾸어보자:

//
//  ContentView.swift
//  view-alignments
//
//  Created by woo94 on 2023/01/21.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

기본적으로 SwiftUI의 view들은 가운데 정렬이다.

HStack에 테두리를 줘서 HStack 전체의 크기를 알아보자:

//
//  ContentView.swift
//  view-alignments
//
//  Created by woo94 on 2023/01/21.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .border(.red)
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

HStack은 디바이스의 전체 너비를 차지하지 않고 자신의 Content 만큼의 크기를 차지하고 있었고 그것이 가운데에 정렬되어있는 모습이다.

Spacer 사용

Spacer 는 자신을 포함한 view의 최대한으로 공백을 만들어준다.
HStack안에 Spacer() 를 넣어서 디바이스 전체 너비로 확장시켜보자:

//
//  ContentView.swift
//  view-alignments
//
//  Created by woo94 on 2023/01/21.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
            
            Spacer()
        }
        .border(.red)
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Text() 의 뒤에 위치한 Spacer는 오른쪽의 공간을 최대한의 공백으로 확장시키고 이것은 마치 모든 view를 왼쪽으로 정렬시킨것과 같은 효과를 불러일으킨다.

2. 오른쪽 정렬

이번에는 Spacer 를 HStack의 제일 위에 두면 외쪽의 공간을 최대한의 공백으로 확장시키기 때문에 오른족 정렬시킨것과 같은 효과를 얻을 수 있다.

//
//  ContentView.swift
//  view-alignments
//
//  Created by woo94 on 2023/01/21.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
            Spacer()
            
            
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .border(.red)
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

3. Full width 일 때 가운데 정렬

비슷한 원리로 HStack의 제일 처음과 끝에 Spacer 를 추가하면 가운데 정렬을 할 수 있다. 맨 처음과의 차이점은 HStack의 너비가 디바이스의 전체 너비라는 점이다(border(.red) 를 통해서 확인할 수 있다).

//
//  ContentView.swift
//  view-alignments
//
//  Created by woo94 on 2023/01/21.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
            Spacer()
            
            
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
            
            Spacer()
        }
        .border(.red)
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

VStack

1. 왼쪽 정렬

다시 최상위 view를 HStack -> VStack으로 바꾸어준다:

//
//  ContentView.swift
//  view-alignments
//
//  Created by woo94 on 2023/01/21.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .border(.red)
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

alignment parameter 사용

VStack의 initializer는 아래의 구조로 되어있다:

init(
	alignment: HorizontalAlignment = .center,
    spacing: CGFloat? = nil,
    content: () -> Content
)

alignment parameter를 사용하여 VStack의 정렬을 수정할 수 있다. parameter에 .leading 값을 줘보자:

//
//  ContentView.swift
//  view-alignments
//
//  Created by woo94 on 2023/01/21.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .border(.red)
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

만약 여기에서 VStack의 너비가 디바이스의 전체 너비로 지정하고 싶다면 위에서 설명한 HStack과 Spacer 를 잘 활용하면 된다:

//
//  ContentView.swift
//  view-alignments
//
//  Created by woo94 on 2023/01/21.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
            VStack(alignment: .leading) {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundColor(.accentColor)
                Text("Hello, world!")
            }
            
            Spacer()
        }
        .border(.red)
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

2. 오른쪽 정렬

alignment parameter에 .trailing 값을 넣어주자. Spacer의 위치도 바꾸어준다:

//
//  ContentView.swift
//  view-alignments
//
//  Created by woo94 on 2023/01/21.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
            Spacer()
            
            VStack(alignment: .trailing) {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundColor(.accentColor)
                Text("Hello, world!")
            }
        }
        .border(.red)
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

3. 위 정렬

여태까지의 예시는 모두 디바이스의 가운데에 view가 보였다. 이제는 디바이스의 제일 위로 이것을 올려보겠다. 원리는 Spacer를 사용하는 것이다:

//
//  ContentView.swift
//  view-alignments
//
//  Created by woo94 on 2023/01/21.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
            VStack(alignment: .leading) {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundColor(.accentColor)
                Text("Hello, world!")
                
                Spacer()
            }
            Spacer()
        }
        .border(.red)
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

4. 아래 정렬

VStack 안에 들은 Spacer 의 순서를 제일 위로 올려주면 아래 정렬이 된다:

//
//  ContentView.swift
//  view-alignments
//
//  Created by woo94 on 2023/01/21.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
            VStack(alignment: .leading) {
                Spacer()
                
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundColor(.accentColor)
                Text("Hello, world!")
            }
            Spacer()
        }
        .border(.red)
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}