[SwiftUI] どうせなら、かっこよく、Glassmorphism

#はじめに
SwiftUIはカスタマイズも簡単なので、色々なUIデザインを試してみることができます。そこで今回はGlassmorphism風のUI作りを紹介していきます。

#Glassmorphismって？
簡単にいうと、すりガラス風のUIのことです。こちらのサイトはCSS用のものですが見ていただければ大体のイメージはつかんでもらえるかと思います。

Glassmorphism CSS Generator

#できたもの
まずは完成品をご覧ください。プロのデザイナー！というわけではないのでちょっと不十分なところもありますが、SwiftUIだけでとりあえずこんなものができます。

#コードと使い方
##半透明の背景

GlassBackGround.swift

import SwiftUI

struct GlassBackGround: View {
    
    let width: CGFloat
    let height: CGFloat
    let color: Color
    
    var body: some View {
        ZStack{
            RadialGradient(colors: [.clear, color],
                           center: .center,
                           startRadius: 1,
                           endRadius: 100)
                .opacity(0.6)
            Rectangle().foregroundColor(color)
        }
        .opacity(0.2)
        .blur(radius: 2)
        .cornerRadius(10)
        .frame(width: width, height: height)
    }
}

RadialGradientとRectangleを重ね、透明度もちょっとずらしています。もう少しスマートな解決法があるような気もしますが、色々と試行錯誤した結果、これが一番上のサイトのような見た目に近くなりました。

##使い方

GlassView.swift

import SwiftUI

struct GlassView: View {
    
     var body: some View {
            VStack {
                Image(systemName: "person.circle")
                    .font(.largeTitle)
                Text("Glass")
            }.foregroundColor(.white)
                .background(
                    GlassBackGround(width: 100, height: 100, color: .black)
                        .shadow(color: .black, radius: 2, x: 2, y: 2)
                )
    }
}

背景をグラデーションにしたり、パターンの模様をつけておいたりすると透けている感じがよくわかります。GlassPlaceHolderの上に表示するものには影をつけていませんが、これは上記のサイトの見本を参考にしたものです。

#まとめ
SwiftUIそのままよりも格段にカッコイイデザインになりました。アプリの背景やUIの配置によって細かい設定を変えた方が良い時もありますが、大体は上のコードくらいで対応できそうです。

立体感のある画面を作れるのがGlassmorphismのいいところで、個人的には結構お気に入りです。みなさんもぜひ挑戦してみてください。

#　

作成中のアプリなどは以下に掲載しているので、よかったらこちらもよろしくお願いします☺️

Twitter

note