UISplitViewContrller(1) - 기초, displayMode, master의 width조절

안녕하세요. iOS개발자 brody입니다.

 

이번에 아이패드 개발을 하면서 SplitViewController를 사용하면서 공부한 내용을 정리했습니다. 

 

저도 처음공부하는 내용이고 부족하거나 틀린내용 있으면 댓글 부탁드릴게요! 

 

1. UISplitViewContrller는 무엇인가?

https://developer.apple.com/documentation/uikit/uisplitviewcontroller

위의 애플 문서를 보면 

구글 번역 : master-detail 인터페이스를 구현하는 컨테이너 뷰 컨트롤러라고 나와있네요.

 

 

그러면 master - detail은 무엇이지..?

 

애플 문서에서 제공하는 Overview를 확인해 보면 아래와 같이 나옵니다.

대충 해석을 해보면 뷰컨트롤러 2개를 한 화면에서 관리한다는 말 같네요.  

 

primary view controller는 master이고 secondary view controller는 detail이라는 거 같네요. 

 

모든 iOS device에서만 사용 가능하고, iOS 8이전에는 아이패드에서만 사용 가능했네요.

 

 

위와 같이 왼쪽과 오른쪽이 나뉘어져 있는 아이패드 앱들이 SplitViewController였네요.

 

한 화면에 2개의 화면을 컨트롤 한다는 말이 이해가 됐어요!

 

---

2. UISplitViewController 기본 사용법 - DisplayMode

이번에는 UISplitViewController에서 제공하는 Display 프로퍼티를 정리해볼게요

// Specifies whether the split view controller has collapsed its primary and secondary view controllers together
@available(iOS 8.0, *)
open var isCollapsed: Bool { get }

displayMode는 master 뷰 컨트롤러를 숨기고 표시하는 방법을 표현하는 읽음 전용 프로퍼티입니다.

 

그렇다면 displayMode는 어떻게 변경할까요?

 

// An animatable property that controls how the primary view controller is hidden and displayed. A value of `UISplitViewControllerDisplayModeAutomatic` specifies the default behavior split view controller, which on an iPad, corresponds to an overlay mode in portrait and a side-by-side mode in landscape.
@available(iOS 8.0, *)
open var preferredDisplayMode: UISplitViewController.DisplayMode

perferredDisplayMode를 사용하여 displayMode를 변경할 수 있습니다.

 

변경할 수 있는 모드는 총 4가지인데요.

 

@available(iOS 8.0, *)
public enum DisplayMode : Int {
        
    case automatic

    case primaryHidden

    case allVisible

    case primaryOverlay
}

위와 같이 총 4가지가 있는데 한 가지씩 살펴볼게요. 

 

1. primaryHidden 

 

master View를 숨기는 형태입니다.

 

 

2. primaryOverlay

 

master View가 Detail View위로 덮어쓰기 되어 올라오는 형태입니다.

 

특이점은 Detail View의 크기가 변하지 않고 위로 올라옵니다.

 

3. allVisible

 

master View가 항상 보이는 형태입니다.

 

위의 primaryOverlay와 다른 점은 DetailVC가 옆으로 밀려갔네요.

 

4. automatic

 

세로일 경우는 primaryOverlay 

 

가로일 경우는 allvisible, primaryHidden의 형태입니다.

 

---

3. UISplitViewController 기본 사용법 - Master의 Width 조절

그럼 이제 master의 Width를 조절하는 방법에 대해서 알아볼게요.

// An animatable property that can be used to adjust the relative width of the primary view controller in the split view controller. This preferred width will be limited by the maximum and minimum properties (and potentially other system heuristics).
@available(iOS 8.0, *)
open var preferredPrimaryColumnWidthFraction: CGFloat // default: UISplitViewControllerAutomaticDimension


// An animatable property that can be used to adjust the minimum absolute width of the primary view controller in the split view controller.
@available(iOS 8.0, *)
open var minimumPrimaryColumnWidth: CGFloat // default: UISplitViewControllerAutomaticDimension


// An animatable property that can be used to adjust the maximum absolute width of the primary view controller in the split view controller.
@available(iOS 8.0, *)
open var maximumPrimaryColumnWidth: CGFloat // default: UISplitViewControllerAutomaticDimension

기본적으로 위의 3개의 프로퍼티를 사용하여 master의 width를 정의할 수 있어요.

 

1. minimumPrimaryColumnWidth

master의 최소 너비를 정의할 수 있어요.

 

2. maximumPrimaryColumnWidth

master의 최대 너비를 정의할 수 있어요.

 

3. preferredPrimaryColumnWidthFraction 

전체 화면에 master의 화면 비율에 사용되는 프로퍼티 에요.

여기서 중요한 점은 위의 minimumPrimaryColumnWidth 보다는 작을 수 없으며, maximumPrimaryColumnWidth보다는 클 수 없어요.

 

 

위의 스크린샷을 보면 전체 Width 1112 중에 primaryColumnWidth(master의 Width)가 334인 것을 알 수 있어요.

 

334는 1112 * 0.3의 결괏값이에요.

 

 

그렇다면 minimumPrimaryColumnWidth 보다 작을 수 없다고 했는데 0.1을 주면 어떻게 될까요?

0.1을 주면 최솟값인 320으로 고정되네요. 

 

 

글이 길어져서 다음 글에 나누어서 기본 글을 작성해야 될 거 같네요.

다음에는 화면 전환에 대해서 알아볼게요

 

테스트하는 코드는 아래에 있으니 참고하실 분은 참고해주세요.

https://github.com/brody424/BRSplitVC_Test