iOS创建半透明ViewController

feature-transparent-modal

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

UX

1. 创建分享界面ViewController

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

2. 设计界面

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

shareview-design

3. 设置转场

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

setsegue

modalset

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

4. ShareViewController背景颜色设置

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

Screen Shot 2016-02-21 at 12.27.25 PM

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

Screen Shot 2016-02-21 at 12.29.53 PM

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

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

5. ViewController属性设置

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

Screen Shot 2016-02-21 at 12.34.20 PM

首先,打开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的

Screen Shot 2016-02-21 at 12.42.02 PM

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

Screen Shot 2016-02-21 at 12.40.54 PM

 

6. 设置关闭按钮

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

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

    @IBAction func close(segue: UIStoryboardSegue){

    }

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

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)

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

Screen Shot 2016-02-21 at 12.59.00 PM

打赏

Leave a Reply

Your email address will not be published. Required fields are marked *