Customize and resize sheets in UIKit

[Taehyeon-Kim]

Discover how you can create a layered and customized sheet experience in UIKit. We'll explore how you can build a non-modal experience in your app to allow interaction with content both in a sheet and behind the sheet at the same time. We'll also take you through sheet size customization, revealing or hiding grabber controls, and adapting between popovers and customized sheets in your app. To get the most out of this session, we recommend watching the Presentations portion of “Modernizing Your UI for iOS 13” from WWDC19 beginning at 9:45.

[Taehyeon-Kim]

iOS 15에서는 Sheet에 여러 커스텀 옵션을 추가할 수 있습니다.

• ex. 화면의 절반 크기로 시트를 만들 수 있습니다.
• ex. Dimmed View를 제거할 수 있습니다.
• ex. 시트 안과 시트 뒤에서 동시에 콘텐츠와 상호 작용할 수 있도록 앱에서 비모달 환경을 구축할 수 있습니다.

1. Getting a sheet

Sheet 인스턴스를 생성합니다. UIPresentationController의 서브 클래스인 UISheetPresentationController를 이용합니다. 시트로 띄우고 싶은 인스턴스에 sheetPresentationController를 호출합니다.

let viewControllerToPresent = UIViewController()
if let sheet = viewControllerToPresent.sheetPresentationController {
  // customize
}
present(viewController, animated: true)

2. detents

• 시트가 자연스럽게 놓이는 높이
• 완전히 확장된 시트 프레임의 일부

2가지의 detents가 존재합니다.

• 전체 높이의 약 절반인 중간 detent
• 완전히 확장된 시트의 높이인 큰 detent

Array로 간단하게 설정할 수 있습니다.

sheet.detents = [.large()]
sheet.detents = [.medium(), .large()] // resizable 가능한 상태가 됩니다.
sheet.detents = [.medium()] // full height으로 resizable 되지 않습니다.

What’s new in UIKit을 참고하자.

iOS 16부터는 높이를 커스터마이징 할 수 있습니다.

if let sheet = viewController.sheetPresentationController {
    sheet.detents = [
        .custom { _ in
            return 200
        }
    ]
}

if let sheet = viewController.sheetPresentationController {
    sheet.detents = [
        .custom { _ in
            return 200
        },
        .custom { context in
            return context.maximumDetentValue * 0.6
        }
    ]
}

3. PickerViewController에 적용하기

Present image picker in a standard sheet

func showImagePicker() {
    let picker = PHPickerViewController()
    picker.delegate = self
    if let sheet = picker.sheetPresentationController {
        sheet.detents = [.medium(), .large()]
    }
    present(picker, animated: true)
}

func picker(_ picker: PHPickerViewController, didFinishPicking results: [PHPickerResult]) {
    dismiss(animated: true)
}

4. prefersScrollingExpandWhenScrolledToEdge

• 스크롤이 중첩되어 있는 상태에서 동작을 원하는대로 해주기 위해 사용합니다.
• default는 True입니다.

내부 컨텐츠를 스크롤하면 같이 따라올라가는 문제

5-1. Dimmed View 제거

largestUndimmedDetentIdentifier

시트 안과 시트 뒤에서 동시에 콘텐츠와 상호 작용할 수 있도록 앱에서 비모달 환경을 구축할 수 있습니다.

sheet.largestUndimmedDetentIdentifier = .medium  // Defualt: nil

• 지정한 detent보다 큰 detent에만 dimmed view를 적용합니다.

5-2. delegate와 엮기

dimmed view를 제거하고, delegate를 이용하면 커스터마이즈한 상호 작용이 가능합니다.

6. 가로모드 시

sheet.prefersEdgeAttachedInCompactHeight = true

7. Grabber

sheet.prefersGrabberVisible = true

8. CornerRadius

sheet.preferredCornerRadius = 20

9. Adaptation from popover

iPad에서 시트 대신 팝오버가 필요한 경우에는 modal의 presentation style을 popover로 설정하면 됩니다. 그리고 sheetPresentationController 대신 popoverPresentationController을 호출합니다.