Skip to content

Instantly share code, notes, and snippets.

@morishin
Last active February 26, 2021 10:27
Show Gist options
  • Save morishin/0fe816eae8b54b9eba9c0b1967358054 to your computer and use it in GitHub Desktop.
Save morishin/0fe816eae8b54b9eba9c0b1967358054 to your computer and use it in GitHub Desktop.
Circular UIView with drop shadow (using UIBezierPath)
import UIKit
import PlaygroundSupport
let container = UIView(frame: CGRect(x: 0, y: 0, width: 500, height: 200))
container.backgroundColor = .lightGray
let buttonRadius: CGFloat = 50
let buttonSize = CGSize(width: buttonRadius * 2, height: buttonRadius * 2)
let buttonPath = UIBezierPath(arcCenter: CGPoint(x: buttonRadius, y: buttonRadius), radius: buttonRadius, startAngle: 0, endAngle: CGFloat.pi * 2, clockwise: true)
// only for shadow
let buttonBackgroundView = UIView(frame: CGRect(origin: .zero, size: buttonSize))
buttonBackgroundView.backgroundColor = .clear
buttonBackgroundView.center = container.center
buttonBackgroundView.layer.masksToBounds = false
buttonBackgroundView.layer.cornerRadius = buttonRadius
buttonBackgroundView.layer.shadowOffset = .zero
buttonBackgroundView.layer.shadowRadius = 5
buttonBackgroundView.layer.shadowOpacity = 0.5
buttonBackgroundView.layer.shadowPath = buttonPath.cgPath
container.addSubview(buttonBackgroundView)
// circle button view
let buttonView = UIView(frame: CGRect(origin: .zero, size: buttonSize))
buttonView.backgroundColor = .white
buttonView.frame.origin = .zero
let buttonShape = CAShapeLayer()
buttonShape.path = buttonPath.cgPath
buttonView.layer.mask = buttonShape
buttonBackgroundView.addSubview(buttonView)
PlaygroundPage.current.liveView = container
@azun-k
Copy link

azun-k commented Feb 12, 2020

Nice! thanks a lot.

@YogeshPateliOS
Copy link

YogeshPateliOS commented Feb 26, 2021

How to do semicircle UIView?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment