Help us understand the problem. What is going on with this article?

iOS13のモーダルはFullscreenもいいけどCurrentContextも検討してみて

iOS13からモーダルを表示するときはセミモーダルがデフォルトの挙動となりました。
スクリーンショット 2019-10-20 20.02.06.png
完全なフルスクリーンではなく後ろのViewが少し見えるようなデザインで、下にスワイプで元のViewに戻ることができます。

これをされると困るデザインがあります。例えばログイン後に表示されるViewはセミモーダルではなくフルスクリーンで表示したいでしょう。

StoryboardからPresentationをFullscreenにすることで次のモーダルを完全なフルスクリーン状態で遷移できます。
スクリーンショット 2019-10-20 20.06.52.png

Swiftの場合はこうします。

let vc = ViewController()
vc.modalPresentationStyle = .fullScreen
present(vc, animated: true)

スクリーンショット 2019-10-20 20.09.27.png
この状態であればスワイプで戻ることもできません。
ここまでであればあまり問題はなさそうに見えます。

さらにModalで遷移したいとき

ここからさらにモーダルを表示したいとします。このときはセミモーダルのほうが利便性があがるので普通の遷移にします。
するとどうでしょう。

スクリーンショット 2019-10-20 20.12.18.png
なんと後ろのViewが下がらないままセミモーダルが出てしまいました。

iOS13においてfullscrrenでモーダル表示したものはずっとfullscreenの状態を維持するのでこのような動きになるようです。
でもこれじゃかっこよくない!下がってほしい!というときはCurrent Contextを使ってみます。

先ほどのFullscrrenからCurrent Contextに変更します。するとStoryboard上では灰色はフルスクリーンで、その次のモーダルでは灰色Viewが下にずれているのが確認できます。
(よく見ると上のStoryboardでもFullscreen選択時のモーダルの見え方はシミュレートされていましたね)
スクリーンショット 2019-10-20 20.15.10.png

ではこれで解決!かと思いきや実際実行してみると・・・

スクリーンショット 2019-10-20 20.17.49.png
なんと今度はステータスバーが全く見えなくなってしまいました。

CurrentContext時にStatusBarを見えるようにする

これは推測ですが、CurrentContextによって諸々の状態を参照する先が灰色のViewになっているのだと思われます。灰色Viewの時点ではステータスバーは黒色テキストなので、モーダル遷移後も灰色Viewからステータスバーの情報を取得していると考えると、黒の背景に黒のテキストとなってしまい見えなくなってしまったものと考えられます。

これを回避するにはViewController毎にステータスバーの色は何色にすべきかという情報を設定します。

灰色のViewControllerにpreferredStatusBarStyleプロパティをオーバーライドします。

class ViewController: UIViewController {
    override var preferredStatusBarStyle: UIStatusBarStyle {
        if presentedViewController != nil {
            return .lightContent
        } else {
            return super.preferredStatusBarStyle
        }
    }
}

presentedViewControllerは現在のViewController(灰色)からみてさらにモーダル表示しているViewControllerがあればそのViewControllerが、なければnilが返ってきます。
つまりpresentedViewControllerがnilでないなら何かしらモーダルを表示しているということです。
このときはステータスバーを白とし、それ以外はデフォルトの挙動としました。
ここを拡張することでもう少し細かな要望にも応えることができます。例えば次のModalもフルスクリーンだったらデフォルト挙動にするとかですね。

青色のViewControllerのpreferredStatusBarStyleは参照されませんでした。これもCurrentContextが影響していると考えられます。

これでめでたくセミモーダル時にステータスバーが白になりました。
スクリーンショット 2019-10-20 20.22.55.png

kuluna
hachidoriinc
「すべての人に、価値ある仕事を」先端技術と上手く共存し、すべての人が、人間にしかできない「価値ある」仕事に集中できる世界を作りたい。そんな思いでhachidoriはサービスを提供しています。
https://hachidoriinc.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした