UIBlurEffect.Styleの一覧

iOS
目次

概要

UIVisualEffectView を用いて磨りガラスのようなぼかし（Blur）表示を実装することができます。
iOSデバイスではロック画面、コントロールセンターなど様々な場所で実装されています。
Blurの種類は数多く、様々な表現を行うことが出来ます。
Apple公式ドキュメントでは、ビジュアル的にわかりにくいため一覧でどのような表現が可能かわかりやすくしました。

UIBlurEffect.Styleの種類

現在では数多くのStyleがありますが、StyleによってはサポートOSの制限などがあります。ここでは、主にiOSで使用することを想定し、どのような表現が可能かを見ていきます。
  • Additional Styles
    • extraLight: iOS 8+
    • light: iOS 8+
    • dark: iOS 8+
    • extraDark: iOSはサポートしていない（tvOS 10.0+のみ）
    • regular: iOS 10+
    • prominent: iOS 10+
  • Adaptable Styles
    • systemUltraThinMaterial: iOS 13+
    • systemThinMaterial: iOS 13+
    • systemMaterial: iOS 13+
    • systemThickMaterial: iOS 13+
    • systemChromeMaterial: iOS 13+
  • Light Styles
    • systemUltraThinMaterialLight: iOS 13+
    • systemThinMaterialLight: iOS 13+
    • systemMaterialLight: iOS 13+
    • systemThickMaterialLight: iOS 13+
    • systemChromeMaterialLight: iOS 13+
  • Dark Styles
    • systemUltraThinMaterialDark: iOS 13+
    • systemThinMaterialDark: iOS 13+
    • systemMaterialDark: iOS 13+
    • systemThickMaterialDark: iOS 13+
    • systemChromeMaterialDark: iOS 13+

Sampleの構造

一覧にするサンプルアプリは下記のように、
UIImageView① > UIVisualEffectView > UIImageView②の構造になっており、UIImageView①は下記サンプルコードのような実装となっています。 
// UIImageView①
let imageView = UIImageView()
imageView.contentMode = .scaleToFill
imageView.clipsToBounds = true

Additional Styles

extraLight

light

dark

regular

prominent

Adaptable Styles

systemUltraThinMaterial

systemThinMaterial

systemMaterial

systemThickMaterial

systemChromeMaterial

Light Styles

systemUltraThinMaterialLight

systemThinMaterialLight

systemMaterialLight

systemThickMaterialLight

systemChromeMaterialLight

Dark Styles

systemUltraThinMaterialDark

systemThinMaterialDark

systemMaterialDark

systemThickMaterialDark

systemChromeMaterialDark

Sample code

let blurEffect = UIBlurEffect(style: .light)
let blurView = UIVisualEffectView(effect: blurEffect)
addSubView(blurView)
最新情報をチェックしよう！