Revision history [back]

Here's an example code snippet for creating a card view with half circles on both sides:

let cardView = UIView(frame: CGRect(x: 50, y: 50, width: 200, height: 100))

// Create a UIBezierPath for the left half circle
let leftPath = UIBezierPath(arcCenter: CGPoint(x: 0, y: cardView.bounds.height/2),
                             radius: cardView.bounds.height/2,
                             startAngle: .pi/2,
                             endAngle: .pi*3/2,
                             clockwise: true)

// Create a UIBezierPath for the right half circle
let rightPath = UIBezierPath(arcCenter: CGPoint(x: cardView.bounds.width, y: cardView.bounds.height/2),
                              radius: cardView.bounds.height/2,
                              startAngle: .pi*3/2,
                              endAngle: .pi/2,
                              clockwise: true)

// Combine the paths and add a rectangular path for the center of the view
let path = UIBezierPath()
path.append(leftPath)
path.addLine(to: CGPoint(x: cardView.bounds.width, y: 0))
path.addLine(to: CGPoint(x: cardView.bounds.width, y: cardView.bounds.height))
path.addLine(to: CGPoint(x: 0, y: cardView.bounds.height))
path.close()
path.append(rightPath)

// Create a CAShapeLayer and set its path to the UIBezierPath
let shapeLayer = CAShapeLayer()
shapeLayer.path = path.cgPath
cardView.layer.mask = shapeLayer

This snippet creates a UIView with a frame of (50, 50, 200, 100). Two UIBezierPath objects are created - one for the left half circle and one for the right half circle - both of which are added to a UIBezierPath that also includes a rectangular path for the center of the view. Finally, a CAShapeLayer is created with the combined UIBezierPath and set as the mask for the UIView. This results in a view with half circles on both the left and right sides.