ios - 在填充的白色圆圈 (UIButton) 内创建一个黑色细圆圈(未填充)

Question

我正在尝试复制 iOS 设备上的默认相机按钮:

我能够创建一个白色圆形按钮，其中包含黑色按钮。然而，黑色按钮也被填充，而不仅仅是一个细圆圈。

这就是我所拥有的(大部分是从不同来源复制并放在一起的，所以代码效率不高)

对象代表按钮，

func applyRoundCorner(_ object: AnyObject) {
    //object.layer.shadowColor = UIColor.black.cgColor
    //object.layer.shadowOffset = CGSize(width: 0.0, height: 2.0)
    object.layer.cornerRadius = (object.frame.size.width)/2
    object.layer.borderColor = UIColor.black.cgColor
    object.layer.borderWidth = 5
    object.layer.masksToBounds = true
    //object.layer.shadowRadius = 1.0
    //object.layer.shadowOpacity = 0.5

    var CircleLayer   = CAShapeLayer()
    let center = CGPoint (x: object.frame.size.width / 2, y: object.frame.size.height / 2)
    let circleRadius = object.frame.size.width / 6
    let circlePath = UIBezierPath(arcCenter: center, radius: circleRadius, startAngle: CGFloat(M_PI), endAngle: CGFloat(M_PI * 2), clockwise: true)
    CircleLayer.path = circlePath.cgPath
    CircleLayer.strokeColor = UIColor.black.cgColor
    //CircleLayer.fillColor = UIColor.blue.cgColor
    CircleLayer.lineWidth = 1
    CircleLayer.strokeStart = 0
    CircleLayer.strokeEnd  = 1
    object.layer.addSublayer(CircleLayer)
}

Answer 1

基本方法

您可以这样做(出于演示目的，我会使用 playground 以编程方式制作按钮):

let buttonWidth = 100.0

let button = UIButton(frame: CGRect(x: 0, y: 0, width: buttonWidth, height: buttonWidth))
button.backgroundColor = .white
button.layer.cornerRadius = button.frame.width / 2

绘图部分:

因此，在添加按钮并进行所需的设置(使其成为圆形)之后，这里是您可以在其中绘制圆圈的部分方法:

let circlePath = UIBezierPath(arcCenter: CGPoint(x: buttonWidth / 2,y: buttonWidth / 2), radius: 40.0, startAngle: 0, endAngle: CGFloat.pi * 2, clockwise: true)

let circleLayer = CAShapeLayer()
circleLayer.path = circlePath.cgPath
circleLayer.fillColor = UIColor.clear.cgColor
circleLayer.strokeColor = UIColor.black.cgColor
circleLayer.lineWidth = 2.5

// adding the layer into the button:
button.layer.addSublayer(circleLayer)

_{circleLayer.fillColor = UIColor.clear.cgColor 可能是您缺少的部分 🙂。}

因此:

---

回到你的案例:

旁白栏提示:

为了实现applyRoundCorner，我建议让它只有将 View 取圆的工作，然后创建另一个函数来在 View 中添加圆。这是为了避免任何命名冲突，这意味着在阅读“applyRoundCorner”时，我不会假设它也会在我的 View 中添加圆圈!所以:

func applyRoundedCorners(for view: UIView) {
    view.layer.cornerRadius = view.frame.size.width / 2
    view.layer.borderColor = UIColor.white.cgColor
    view.layer.borderWidth = 5.0
    view.layer.masksToBounds = true
}

func drawCircle(in view: UIView) {
    let circlePath = UIBezierPath(arcCenter: CGPoint(x: view.frame.size.width / 2,y: view.frame.size.width / 2),
                                             radius: view.frame.size.width / 2.5,
                                             startAngle: 0,
                                             endAngle: CGFloat.pi * 2,
                                             clockwise: true)

    let shapeLayer = CAShapeLayer()
    shapeLayer.path = circlePath.cgPath
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.strokeColor = UIColor.black.cgColor
    shapeLayer.lineWidth = 2.5

    button.layer.addSublayer(shapeLayer)
}

现在:

applyRoundedCorners(for: button)
drawCircle(in: button)

这似乎更好。从另一个方面来看，考虑到您希望使 View 成为圆形而不在其中添加一个圆圈，使用分离的方法您可以简单地applyRoundedCorners(for: myView)而不有必要在其中添加一个圆圈。

---

此外:

如您所见，我将 AnyObject 更改为 UIView，这似乎更符合您的情况。所以我们可以做一件很酷的事情:

extension UIView {
    func applyRoundedCorners(for view: UIView) {
        view.layer.cornerRadius = view.frame.size.width / 2
        view.layer.borderColor = UIColor.white.cgColor
        view.layer.borderWidth = 5.0
        view.layer.masksToBounds = true
    }

    func drawCircle(in view: UIView) {
        let circlePath = UIBezierPath(arcCenter: CGPoint(x: view.frame.size.width / 2,y: view.frame.size.width / 2),
                                      radius: view.frame.size.width / 2.5,
                                      startAngle: 0,
                                      endAngle: CGFloat.pi * 2,
                                      clockwise: true)

        let shapeLayer = CAShapeLayer()
        shapeLayer.path = circlePath.cgPath
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.strokeColor = UIColor.black.cgColor
        shapeLayer.lineWidth = 2.5

        button.layer.addSublayer(shapeLayer)
    }
}

现在 applyRoundedCorners 和 drawCircle 都隐式包含到 UIView(这意味着 UIButton)，而不是将 button 传递给这些函数，您将能够:

button.applyRoundedCorners()
button.drawCircle()