在Uift中为swi集合视图创建一个Arc

Question

您好我想在ios swift中创建以下视图以添加UIcollection视图，我该如何实现？

我当前要绘制的代码是返回圆圈视图

@IBInspectable public var fillColor: UIColor = #colorLiteral(red: 0.8078431487, green: 0.02745098062, blue: 0.3333333433, alpha: 1)    { didSet { setNeedsLayout() } }
@IBInspectable public var strokeColor: UIColor = #colorLiteral(red: 0.9254902005, green: 0.2352941185, blue: 0.1019607857, alpha: 1)  { didSet { setNeedsLayout() } }
@IBInspectable public var lineWidth: CGFloat = 0     { didSet { setNeedsLayout() } }

lazy private var shapeLayer: CAShapeLayer = {
    let _shapeLayer = CAShapeLayer()
    self.layer.insertSublayer(_shapeLayer, at: 0)
    return _shapeLayer
}()

override func layoutSubviews() {
    super.layoutSubviews()

    let center = CGPoint(x: bounds.midX, y: bounds.midY)
    let radius = (min(bounds.size.width, bounds.size.height) - lineWidth) / 2
    shapeLayer.path = UIBezierPath(arcCenter: center, radius: radius, startAngle: 0, endAngle: 90, clockwise: true).cgPath
    shapeLayer.fillColor = fillColor.cgColor
    shapeLayer.strokeColor = strokeColor.cgColor
    shapeLayer.lineWidth = lineWidth



}

Answer 1

尝试此操作并根据需要设置角度

  let circlePath = UIBezierPath(arcCenter: CGPoint(x: 100,y: 100), radius: CGFloat(20), startAngle: CGFloat(0), endAngle:CGFloat(Double.pi / 2), clockwise: true)

  let shapeLayer = CAShapeLayer()
  shapeLayer.path = circlePath.cgPath

  //change the fill color
  shapeLayer.fillColor = UIColor.clear.cgColor
  //you can change the stroke color
  shapeLayer.strokeColor = UIColor.red.cgColor
  //you can change the line width
  shapeLayer.lineWidth = 3.0

  view.layer.addSublayer(shapeLayer)

Answer 2

您可以使用BezierPath在视图中绘制圆弧。在集合视图单元格中添加此arcView。

让我们看看ArcView：

class ArcView : UIView {

override init(frame: CGRect) {
    super.init(frame: frame)
    backgroundColor = .white
}

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

override func draw(_ rect: CGRect) {
    super.draw(rect)
    createArc(rect: rect)
}

private func createArc(rect : CGRect) {

    let center = CGPoint(x: rect.width/2, y: rect.height/2)
    let lineWidth : CGFloat = 50.0
    let radius = rect.width / 2 - lineWidth
    let startingAngle = CGFloat(-10.0/180) * CGFloat.pi
    let endingAngle = CGFloat(-80/180.0) * CGFloat.pi
    let bezierPath = UIBezierPath(arcCenter: center, radius: radius, startAngle: startingAngle , endAngle: endingAngle, clockwise: false)
    bezierPath.lineWidth = lineWidth
    UIColor(red: 249/255.0, green: 179/255.0, blue: 127/255.0, alpha: 1.0).setStroke()
    bezierPath.stroke()
}
}

圆弧的中心是视图的中间。     沿逆时针方向将弧度从-10度绘制到-80度。

在ViewController的视图层次结构中添加ArcView（您将在collectionView单元格中添加此视图）

 import UIKit

 class ViewController: UIViewController {

     private var arcView : ArcView!

     override func viewDidLoad() {
        super.viewDidLoad()

        arcView = ArcView(frame: view.frame)
        view.addSubview(arcView)
        arcView.setNeedsDisplay()
     }

   }

输出：

The sample code is here