[iOS - SwiftUI] HStack, VStack에서의 alignment 개념 (center, top, bottom, firstTextBaseline, lastTextBaseline)

alignement 개념

• 보통 HStack, VStack을 사용하다보면 alignment 값이 있는데 대부분은 default(.center)로 두고 사용하지만 이 값을 잘 사용하면 다양한 뷰 배치를 편리하게 할 수 있는 장점이 존재

• 속성을 알아보기 전에, HStack(alignment:)에서 alignment의 의미를 파악하는것이 가장 중요
  • alignment 의미?
  • HStack은 뷰들을 왼쪽에서 오른쪽으로 채워주는 컨테이너이며, 이미 왼쪽에서 오른쪽이라는 Horizontal 의미를 가지고 있지만, Vertical의 의미는 정해지지 않았으므로 alignment에서 정하는 것
  • HStack에서 alignment는 HStack의 y좌표를 의미
• alignement의 디폴트 값은 center이므로 아래와 같이 작성하면 콘텐츠안에 있는 뷰의 길이가 길어질땐, HStack의 y좌표를 기준으로 중앙으로 배치

struct ContentView: View {
    var body: some View {
        HStack {
            Text("1234")
            Text("jake iOS 앱 개발 알아가기\n긴 문자열인 경우와\n개행이 들어간 경우")
        }
        .background(Color.gray.opacity(0.3))
    }
}

HStack좌표를 기준으로 안쪽의 뷰들을 중앙에 배치

• 만약 "1234" 문구를 좌측상단에 고정하고 싶은 경우?
  • alignment를 firstTextBaseline으로 수정
  • top은 단어 그대로 HStack뷰의 y좌표 0을 의미

HStack(alignment: .top)

alignment옵션 center, top, bottom 알아보기

• 이 5가지 속성 모두 HStack의 y좌표를 의미
• center: HStack의 y좌표 중앙
• top: HStack의 y시작 좌표인 0
• bottom: HStack의 y끝 좌표 (=HStack 높이와 동일)

alignment옵션 firstTextBaseline, lastTextBaseline 알아보기

• 순서의 의미와 Text에 대한 정렬 옵션
• 위에서 알아본 3가지와는 다르게 "first"라는 순서의 의미와 "Text"에 관한 특정 뷰가 존재 
  • firstTextBaseline: HStack안에 첫번째로 등장하는 Text에 맞추라는 의미
  • lastTextBaseline: HStack안에 마지막으로 등장하는 Text에 맞추라는 의미
• firstTextBaseline을 top과 비교하여 이해하기
  • 둘 다 상단에 배치되지만, firstTextBaseline은 HStack에 들어간 첫번째 Text를 기준으로 나머지 뷰들의 y좌표가 결정

struct ContentView: View {
    var body: some View {
        VStack(spacing: 12) {
            HStack(alignment: .top) {
                Text("1234").font(.largeTitle)
                Text("jake iOS 앱 개발 알아가기\n긴 문자열인 경우와\n개행이 들어간 경우")
            }
            .background(Color.gray.opacity(0.3))
            
            HStack(alignment: .firstTextBaseline) {
                Text("1234").font(.largeTitle)
                Text("jake iOS 앱 개발 알아가기\n긴 문자열인 경우와\n개행이 들어간 경우")
            }
            .background(Color.gray.opacity(0.3))
        }
    }
}

 

top	firstTextBaseline

• lastTextBaseline을 bottom과 비교하여 이해하기
  • 둘 다 하단에 배치되지만, lastTextBaseline은 HStack에 추가된 마지막 Text를 기준으로 나머지 뷰들의 y좌표가 결정

struct ContentView: View {
    var body: some View {
        VStack(spacing: 12) {
            HStack(alignment: .bottom) {
                Text("1234")
                Text("jake iOS 앱 개발 알아가기\n긴 문자열인 경우와\n개행이 들어간 경우").font(.largeTitle)
            }
            .background(Color.gray.opacity(0.3))
            
            HStack(alignment: .lastTextBaseline) {
                Text("1234")
                Text("jake iOS 앱 개발 알아가기\n긴 문자열인 경우와\n개행이 들어간 경우").font(.largeTitle)
            }
            .background(Color.gray.opacity(0.3))
        }
    }
}

bottom	firstTextBaseline

 

(VStack의 alignment도 HStack과 원리가 동일하므로 생략)