Skip to content

Chaehui-Seo/CHGlassmorphismView

Repository files navigation

CHGlassmorphismView

frontPhoto

Glassmorphism is a design style using a background blur effect, which makes the view look like a floating translucent glass.

Requirements

  • iOS 11.0+

Installation

Swift Package Manager

Use Swift Package Manager by adding following line to Package.swift:

dependencies: [
 .package(url: "https://github.com/Chaehui-Seo/CHGlassmorphismView.git", from: "1.0.1")
]

Cocoapods

Use Cocoapods by adding following line to Podfile:

pod "CHGlassmorphismView", "~> 1.0.1"

Usage

Create glassmorphismView

METHOD #1
Import CHGlassmorphismView module in your viewController. Now, you can create glassmorphism view programmatically like code below.

import CHGlassmorphismView

let glassmorphismView = CHGlassmorphismView()

METHOD #2
Or make existing UIView as glassmorphism view by changing the Custom Class to CHGlassmorphismView

storyboard

Change customizing options

// MARK: - [Theme]
glassmorphismView.setTheme(theme: .light) // choose theme .light or .dark (default value is .light)
Light theme Dark theme
// MARK: - [Blur Density]
glassmorphismView.setBlurDensity(with: 0.5) // value from 0 to 1 is available (default value is 0.65)
Light theme Dark theme
Simulator Screen Recording - iPhone 11 - 2023-03-22 at 00 45 27 Simulator Screen Recording - iPhone 11 - 2023-03-22 at 00 45 54
// MARK: - [Corner Radius]
glassmorphismView.setCornerRadius(30) // change cornerRadius as you want (default value is 20)
// MARK: - [Shadow Radius (Shadow Spread)]
glassmorphismView.setDistance(30) // change shadowRadius(shadow spread) that makes a sense of distance  (default value is 20)

SampleApp

You can run SampleApp Project located in SampleApp folder. All the functions that provided by the package are testable through the SampleApp project.

Simulator Screen Recording - iPhone 11 - 2023-03-23 at 18 47 01

Caution

Be aware that any views underneath blurred view got affected by glassmorphism effect. That means if some views are inserted before blurred view, it would not be visible as expected. Do not insert any views at 0 if you don’t want the elements to be dimmed

// DO ⭕️
glassmorphismView.addSubview(yourOwnView)

// DO NOT ❌
glassmorphismView.insertSubview(yourOwnView, at: 0)