UIKitのシートのカスタマイズとリサイズ

UIKitでレイヤー構造のカスタマイズしたシートエクスペリエンスを作成する方法を紹介します。ここでは、Appでノンモーダルなエクスペリエンスを構築し、シートの上と下の両方のコンテンツを同時に操作できるようにする方法を探ります。また、シートサイズのカスタマイズ、グラバーコントロールの表示・非表示、App内でのポップオーバーとカスタマイズシートの適応についても説明します。このセッションを最大限に活かしていただくためには、WWDC19の9:45時点からの「iOS 13のためのUIの近代化」のプレゼンテーション部分をご確認になることをお勧めします。

リソース

関連ビデオ

ダウンロード

♪ ♪ こんにちは！ UIKit チームのエンジニアのRussellです iOS 13でシートの外観が洗練され電話にも登場しました世界共通のプルして閉じるも追加されましたもっと詳しく知るためにこの動画をごらんください iOS13の最新のUIは9分45秒から始まりますプレゼンテーションで紹介しています iOS 15でシートにカスタマイズオプションを多く追加して基礎を築いたのでこれまでにない楽しい使い方ができますミディアムディテントのサポートも追加し画面半分だけカバーする縦にリサイズ可能なシートを作成できます

ビューの減光も解除できるようになったことでユーザーはシートの背後のコンテンツとインタラクション出来る様に非モーダル型のUIが構築できるようになりました次に新しい視覚オプションで横向きの電話をフルスクリーンではない外観にする方法などを紹介します最後にシームレスに適応するUIを設定する方法でレギュラーサイズのクラスのポップオーバーコンパクトサイズのクラスでカスタマイズされたシートをシームレスに適応させる UIの設定を紹介します

そこでデジタルポストカードを作成するためのサンプルAppを作りましたこのビデオと一緒にご覧くださいそれぞれのポストカードは写真だけでなくテキストやフォントもカスタマイズできますシートをカスタマイズする前にシートを手に入れなければなりませんシートは新しい UIPresentationController のサブクラスの UISheetPresentationController のインスタンスですすべてのカスタマイズオプションはこのクラスのプロパティとして公開されますこのクラスのインスタンスを取得する典型的な方法は表示する前にビューコントローラの sheetPresentationControllerプロパティを読み取ることですこのメソッドはデフォルトでビューコントローラの modalPresentationStyleがフォームシートやページシートである限りnilではないインスタンスを返します

ここからインスタンスに色々プロパティを設定してカスタマイズできますこれはビューコントローラの popoverPresentationControllerの設定と同じです次はディテントに入ります

ディテントとは？ディテントとはシートが自然に止まる高さのことで完全に展開したシートフレームの一部として定義されます展開されたフレームは視覚化されます iPhoneや iPad にシートを使用したことがある方は見覚えがあるでしょう iOS 15ではシステム定義で2つのディテントを公開しシート高の約半分のミディアムディテントとフルの拡張シートの高さのラージディテントがあります

シートでサポートするディテントの指定はディテントプロパティで必要なディテントを設定するだけプロパティの既定値はラージディテントだけで全く設定しなければ標準のフル高シートが表示されます

これをミディアムとラージにに設定するとミディアムとラージの間でサイズ変更可能なシートが作成されますしかしミディアムディテントだけの配列にも設定もできますこれによりシートはミディアムとの高さになり全高にはリサイズできないシートになりますこれをサンプルAppに適用してみます iOS 14 SDKを対象に標準的なシートに表示するコードを紹介しますボタンがタップされると最初の機能が呼び出されイメージピッカーを作成しピッカーのデリゲートを selfに設定しピッカーを表示します

画像選択するとピッカーはFinishPickingを出すことで選択された画像をイメージビューに設定しピッカーを閉じます

それでは走らせてみましょう写真ボタンをタップするとフォトピッカーがApp全体をカバーします最近の旅行はとってもバーチャルです写真を選ぶとフォトピッカーが閉じポストカードで選んだ写真を表示します別の写真を選びたい場合はこの流れをもう一回します写真のライブラリとポストカードの同時表示は本当に素晴らしい機能になりますディアムディテントではそれが可能です

以前のコードと同じですがいくつかの変更がありますピッカーを表示する前に sheetPresentationControllerにアクセスしてディテントをミディアムとラージに設定します pickerのdidFinishPicking デリゲートコールバックでフォトピッカーを閉じる行を削除しました写真選択でフォトピッカーを終了させないためです

今これを実行し写真ボタンをタップしますライブラリーは半分の高さになります写真を選んでできあがりですポストカードで表示しライブラリは下にあります別の写真で試したい場合は 1回タップで簡単にできますディテントアレイにはラージディテントも含まれバーをドラッグしてシートサイズを最大に変更します

