iOS创建半透明ViewController

昨天在写MikeTech iPhone app的时候，写到分享页面的时候，想要设计一种半透明的视图，当点击文章底部toolbar的分享图标的时候，分享的视图就从底部飞入到整个屏幕，而且背景为半透明。这篇博客将会介绍如何实现这一设计

1. 创建分享界面ViewController

分享界面当然也是一个View了，所以当然需要ViewController，在StoryBoard中拖拽出一个新的ViewController出来，并且在工程中新建一个叫做ShareViewController的CocoaTouch文件，继承自，UIViewController。

2. 设计界面

当ShareViewController创建完成后我们就可以进行设计了，分析上面的成品，这个View一共有10个按钮（9个分享图标和一个关闭图标），为了方便为这9个图标排版，可以新建一个1：1的View作为父容器将9个分享图标放进去。当然，如果希望有背景模糊效果的，还需要再创建一个View，覆盖整个屏幕，并且位置要在刚才创建的分享图标容器View的下面才行，不然的话模糊效果会打在整个页面的最上面。。。

3. 设置转场

设计完成后就要开始设置Segue了，在StoryBoard中选中跳转前的ViewController的按钮，右键按住拖动至刚才建立的ShareViewController，在Segue类型中选择modal

选择转场类型为Modal而不是Push是为了让ShareViewController出现的时候是从屏幕下方向上弹出而不是从右滑动进入。Modal的默认效果就是让新的ViewController从屏幕的最底部往上钻，直到盖住之前的控制器为⽌。

4. ShareViewController背景颜色设置

说道透明背景，大多数人可能会想到通过设置Alpha值来调节透明度，可是这样的效果并不是很好，我的做法是调节父View背景颜色的Opacity，而不是调节View的Alpha

好了现在试一试效果看看背景有没有变成透明？

可惜并没有。。。在转场动画的时候的确新的ShareView的背景是透明的，是我们想要的效果，可是当动画过完了之后，背景又重新变成了灰色，好像看来刚才设置的Opacity并没有什么用。

不要着急，接下来在做进一步设置。

5. ViewController属性设置

我的app中是这么转场的，左边的这个WebViewController 通过Modal转场到右边的这个ShareViewController。

首先，打开WebViewController的 Attributes Inspector，选中Provides Context

Screen Shot 2016-02-21 at 12.36.43 PM

其次，在ShareViewController的的 Attributes Inspector中，选中Defines Context， 并且在Presentation中选择Over Full Screen，不然的话新的ShareViewController弹出时时不会覆盖住上一个ViewController的NavigationBar的

好了，现在再试一下我们要的效果有没有出来：

6. 设置关闭按钮

接下来就要编写关闭按钮的逻辑了，当点击关闭按钮时，创建的ShareViewController应该会消失，用户会再次看见Navigation Stack下面一层的界面，也就是WebViewController。

在WebViewController的代码中，加入以下代码

@IBAction func close(segue: UIStoryboardSegue){

}

然后回到StoryBoard，右键关闭按钮拖动到上面的Exit图标上, 在弹出的Segue Action对话框中，选择close:

在iOS9的模拟器中，这个做法确实可行，但是在我iOS 8.1.2的iPhone上却没有效果，之后我做了如下改动：

在ShareViewController中为这个Button添加一个Action

@IBAction func closeTap(sender: AnyObject) {

self.dismissViewControllerAnimated(true, completion: nil)

}

这样在iOS8中也可以达到效果。

7. 添加模糊效果

如果觉得这样不好看，特别在文字多的地方中显得比较凌乱的时候，我们可以为背景再加上模糊效果

在viewWillAppear() 方法中添加以下代码：
在ShareViewController中为我们在第二部中设置的rootView添加一个Outlet

let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Light)
let blueEffectView = UIVisualEffectView(effect: blurEffect)
blueEffectView.frame = view.bounds
rootView.addSubview(blueEffectView)

之后再运行即可实现模糊效果

iOS创建半透明ViewController

iOS创建半透明ViewController

免责声明！