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

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

More than 5 years have passed since last update.

今回はSafariでフォームを選択した時のようなPickerView を配置する方法をかきたいと思います。
iOSシミュレータのスクリーンショット 2013.12.17 21.50.07.png

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

画面を配置

今回は単純な実装にするためにDatePickerを置いた画面とそれを呼び出す画面にしています。
「Picker表示ボタン」からDatePickerを置いた画面をModalで呼び出すようにしています。
スクリーンショット 2013-12-17 21.26.23.png

呼び出す側の画面は分かりやすいように背景色を着色、呼び出される側の画面は背景色をDefaultにしています。
スクリーンショット 2013-12-17 21.28.28.png

一旦実行

これをそのまま実行してしまうと真っ黒の画面が表示されてしまいます。
iOSシミュレータのスクリーンショット 2013.12.17 21.28.54.png

ViewControllerを修正

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

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

あらためて実行

背景がちゃんと透過されて表示されます。
iOSシミュレータのスクリーンショット 2013.12.17 21.31.42.png

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

画面を配置

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

そのまま実行

ナビゲーションバー無しの場合と同じように黒画面が表示されてしまいます。
iOSシミュレータのスクリーンショット 2013.12.17 21.28.54.png

ソースを修正

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

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

あらためて実行

背景がちゃんと透過されて表示されます!
iOSシミュレータのスクリーンショット 2013.12.17 21.34.51.png

まとめ

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

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