スクロールビューは上にスクロールしているのでスクロールビューをスクロールするとシートも拡大します「シェアシート」のようなアクションのシートではより高度なアクションを段階的に表示する優れた機能でリストの下に表示されますしかしフォトライブラリーの例ではシートが拡大しないようにバーからドラッグして明示的にシートのサイズを変更しない限りスクロールしてもポストカードが常に表示されるようにしたいと思いますこの代替動作を行うためにもうひとつ必要な追加プロパティ： PrefersScrollingExpandsWhenScrolledToEdge デフォルトではこのプロパティはtrueですこれをfalseに設定するとスクロールは行いませんシートが広げられません

スクロールしてもフォトピッカーのサイズは同じですバーをドラッグしてフォトライブラリを見やすくできます

しかし今タップすると何が起こるかわかりません写真をタップするとフォトピッカーが閉じられ選択の受け入れがはっきり示されますこれは以前の動作とは対照的です

写真をタップしたときにシートサイズをミディアムにし選択が受信されたことを表示し内容をポストカードに表示したいと思いますプログラムで選択されたディテントの変更でこれが実現できます写真がタップされるたび呼び出されるイメージピッカーデリゲートメソッドに戻るとここにコードを追加して sheetPresentationController を取得しselectedDetentIdentifierをミディアムに設定できますではやってみましょう写真をタップしたときの遷移に注目してください

おっと！切り替えがとても早くて眉毛が抜けそうです実際はまったくアニメーションしてませんプロパティの設定を sheet.animateChangesブロックで囲むことでトランジションを簡単にアニメーションできます必要に応じて標準のアニメーションカーブでシートをミディアムディテントまでアニメーションさせルートシートがスケールアップするなどスタック内のシートもアニメーションさせます

もうひとつの良い点は暗いビューを解除して選択した写真をフルカラー表示できますそのためにはもうひとつのプロパティの smallestUndimmedDetentIdentifierを見る必要がありますデフォルトではnilですべてのディテントが調光されますもし調光を解除したいなら調光をさせたくない最小のディテントの識別子に設定しますミディアムに設定しますピッカーを起動しても

ミディアムディテントでは調光しないことに気づきますジャジャーン! ラージサイズに変更すると調光はフェードインします

このプロパティの使用でシート内のコンテンツやシート外のコンテンツも操作できるため視覚的に調光を除去するだけでなく高度な非モーダルエクスペリエンスを構築することができますさらにフォントピッカーでは

起動中にテキストの範囲を選択しその範囲だけにフォントを適用し選択範囲を調整し再びフォントを適用するUIを構築しました詳しくはサンプルAppをダウンロードしてくださいミディアムのシートでは

また中程度の高さのシートではキーボードの自動回避に対応しておりここでフォントを検索するとキーボードに考慮してシートが自動的に増えますキーボードが解除されるとシートは自動的に戻りますディテントについての多くの情報でしたが

ここからはシートの視覚的カスタマイズの新しいオプションについて紹介しますまずiPhoneの横向きでシート表示のオプションが追加されました iOS 13ではすべてのシートを横向きでフルスクリーンにしました今回シートが画面の下端にのみ貼り付る別の表示方法を用意しました

この新しい外観を取得するには単に prefersEdgeAttachedInCompactHeightを trueにしますこの設だけで常にセーフエリアと同じ幅のシートが得られますシートの幅を presentedViewControllersの優先コンテンツサイズに preferredContentSize設定は widthFollowsPreferredContentSize- WhenEdgeAttached をtrueに設定しますこれによりシートのデフォルト幅が狭くなり preferredContentSizeを設定することでこの幅をさらにカスタマイズできますこれらのプロパティの他にお好みでグラバーを表示できますグラバーは必ずしも必要ではありませんがスクロールしてもシートのサイズが変更されないなどリサイズ可能であることが明らかでない場合グラバーを表示することでリサイズ可能であることを示すことができますシートのコーナーを見てみましょうコーナーの半径をカスタマイズする機能も公開しました Appの外観がより丸みを帯びた場合その美しさに合わせたデザインにするといいですスタックされたコーナーの見た目を一定に保つためフォトピッカーが拡大してルートシートを押し戻すとルートシートのコーナーもそれに合わせて大きくなります最後にディテントを使って ipadでシートが作れますがディテントなどの項目を使ってカスタマイズできるコンパクトなシートに合わせてポップオーバーが必要になることがよくありますこの方法をサンプルAppで試してみましょう iPadでイメージピッカーのポップオーバーを出すにはちょっと修正が必要ですまずmodalPresentationStyleを設定します使うのは sheetPresentationController これは今はnilを返してしまうからです modalPresentationStyleはシートではないため popoverPresentationControllerを取得しますポップオーバーのソースをbarButtonItemに設定し新しいプロパティを取得します adaptiveSheetPresentationControllerでこれはポップオーバーがコンパクトサイズ対応でシートのインスタンスを返します先ほどのシートと同じように設定します

