1
4

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 3 years have passed since last update.

超簡単にViewの背景をぼかす方法【iOS開発】

Posted at

#背景をぼかしたい!!
背景をぼかしたいなーと思った時にはUIVisualEffectViewを使うと思うんですけど、ぼかす処理を毎回書くのがめんどくさい!!
というわけで超簡単に背景ぼかしができるextensionを作りましょう

#extensionを書く!
新しいファイルを作ってこれを書きましょう!

addVisualEffect.swift
import UIKit

extension UIView {
    func addVisualEffect() {
        //スクリーンサイズ取得!
        let width = UIScreen.main.bounds.size.width
        let height = UIScreen.main.bounds.size.height
        
        //ブラーエフェクト生成!
        let blurEffect = UIBlurEffect(style: .light)
         
        //ブラーエフェクトからエフェクトビューを生成!
        let visualEffectView = UIVisualEffectView(effect: blurEffect)
         
        //エフェクトビューのサイズ指定!
        visualEffectView.frame = CGRect(x: 0, y: 0, width: width, height: height)
         
        //もとのViewにaddSubView!!
        self.addSubview(visualEffectView)
        
        //重ね順を一番下に!!
        self.sendSubviewToBack(visualEffectView)
    }
}

ポイントはサイズをしっかり合わせるところと重ね順を一番下にすることですかね!

あ、そういえばブラーエフェクトには種類があるんですよ
(ここに詳しく書いてありました! -> https://dev.classmethod.jp/references/ios8-uivisualeffectview/
extraLightとlightとdartの3種類です!
だから引数を指定してあげればもっと使い勝手良くなる気がします
僕はlightしか使わないのでこれでいきます!

#実際に使う!

ViewController.swift
    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.addVisualEffect()
    }

たったこれだけで背景をぼかすことができるんです!!便利!!

#最後に
メモ程度の記事に最後までつきあってくれてありがとうございます
是非使ってみてください!!

環境:Xcode11.6(11E708)

1
4
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
1
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?