Safariでフォームを選択した時のようなPickerViewの配置

今回はSafariでフォームを選択した時のようなPickerView を配置する方法をかきたいと思います。

ナビゲーションバー無しの場合

画面を配置

今回は単純な実装にするためにDatePickerを置いた画面とそれを呼び出す画面にしています。
「Picker表示ボタン」からDatePickerを置いた画面をModalで呼び出すようにしています。

呼び出す側の画面は分かりやすいように背景色を着色、呼び出される側の画面は背景色をDefaultにしています。

一旦実行

これをそのまま実行してしまうと真っ黒の画面が表示されてしまいます。

ViewControllerを修正

呼び出す側のViewControllerを修正します。
呼び出す側のmodalPresentationStyleをUIModalPresentationCurrentContextに変更します。

ViewController.m

- (void)viewDidLoad
{
    [super viewDidLoad];
    // ↓のコードを追加
    self.modalPresentationStyle = UIModalPresentationCurrentContext;
}

あらためて実行

背景がちゃんと透過されて表示されます。

ナビゲーションバー有りの場合

画面を配置

ナビゲーションバー無しの場合と同じような構成で画面を配置します。
今回も「Picker表示ボタン」からDatePickerを置いた画面をModalで呼び出すようにしています。
呼び出す側の画面は分かりやすいように背景色を着色、呼び出される側の画面は背景色をDefaultにしています。

そのまま実行

ナビゲーションバー無しの場合と同じように黒画面が表示されてしまいます。

ソースを修正

ナビゲーションバー有りの場合は呼び出す側のViewControllerを以下のように修正します。
ナビゲーションバー無しの場合と違って navigationControllerのmodalPresentationStyle を変更します。

NaviViewController.m

- (void)viewDidLoad
{
    [super viewDidLoad];
    // ↓のコードを追加
    self.navigationController.modalPresentationStyle = UIModalPresentationCurrentContext;
}

あらためて実行

背景がちゃんと透過されて表示されます!

まとめ

今回は中のデータを用意するコードまで説明出来ないのでDatePickerを使用しました。
PickerViewや他のUIパーツを配置するViewの背景を透明にする場合にも使用出来るかと思います。