写真のボタンをタップポップオーバーフォトピッカーが出ますシーンのサイズを変更するとミディアムの高さのシートに適応します使えますね！そしてピッカーを広げて写真を選択するとしまった！自動的にミディアム高さにリサイズされませんでした以前できたのにうーんピッカーの didFinishPickingデリゲートメソッドに戻ります

あ! アダプティブシートを取得するには PresentationControllerを popoverPresentationController上のコードで読み込ませます写真を選ぶときに気がつくことがありますやったーサイズがミディアムに戻りましたました

さてシートを使ってこれまで簡単に作れなかったv UIを簡単に作成できるさまざまな機能について説明しましたではAppを見直してメリットのある部分を探してミディアムハイトシートやノンモーダルエクスペリエンスや Appにハーフカイトのカスタムカードをお持ちなら新しく強化したIKit シートに置き換えてくださいシートを使ってクールな新しいものを作ってくださいご覧いただきありがとうございました

0:01 - Get a sheet

if let sheet = viewController.sheetPresentationController {
    // Customize the sheet
}
present(viewController, animated: true)

0:02 - Detents (large only)

if let sheet = picker.sheetPresentationController {
    sheet.detents = [.large()]
}
present(picker, animated: true)

0:03 - Detents (medium and large)

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

0:04 - Detents (medium only)

if let sheet = picker.sheetPresentationController {
    sheet.detents = [.medium()]
}
present(picker, animated: true)

0:05 - Present image picker in a standard sheet

func showImagePicker() {
    let picker = PHPickerViewController()
    picker.delegate = self
    present(picker, animated: true)
}

func picker(_ picker: PHPickerViewController, didFinishPicking results: [PHPickerResult]) {
    // assign result to imageView.image
    dismiss(animated: true)
}

0:06 - Present at medium detent, and don’t dismiss automatically

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]) {
    // assign result to imageView.image
}

0:07 - Prevent scrolling from expanding the sheet

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

func picker(_ picker: PHPickerViewController, didFinishPicking results: [PHPickerResult]) {
    // assign result to imageView.image
}

0:08 - Select medium detent when a photo is picked

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

func picker(_ picker: PHPickerViewController, didFinishPicking results: [PHPickerResult]) {
    // assign result to imageView.image
    if let sheet = picker.sheetPresentationController {
        sheet.selectedDetentIdentifier = .medium
    }
}

0:09 - Animate selection of medium detent

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

func picker(_ picker: PHPickerViewController, didFinishPicking results: [PHPickerResult]) {
    // assign result to imageView.image
    if let sheet = picker.sheetPresentationController {
        sheet.animateChanges {
            sheet.selectedDetentIdentifier = .medium
        }
    }
}

0:10 - Remove dimming at medium detent

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

func picker(_ picker: PHPickerViewController, didFinishPicking results: [PHPickerResult]) {
    // assign result to imageView.image
    if let sheet = picker.sheetPresentationController {
        sheet.animateChanges {
            sheet.selectedDetentIdentifier = .medium
        }
    }
}

0:11 - iPhone in landscape

if let sheet = fontPicker.sheetPresentationController {
    sheet.prefersEdgeAttachedInCompactHeight = true
    sheet.widthFollowsPreferredContentSizeWhenEdgeAttached = true
}
present(fontPicker, animated: true)

0:12 - Show a grabber

if let sheet = fontPicker.sheetPresentationController {
    sheet.prefersGrabberVisible = true
}
present(fontPicker, animated: true)

0:13 - Customize the corner radius

if let sheet = fontPicker.sheetPresentationController {
    sheet.preferredCornerRadius = 20.0
}
present(fontPicker, animated: true)

0:14 - Adapt a popover to a customized sheet

func showImagePicker(_ sender: UIBarButtonItem) {
    let picker = PHPickerViewController()
    picker.delegate = self
    picker.modalPresentationStyle = .popover
    if let popover = picker.popoverPresentationController {
        popover.barButtonItem = sender

        let sheet = popover.adaptiveSheetPresentationController
        sheet.detents = [.medium(), .large()]
        sheet.prefersScrollingExpandsWhenScrolledToEdge = false
        sheet.smallestUndimmedDetentIdentifier = .medium
    }
    present(picker, animated: true)
}

0:15 - Be consistent when using adaptiveSheetPresentationController

func picker(_ picker: PHPickerViewController, didFinishPicking results: [PHPickerResult]) {
    // assign result to imageView.image
    if let sheet = picker.popoverPresentationController?.adaptiveSheetPresentationController {
        sheet.animateChanges {
            sheet.selectedDetentIdentifier = .medium
        }
    }
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

UIKitのシートのカスタマイズとリサイズ

リソース

関連ビデオ

WWDC22

WWDC21

WWDC19