OC版写法在个人主页OC集合中
由于使用masksToBounds切圆角时投影的效果会消失,所以这里的思路是通过layer来设置。
Simulator Screen Shot - iPhone 12 - 2022-01-21 at 17.07.48.png
如上图所示,接下来分别实现无边框阴影、渐变背景色+圆角阴影和边框圆角阴影
以下属性可根据自身需求进行相应调整:
shadowColor // 阴影颜色
shadowOffset // 阴影偏移量
shadowOpacity // 阴影透明度
shadowRadius // 阴影半径
如上图(1-1),无边框阴影效果实现:
lazy var bgView: UIView = {
let view = UIView()
view.frame = CGRect(x: 50, y: 200, width: UIScreen.main.bounds.size.width-100, height: 100)
return view
}()
view.addSubview(bgView)
setViewShadow(curView: bgView)
func setViewShadow(curView: UIView) {
curView.backgroundColor = .white
curView.layer.shadowColor = UIColor(red: 129/255.0, green: 174/255.0, blue: 254/255.0, alpha: 0.28).cgColor
curView.layer.shadowOffset = CGSize(width: 0, height: 2)
curView.layer.shadowOpacity = 1
curView.layer.shadowRadius = 14
curView.layer.cornerRadius = 4
}
如上图(1-2),渐变背景色+圆角阴影效果实现:
lazy var loginBtn : UIButton = {
let btn = UIButton()
btn.frame = CGRect(x: 50, y: bgView.frame.maxY+50, width: UIScreen.main.bounds.size.width-100, height: 50)
btn.setTitle("登录", for: .normal)
btn.setTitleColor(.white, for: .normal)
return btn
}()
view.addSubview(loginBtn)
setViewColorShadow(curView: loginBtn)
func setViewColorShadow(curView: UIView) {
// 渐变色设置
let gradient = CAGradientLayer()
gradient.colors = [UIColor(red: 0.04, green: 0.71, blue: 1, alpha: 1).cgColor, UIColor(red: 0.29, green: 0.35, blue: 1, alpha: 1).cgColor]
gradient.locations = [0, 1]
/*
注意: 若是用的xib布局发现宽/高不匹配,可重置gradient.frame = CGRect(x: 0, y: 0, width: view的宽度, height: view的高度)
*/
gradient.frame = curView.bounds
gradient.startPoint = CGPoint(x: 0, y: 0)
gradient.endPoint = CGPoint(x: 1, y: 1)
//圆角阴影设置
gradient.shadowColor = UIColor(red: 0.2, green: 0.71, blue: 1, alpha: 0.4).cgColor
gradient.shadowOffset = CGSize(width: 0, height: 6)
gradient.shadowOpacity = 1
gradient.shadowRadius = 7
gradient.cornerRadius = curView.bounds.size.height*0.5
curView.layer.addSublayer(gradient)
}
如上图(1-3),边框圆角阴影效果实现:
lazy var borderBtn : UIButton = {
let btn = UIButton()
btn.frame = CGRect(x: 100, y: loginBtn.frame.maxY+50, width: UIScreen.main.bounds.size.width-200, height: 50)
btn.setTitle("获取验证码", for: .normal)
btn.setTitleColor(UIColor(red: 2/255.0, green: 116/255.0, blue: 223/255.0, alpha: 1.0), for: .normal)
return btn
}()
view.addSubview(borderBtn)
setViewBorderShadow(curView: borderBtn)
func setViewBorderShadow(curView: UIView) {
curView.backgroundColor = .white
curView.layer.shadowColor = UIColor(red: 0.2, green: 0.57, blue: 1, alpha: 0.2).cgColor
curView.layer.shadowOffset = CGSize(width: 0, height: 6)
curView.layer.shadowOpacity = 1
curView.layer.shadowRadius = 3
curView.layer.borderWidth = 1
curView.layer.borderColor = UIColor(red: 0.2, green: 0.57, blue: 1, alpha: 1.0).cgColor
curView.layer.cornerRadius = curView.bounds.size.height*0.5
}