iPhone屏幕圆角continuous corner

普通圆角与连续圆角

1.通过设置layer的cornerRaidus实现圆角(图1

btnview.layer.cornerRadius = 45

图1

2.设置layer的cornerCurve(图2
cornerCurve是iOS13新增的属性,有两个值, circular单一的圆角和continuous连续的圆角

btnview.layer.cornerRadius = 45
btnview.clipsToBounds = true

图2

3.通过贝塞尔曲线实现圆角(图3

let bep = UIBezierPath.init(roundedRect: .init(x: 0, y: 0, width: width, height: 100), byRoundingCorners: [.bottomLeft] , cornerRadii: .init(width: 45, height: 45))
let layer = CAShapeLayer.init()
layer.frame = .init(x: 0, y: 0, width: width, height: 100)
layer.path = bep.cgPath
btnview.layer.mask = layer

图3

图2和图3就是连续的圆角效果

但是UIBezierPath只有roundedRect可以生成连续圆角的CGPath,拼接BezierPath添加的arc是真正的圆弧,不是连续圆角,因此如果想在一个layer上实现不同半径的连续圆角,可能很麻烦
不过视觉上其实看不太出来,除非像是开头的gif那样对比

这个例子是常规的方法,画了四个圆角,看上去也基本和屏幕对齐了

func getbtnview(_ type:Int) -> UIView{
            let width = (screenWidth - 30.0) / 2.0
            let btnview = UIView.init()
//            let bep = UIBezierPath.init(roundedRect: .init(x: 0, y: 0, width: width, height: 100), byRoundingCorners: type == 0 ? [.bottomLeft] : [.bottomRight], cornerRadii: .init(width: 45, height: 45))
            let bep = UIBezierPath.init()
            bep.move(to: .init(x: 5, y: 0))
            bep.addArc(withCenter: .init(x: 5, y: 5), radius: 5, startAngle: .pi/2, endAngle: .pi, clockwise: false)
            if type == 0{
                bep.addLine(to: .init(x: 0, y: 15))
                bep.addArc(withCenter: .init(x: 45, y: 15), radius: 45, startAngle: .pi, endAngle: .pi/2, clockwise: false)
                bep.addLine(to: .init(x: width - 5, y: 60))
                bep.addArc(withCenter: .init(x: width - 5, y: 55), radius: 5, startAngle: .pi*1.5, endAngle: .pi*2, clockwise: false)
            }else{
                bep.addLine(to: .init(x: 0, y: 55))
                bep.addArc(withCenter: .init(x: 5, y: 55), radius: 5, startAngle: .pi, endAngle: .pi/2, clockwise: false)
                bep.addLine(to: .init(x: width - 45, y: 60))
                bep.addArc(withCenter: .init(x: width - 45, y: 15), radius: 45, startAngle: .pi*1.5, endAngle: .pi*2, clockwise: false)
            }
            bep.addLine(to: .init(x: width, y: 5))
            bep.addArc(withCenter: .init(x: width - 5, y: 5), radius: 5, startAngle: .pi*2, endAngle: .pi*1.5, clockwise: false)
            bep.addLine(to: .init(x: 5, y: 0))
            let layer = CAShapeLayer.init()
            layer.frame = .init(x: 0, y: 0, width: width, height: 100)
            layer.path = bep.cgPath
            btnview.layer.mask = layer
            view.addSubview(btnview)
            btnview.snp.makeConstraints { make in
                if type == 0{
                    make.leading.equalToSuperview().offset(10)
                }else{
                    make.trailing.equalToSuperview().offset(-10)
                }
                make.bottom.equalToSuperview().offset(-10)
                make.width.equalTo(width)
                make.height.equalTo(60)
            }
            return btnview
        }

绘制贝塞尔曲线