[WWDC21] SheetViewController (Session. Customize and resize sheets in UIKit)

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을 호출합니다.

---

GitHub 원본 출처

https://github.com/Secret-Of-SwiftUI/SSDC22/issues/21