うるおいらんど
最終確認日

UIKitでハーフモーダルを表示する

こういうやつ。iOS26.2.1の姿。

UIKitでハーフモーダルを表示する-1771490051708

これまでは自作ハーフモーダルを使っていたが、iOS 15から簡単に実装できるようになったので、それを使ってみる。

参考

コード

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)

こんな感じの表示になる。

UIKitでハーフモーダルを表示する-1771486137087

サイトアイコン
公開日
更新日