본문으로 건너뛰기

ArrangementView 분할 비율을 splitArrangementLayoutRatio로 조정하기

Set the split size of ArrangementView with splitArrangementLayoutRatio

sarunw.com

핵심 요약

  1. iOS 27.1의 splitArrangementLayoutRatio는 ArrangementView 안의 뷰가 차지할 화면 비율을 지정하며, 가로·세로 방향별 값이나 공통 비율을 설정할 수 있다.
  2. 가로로 나란히 놓일 때는 idealHorizontal, 세로로 쌓일 때는 idealVertical을 사용하며, 각 값은 해당 축에서만 적용되고 다른 축의 배치에는 영향을 주지 않는다.
  3. 반쯤 접힌 iPhone Duo에서는 분할이 힌지 위치를 따르므로 지정한 비율이 무시되며, 콘텐츠가 할당 공간을 초과해도 뷰 크기는 자동으로 늘어나지 않는다.

도입

ArrangementView는 기본적으로 두 뷰를 같은 크기로 나눈다. iOS 27.1에서 추가된 splitArrangementLayoutRatio를 뷰에 적용하면 각 뷰가 차지하는 비율을 지정할 수 있다. 가로 배치에는 idealHorizontal, 세로 배치에는 idealVertical을 사용하고, 하나의 비율을 두 축에 공통 적용하는 방식도 제공한다.

상세 요약

비율 지정 방법

ArrangementView는 두 뷰를 기본적으로 같은 크기로 나눈다. 한쪽을 더 작게 만들려면 해당 뷰에 splitArrangementLayoutRatio를 적용한다. 값은 그 뷰가 화면에서 차지할 비율이며, 0부터 1까지 지정한다.

ArrangementView {
    FirstView()
        .splitArrangementLayoutRatio(idealHorizontal: 1 / 3)
} secondary: {
    SecondaryView()
}

가로로 나란히 배치될 때 idealHorizontal은 첫 번째 뷰의 폭을 화면의 3분의 1로 지정한다. SecondaryView는 나머지 공간을 차지한다. iPhone Duo를 펼친 상태에서 비율을 지정하지 않으면 두 뷰의 너비는 각각 433포인트다. idealHorizontal: 1 / 3을 적용하면 FirstView는 288포인트, SecondaryView는 578포인트가 된다. modifier는 어느 쪽 뷰에나 적용할 수 있으며, secondary 뷰에 적용하면 지정된 비율은 그 뷰의 몫이 된다.

세로 배치와 공통 비율

화면이 세로로 더 길어 뷰가 쌓이는 경우에는 idealVertical을 사용한다.

FirstView()
    .splitArrangementLayoutRatio(idealVertical: 1 / 3)

접힌 iPhone Duo에서 비율을 지정하지 않은 두 뷰의 높이는 각각 322포인트다. idealVertical: 1 / 3을 적용하면 FirstView는 214포인트, SecondaryView는 429포인트가 된다. idealHorizontal은 세로로 쌓인 배치에서, idealVertical은 가로로 나란한 배치에서 동작하지 않는다.

두 방향에 같은 비율을 적용하려면 축 이름 없이 값을 하나 전달한다.

FirstView()
    .splitArrangementLayoutRatio(1 / 3)

1 / 3은 iPhone Duo를 펼쳤을 때 288포인트 너비를, 접었을 때 214포인트 높이를 지정한다. 이는 각 축에 idealHorizontal과 idealVertical을 각각 1 / 3으로 설정한 결과와 같다.

힌지와 공간 제약

iPhone Duo를 반쯤 펼치면 분할은 항상 접히는 부분인 힌지에 맞춰진다. 이 상태에서는 비율을 지정해도 반영되지 않는다. 비율 유무와 관계없이 두 영역의 너비는 455포인트와 371포인트다. 화면의 양쪽 절반은 같은 크기지만, trailing 쪽에서 상태 표시줄이 84포인트를 차지해 SecondaryView가 더 작아진다.

뷰는 콘텐츠에 맞춰 자동으로 커지지 않는다. 콘텐츠에 필요한 공간이 지정된 비율보다 크면 뷰 영역 밖으로 넘친다. 본문 크기를 고려해 비율을 선택해야 한다. iPhone Duo의 SwiftUI 레이아웃 점검 맥락은 iPhone Duo Simulator로 SwiftUI 앱의 레이아웃과 동작 테스트하기에서 확인할 수 있다.

추가 인자와 사용 가능 버전

전체 API는 각 축의 최소·이상·최대 값을 받는다. 가로 인자는 minHorizontal, idealHorizontal, maxHorizontal이며, 세로 인자는 minVertical, idealVertical, maxVertical이다. 비율 대신 포인트 단위 크기를 지정하려면 splitArrangementLayoutSize(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:)를 사용한다.

splitArrangementLayoutRatio와 ArrangementView는 모두 iOS 27.1이 필요하다.

결론

비율은 지정한 축에서만 적용되며, 반쯤 접힌 iPhone Duo에서는 힌지 기준 분할이 우선해 무시된다. 콘텐츠가 비율로 배정된 공간보다 커도 뷰는 확장되지 않고 영역 밖으로 넘친다. 따라서 화면 방향과 접힘 상태에 따라 값이 적용되는지 확인하고, 콘텐츠가 표시될 충분한 공간을 남기는 비율을 선택해야 한다.