24
20

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Modal 表示中の UIViewController 越しに UIVisualEffectView を使う

Last updated at Posted at 2014-12-09

12/9 の記事を @jarinosuke が書かせて頂きます。

blur_modal_gif.gif

UIModalPresentationStyle

UIViewController には presentationStyle というプロパティがあり、ここに指定の値を入れることにより presentViewController:animated:completion で表示された場合に UIViewController はその Presentation Style に習った表示のされ方をします。

iOS 8 からこの UIModalPresentationStyleUIModalPresentationOverFullScreen が加わりました。
説明を読んでみると、

A view presentation style in which the presented view covers the screen. The views beneath the presented content are not removed from the view hierarchy when the presentation finishes. So if the presented view controller does not fill the screen with opaque content, the underlying content shows through.

とあります。

今までの Presentation Style では表示のアニメーションが終わったと同時に後ろの UIViewController の View は表示されなくなっていたのですが、この Presentation Style を表示される側に指定することで表示する側の View も後ろ側で表示されたままになります。

なので、表示された側の View を透かしてあげることで後ろ側の View が見えて来るというわけになります。

Sample

GitHub に上記を実装したコードをあげました。とても短いので是非見てみて下さい。

jarinosuke/ModalBlurSample

主なポイントは二つだけです。

1.表示する UIViewController の presentationStyle を指定する

blurModalViewController.modalPresentationStyle = .OverFullScreen

2.表示された UIViewController の View を透かしてあげる

self.view.backgroundColor = .clearColor()
        
let visuaEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light))
visuaEffectView.frame = self.view.bounds
self.view.addSubview(visuaEffectView)

これだけで今まではややこしかった UIViewController をまたいだ view の表示ができるようになります。

参考

jarinosuke/ModalBlurSample

Using UIVisualEffectView in a Modal View Controller

UIModalPresentationStyle

24
20
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
24
20

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?