最終確認日
UIKitでハーフモーダルを表示する
こういうやつ。iOS26.2.1の姿。
これまでは自作ハーフモーダルを使っていたが、iOS 15から簡単に実装できるようになったので、それを使ってみる。
参考
- 【UIKit】ハーフモーダルのやり方 #Swift - Qiita
- Customize and resize sheets in UIKit - WWDC21 - Videos - Apple Developer
- Customize and resize sheets in UIKit | Documentation
コード
modalPresentationStyle を .popover に指定。
let modalViewController = ModalViewController()
modalViewController.modalPresentationStyle = .popover
if let popover = modalViewController.popoverPresentationController {
let sheet = popover.adaptiveSheetPresentationController
// ハーフモーダルに設定
sheet.detents = [.medium()]
// オプション
// スクロールによってシートがより大きなdetentsに展開されるかを決定する
sheet.prefersScrollingExpandsWhenScrolledToEdge = false
// コンパクトなときに、シートが画面の下端にアタッチするかどうかを決定する
sheet.prefersEdgeAttachedInCompactHeight = true
// シートの幅がViewControllerの推奨コンテンツサイズと一致するかどうかを決定する
sheet.widthFollowsPreferredContentSizeWhenEdgeAttached = true
// シート下の視界を遮らないための最大サイズ
// つまり .medium までは背景を暗くしない
sheet.largestUndimmedDetentIdentifier = .medium
// つかめることを示すバーを表示する
sheet.prefersGrabberVisible = true
}
present(modalViewController, animated: true)
iPad の場合
以下のようにアンカー元を指定しないとクラッシュする。
popover.sourceView = sourceView
popover.sourceRect = sourceView.bounds
popover.permittedArrowDirections = [.up, .down]
UICollectionView などのセルの場合
let modalViewController = ModalViewController()
modalViewController.modalPresentationStyle = .popover
if let popover = modalViewController.popoverPresentationController {
popover.sourceView = cell
popover.sourceRect = cell.contentView.bounds
popover.permittedArrowDirections = [.up, .down]
let sheet = popover.adaptiveSheetPresentationController
// ハーフモーダルに設定
sheet.detents = [.medium()]
// オプション
// スクロールによってシートがより大きなdetentsに展開されるかを決定する
sheet.prefersScrollingExpandsWhenScrolledToEdge = false
// コンパクトなときに、シートが画面の下端にアタッチするかどうかを決定する
sheet.prefersEdgeAttachedInCompactHeight = true
// シートの幅がViewControllerの推奨コンテンツサイズと一致するかどうかを決定する
sheet.widthFollowsPreferredContentSizeWhenEdgeAttached = true
// シート下の視界を遮らないための最大サイズ
// つまり .medium までは背景を暗くしない
sheet.largestUndimmedDetentIdentifier = .medium
// つかめることを示すバーを表示する
sheet.prefersGrabberVisible = true
}
present(modalViewController, animated: true)
こんな感じの表示になる。
公開日
更新日