Tech iOS

祝!iOS15でハーフモーダルが追加

投稿日:

はじめに

来月にはiOS15が正式リリースされると思いますが、今回はiOS15にてハーフモーダルが実装可能になったので使い方を紹介したいと思います。

早速使ってみる

準備

ViewControllerを作成し、対応するStoryboardでボタンをタップしたらmodalを出すシンプルな画面を用意します。ハーフモーダルで表示した時にわかりやすいように上詰で色をつけたviewを3つ表示しています。

実装

ハーフモーダルを扱うには、iOS15で追加されたsheetPresentationControllerを使用します。準備したViewControllerのprepare内で設定したいと思います。

これでボタンをタップするとこのように表示されます。

detents

detentsとはモーダルの高さの指定で、現在公式ではmediumとlargeが用意されており、mediumを指定することでハーフモーダルが表示されます。
デフォルトの値はlargeが指定されており、largeは今までのモーダルと同じ高さになります。
detentsは配列になっており、

上記の様に指定することで、モーダルをスワイプ操作することでmediumとlargeを切り替えられます。
また、モーダル初期表示の高さは配列の先頭に指定した物で表示されるので、[.medium(), .large()]にすればハーフモーダルが初期表示の高さになり、[.large(), .medium()]なら全画面表示が初期表示になります。

コードでの高さ切り替え

スワイプ操作でmediumとlargeを切り替えられますが、ボタンや入力の状況などでコードで高さを切り替えたい時は以下の様にします。

ただし、このままだとアニメーション無しで切り替わるので、アニメーションを行う場合は以下の様にanimateChangesを使用します。

モーダル内のスクロール許可

今回のサンプルのようなコンテンツをハーフモーダルで表示する場合にスクロールを使用すると思うのですが、初期設定だと、モーダル内のどこをスワイプしてもモーダルが動いてしまい、スクロールするコンテンツがある場合にスクロールができなくなってしまうので、以下の様に設定します。

これにより、モーダルの高さ変更の操作はTopBarの領域のみになり、モーダル内のコンテンツでスクロールを行える様になります。

グラバーの表示

モーダルのTopBarの領域にグラバーを表示します。

上記のprefersScrollingExpandsWhenScrolledToEdgeをfalseにした場合に、スワイプできる領域がわかりやすくなります。

角丸

モーダル上部の角丸も指定できます、0を指定すれば角丸をなくすことができるはずなのですが、mediumだと0を指定しても若干角丸があります。

親Viewとの併用

初期設定のハーフモーダルだと親Viewが薄暗くなっており、そこをタップするとモーダルが閉じてしまいますが、ハーフモーダルを表示しつつ、親Viewも操作したい場合は以下の様にします。

さいごに

ライブラリを使うことなく、簡単にハーフモーダルを実装できる様になったので、ぜひ使ってみてください!

おすすめ書籍

[改訂新版]Swift実践入門 ── 直感的な文法と安全性を兼ね備えた言語 WEB+DB PRESS plus 詳解 Swift 第4版 [改訂新版]Swiftポケットリファレンス (POCKET REFERENCE)

blog-page_footer_336




blog-page_footer_336




-Tech, iOS
-,

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

no image

Firestoreのルール設定とdumpやrestoreが簡単に行えるfsrpl

1 はじめに2 Firestoreのルール設定2.1 全て許可2.2 本番環境でのルール設定例3 fsrpl3.1 fsrplとは3.2 インストール3.3 秘密鍵3.4 copy3.5 開発環境から ...

[C#]Genericsの使い方をまとめてみた。その1

1 はじめに2 Genericsとは3 Genericsの例3.1 Genericsを使わない場合3.2 Genericsを使う場合4 Genericsのメリット5 さいごに6 おすすめ書籍 はじめに ...

[Flutter] CustomPaintという選択肢

1 はじめに2 CustomPaint2.1 drawLine2.2 drawRect2.3 drawCircle2.4 drawPath3 さいごに4 おすすめ書籍 はじめに Flutterで用意さ ...

swift

[Swift]ログフレームワーク「CocoaLumberjack」をSwiftで使ってみた

1 はじめに2 準備3 実装3.1 出力先の設定3.2 ログの出力レベルを設定する3.3 ログの出力4 さいごに はじめに こんにちは、nukkyです。 今回はログ管理に便利なライブラリ「CocoaL ...

swift

iOSで画像の任意の場所をぼかし処理する方法

1 はじめに1.1 前提条件2 準備3 実装3.1 ぼかし処理のイメージ画像3.2 サンプルコード4 さいごに はじめに iOSで写真の任意の場所にぼかし処理をしたいケースがありましたので、 iOSで ...

フォロー

blog-page_side_responsive

2021年8月
1234567
891011121314
15161718192021
22232425262728
293031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。