eunjoo

[SwiftUI] Stack 사용해보기

지난 포스팅에 이어 계속 landmark 앱을 만든다. 지난 포스팅에 TextView를 사용해 “Turtle Rock”이라는 랜드마크 이름을 써넣었는데, 이번에는 랜드마크의 랜드마크의 위치나 설명이 들어간 Text View를 넣어본다.

튜토리얼 페이지

Combine Views Using Stacks

SwiftUI view를 만들때 content, layout, behavior를 view의 body 프로퍼티 안에 다 집어넣게 된다. 하지만 이 body 프로퍼티는 view를 딱 하나 만 return 해준다는 점을 유의해야한다.

아니 그럼 화면에 TextView 하나 밖에 못 넣는다는 건가?!?! 싶겠지만 우리에게는 스토리보드에서도 사용하던 친구를 떠올릴 필요가 있다. 그렇다. 바로 Stack 이다.

SwiftUI에서도 Stack을 사용할 수 있다. Stack 안에 여러 View들을 넣어서 body에서 반환시키면 body에서 view 하나만 반환해야 하는 문제를 해결할 수 있다. horizontally, vertically, or back-to-front라고 쓰여있는 걸 보니 수직, 수평, 앞뒤(?)까지 다 가능한 것 같다.

VStack 사용하기

VStack 추가

  • ContentView의 body 내부에 있는 Text(“Turtle Rock”)의 Text 글자 위에서 Command를 누른채로 클릭 한다.
    • popover로 나타난 창에 있는 Embed in VStack을 눌러주면 자동으로 body 코드에 VStack이 추가된다.
    • 아직 TextView가 하나뿐이라 VStack이 추가됐지만 별 차이는 없다.

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Turtle Rock")
                .font(.title)
                .foregroundColor(.blue)
        }
    }
}

새로운 Text View 추가

  • Xcode 우측 상단쯤 보이는 + 버튼을 누르고 Text를 검색해 추가해준다.

  • 버튼을 눌러도 되지만 Command + Shift + L 을 누르면 바로 켜진다.

Text를 추가해줄 때 Text(“Turtle Rock”)의 설정값들 아랫줄에 새로운 줄을 추가해준 뒤 거기 커서가 있는 상태로 해야한다. 안그러면 아래와 같은 에러가 나온다.

정상적인 코드는 이렇다.

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Turtle Rock")
                .font(.title)
                .foregroundColor(.blue)
            Text("Joshua Tree National Park")
        }
    }
}
  • 다음으로 Joshua Tree National Park가 쓰여있는 Text View는 설명이므로 font의 속성을 .subheadline으로 변경해준다.
    • 드디어 VStack이 하는 일이 나타났다..! VStack 내부에 있는 TextView 두 개가 위아래로 배치된 걸 확인할 수 있다. (V는 Vertical의 약자)

image

VStack(alignment:)

  • VStack의 alignment 속성을 .leading으로 변경한다.
    • 기본적으로 VStack은 alignment 속성이 중앙으로 되어있으므로 필요한 속성으로 변경해서 사용하자.

image

Text View 두개가 모두 왼쪽으로 정렬되었다.

HStack 사용하기

  • 캔버스(프리뷰 화면)에서 Joshua 텍스트뷰를 커맨드+클릭해 Embed in HStack을 선택한다.

코드 화면에서도 추가가 되고 프리뷰에서도 추가가 된다는 걸 알려주려고 다른 방법으로 한건가?.?

  • HStack 내부에 Text를 추가해준다. Joshua 아래에 써주어야 한다. 그래야 우측으로 들어간다. (좌 - 우 순서대로니까..!)

image

font 속성까지 맞춰주니 깔끔하게 California가 추가됐다.

Spacer, padding

  • HStack에 넣어준 두 Text View의 사이를 넓혀주기 위해 Spacer() 를 사용한다.

image

….? 이렇게 극적으로 벌어질 일인가…? 싶지만 설명에 따르면 spacer는 부모 뷰의 공간만큼 확장 이 된다고 한다.

HStack의 부모뷰가 화면 전체이므로 이렇게 끝까지… 넓어지는 것.. (HStack은 가로로 넓어지니까 VStack은 세로로 넓어지겠지?)

이럴 때 적절한 공간 확보를 위해 padding을 추가해준다.

image

VStack에다가 padding을 적용해주었다. HStack에만 적용하게 되면 아래 TextView 두개에만 padding이 적용된다.

Spacer()를 HStack에 넣어주었는데 Title이 들어간 TextView까지 왼쪽 끝으로 이동한 걸 보면 VStack은 내부 HStack에 맞춰 늘어나도록 되있는 게 아닐까..?

번외

  • VStack에 Spacer를 넣음

마무리

SwiftUI에서 아주 자주 쓰일 것 같은 HStack과 VStack에 대해 정리했다. 개념 자체는 되게 쉬운 것 같지만 실제로 현업에서 쓸 때는 화면 구조가 복잡한 경우도 많아서 이걸 어떻게 잘 활용할 수 있을지 고민해볼 필요가 있을 것 같다.

Leave a comment