Swift实现圆角、阴影和边框共存

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
    }

你可能感兴趣的:(Swift实现圆角、阴影和边框共存)