【Swift4】UIBlurEffectを使ってぼかし効果を追加する

## 実行環境
【Xcode】Version 9.2
【Swift】Version 4.0.3

## 概要
通知センターやパスコード入力画面でよく見かける背景がぼけてる感じのあの効果です。
<img width="375" alt="securedownload.png" src="https://qiita-image-store.s3.amazonaws.com/0/238595/443e0a34-5cb0-a428-640b-7dd50805f37b.png">

## 実装
今回は、iOS８から実装された`UIBlurEffect`を使って実装します。

まず、画面サイズと同じ背景をUIimageを使ってセットしておきます。

<img width="375" alt="securedownload.png" src="https://qiita-image-store.s3.amazonaws.com/0/238595/8d8e129c-dd43-2552-324c-df61e7b5121a.png">

次に、ブラーエフェクトを施したエフェクトビューを画像の上に重ねます。

```ViewController.swift
override func viewDidLoad() {
    super.viewDidLoad()
        
    // ブラーエフェクトを作成
    let blurEffect = UIBlurEffect(style: .dark)
        
    // ブラーエフェクトからエフェクトビューを作成
    let visualEffectView = UIVisualEffectView(effect: blurEffect)
        
    // エフェクトビューのサイズを画面に合わせる
    visualEffectView.frame = self.view.frame

    // エフェクトビューを初期viewに追加
    self.view.addSubview(visualEffectView)
}
```

以上のコードだけでぼかし効果を追加できます。簡単ですね！

ちなみに、レイヤーはこんな感じです。

![bokashi_xcodeproj.png](https://qiita-image-store.s3.amazonaws.com/0/238595/b7446a62-3be2-24fd-cca1-8ceffa13bb66.png)

## UIBlurEffectのスタイル
UIBlurEffectのスタイルは以下の3つがあります。

### extraLight
<img width="375" alt="securedownload.png" src="https://qiita-image-store.s3.amazonaws.com/0/238595/7e0908a1-7a04-8139-cdb2-3c31311bb428.png">

### light
<img width="375" alt="securedownload.png" src="https://qiita-image-store.s3.amazonaws.com/0/238595/57eda794-4674-2ffa-de05-c724e805eb42.png">

### dark
<img width="375" alt="securedownload.png" src="https://qiita-image-store.s3.amazonaws.com/0/238595/9ca8656e-240b-bd31-5041-1d6b0a7ecb42.png">

## おまけ
現在時間と日付を追加して、通知センターぽくしてみる。

```ViewController.swift
override func viewDidLoad() {
    super.viewDidLoad()
        
    // ブラーエフェクトを作成
    let blurEffect = UIBlurEffect(style: .dark)
        
    // ブラーエフェクトからエフェクトビューを作成
    let visualEffectView = UIVisualEffectView(effect: blurEffect)
        
    // エフェクトビューをviewに追加する
    visualEffectView.frame = self.view.frame
    self.view.addSubview(visualEffectView)
        
    // 時間を設定
    let now = Date()
    let timeFormat = DateFormatter()
    timeFormat.timeStyle = .short
    timeFormat.locale = Locale(identifier: "ja_JP")
    
    // 時間を追加
    let timeLabel = UILabel()
    timeLabel.textColor = UIColor.white
    timeLabel.font = UIFont(name: "PingFangHK-Ultralight", size: 90)
    timeLabel.text = timeFormat.string(from: now)
    timeLabel.sizeToFit()
    timeLabel.frame.origin.y = 80.0
    timeLabel.center.x = self.view.center.x
    self.view.addSubview(timeLabel)
        
    // 日付を設定
    let dateFormat = DateFormatter()
    dateFormat.dateStyle = .full
    dateFormat.locale = Locale(identifier: "ja_JP")
        
    // 日付を追加
    let dateLabel = UILabel()
    dateLabel.textColor = UIColor.white
    dateLabel.font = UIFont(name: "PingFangHK-Light", size: 16)
    dateLabel.text = dateFormat.string(from: now)
    dateLabel.sizeToFit()
    dateLabel.frame.origin.y = timeLabel.frame.maxY
    dateLabel.center.x = self.view.center.x
    self.view.addSubview(dateLabel)
}
```
<img width="375" alt="securedownload.png" src="https://qiita-image-store.s3.amazonaws.com/0/238595/bd7ce71c-3e8e-5df3-590f-9afabcbf31e5.png">