참고 자료: SwiftUI 튜토리얼 공식문서

이제 막 SwiftUI를 배워보는 한 사람으로서, 코드 작성하고 내가 이해 한 대로 작성할것이다.

이 글의 내용은 위에 있는 참고자료의 공식문서를 번역하여 조금 더 내가 느끼기에 자연스럽게 만들어서 작성하는것이다.

누군가에게 알려주기보다 자신이 정리를 하면서 다시 문서를 보고 어버버거리지 않게 다시 참고하기 위함이기에 해당 문서를 읽는 사람은 swift에 대해서 어느 정도 안다는 가정하에 글을 작성할것이다

시작

view의 존재 여부와 이로 인해 전체 레이아웃에 미칠 영향을 제어한다.
디자인에 관련이 없는 view가 있는 경우 이러한 view가 전체 레이아웃에 미치는 영향을 선택할 수 있다.

view가 존재하지 않는것처럼 다른 모든 컨텐츠를 배치한 다음 view가 표시될 때 다른 컨텐츠의 위치를 업데이트 할 수 있다.

또는 view의 표시 관계없이 view에 대한 공간을 지정해두어 view가 보이게 되면 다른 컨텐츠가 움직일 필요 없게 할 수 있다.

분석

1. 조건부 view 제거

Method: opacity()
Method: hidden()

import SwiftUI

struct IfElseTrain: View {
    var longerTrain: Bool
    
    var body: some View {
        VStack {
            HStack {
                Image(systemName: "train.side.rear.car")
                if longerTrain {
                    Image(systemName: "train.side.middle.car")
                }
                Image(systemName: "train.side.front.car")
            }
            Divider()
        }
    }
}

struct IfElseTrain_Previews: PreviewProvider {
    static var previews: some View {
        IfElseTrain(longerTrain: true)
        IfElseTrain(longerTrain: false)
    }
}

// opacity 활용 코드 (if 위치에 사용)
     Image(systemName: "train.side.middle.car")
                    .opacity(longerTrain ? 1 : 0)

만약 로그인 화면에서 처음에는 오류 메시지를 표시하지 않지만, 비밀번호를 잘못 입력하면 오류메시지가 추가되는 경우가 있다면, 이름과 비밀번호 필드가 오류 메시지 표시 여부에 따라 위치가 변경되면 안된다.

opacity() 메서드를 0으로 설정하여 오류메시지의 표시와 상관없이 레이아웃이 오류메시지를 고려하도록 한다.

또는 오버레이 내부에 있는 view와 같이 다른 view의 배치에 영향을 주지 않는 view를 제거하는 경우에도 이 방법을 사용할 수 있다.

또는 배송지와 청구지에 동일한 주소를 사용하지 않는 사람들을 위해 두번째 세트의 주소필드를 표시하는 양식이 있을 수 있다.
주소 필드와 같은 컨텐츠는 사람들이 스크롤해야 할 수도 있으므로 if 문을 사용해 컨텐츠가 표시될 때만 공간을 만들고 나타나고 사라질때 다른 컨텐츠를 이동시킨다.

보이지 않게 하려는 view의 측정 값을 기반으로 레이아웃에서 공간을 잡아야 하지만 view를 절대 표시하지 않으려면 hidden() 을 사용할 수 있다.

VoiceOver 및 제스처 인식기는 이러한 방식으로 제거한 view도 무시한다.

샘플코드에서 if문을 통해서 중간 기차 칸이 나타나고 사라지는것을 제어한다.
하지만 opacity()를 사용해도 중간 차량의 가시성을 제어할 수 도 있다.
단, opacity()의 경우 view가 사라지더라도 공간을 고려하고 있기에 앞칸과 뒷칸의 컨텐츠가 붙어있는 동작 없이 위치를 유지하고 있음을 알 수 있다.

참고자료

Method: opacity()
Method: hidden()

기타

당연 틀린 부분 지적은 감사하나 비난은 정중하게 사양하겠다.