[iOS - SwiftUI] frame 사용 시 뷰 정렬 주의 사항, frame(alignemnt:) 코드 이해하기

뷰 정렬 개념

• 아래 코드를 보면 흔히 사용되는 VStack 컴포넌트와 .frame 함수를 사용하여 아래처럼 구현했으나 잘못 구현된 코드
  • UI는 의도된 대로 나올 수 있을지라도 추후에 수정할 때 잘못 적용될 확률이 큼

ex) UI들을 좌측 정렬을 기준으로 배치하도록 구현된 코드

VStack(alignment: .leading) {
    Image(systemName: "globe")
        .resizable()
        .frame(width: 30, height: 30)
        .foregroundStyle(.tint)
    
    Text("Hello, world!")
}

• 잘못 구현된 점은 개념을 알아보고 아래에서 확인

VStack과 frame의 alignment

• VStack(alignemnt:)는 이 내부에 들어가는 뷰들은 왼쪽으로 정렬시키는 옵션
• frame(width:height:)는 사실상 frame(width:height:alignemnt:)인데, alignment가 center로 디폴트 값이 있는 상태

extension View {
  @inlinable public func frame(width: CGFloat? = nil, height: CGFloat? = nil, alignment: Alignment = .center) -> some View
}

• frame(alignemnt: .center) 의미 파악하기
  • 프레임 안에서 콘텐츠 정렬을 center로 하라는 의미

ex) 아래처럼 작성하면 30 * 30프레임 안에 있는 이미지를 센터 정렬하라는 의미

• 예시를 위해 resizable()을 제외 (resizable을 사용하면 frame 크기만큼 이미지가 조정됨)

Image(systemName: "globe")
    .frame(width: 30, height: 30)

실수하기 쉬운 코드

• 위에서 알아보았듯이, frame을 사용하면 alignemnt가 디폴트로 .center로 세팅됨
• 만약 아래처럼 작성하면 Image에 resizable() 함수도 사용되어 이미지 크기도 조절되어 alignemnt옵션이 무의미 하겠지만, 만약 resizable()가 제거되고 frame이 변경된 경우 의도하지 않은 UI표출이 될 수 있음

VStack(alignment: .leading) {
    Image(systemName: "globe")
        .resizable()
        .frame(width: 30, height: 30)
        .foregroundStyle(.tint)
    
    Text("Hello, world!")
}

 

ex) leading 정렬을 원했지만, frame에 숨어있는 alignemnt: .center 때문에 의도하지 않은 UI로 표출

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Image(systemName: "globe")
//                .resizable()
                .frame(width: 100, height: 30)
                .foregroundStyle(.tint)
            
            Text("Hello, world!")
        }
    }
}

• 즉 뷰가 왼쪽 정렬되어야 한다면 frame(alignemnt)에도 명시적으로 .leading을 사용해줄 것

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Image(systemName: "globe")
//                .resizable()
                .frame(width: 100, height: 30, alignment: .leading) // <-
                .foregroundStyle(.tint)
            
            Text("Hello, world!")
        }
    }
}

원하는 결과)