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

免責聲明！