Ask Your Question
4

Using UIBezierPath, what is the method for creating a card view that features half circles on both the left and right sides?

asked 2021-04-20 11:00:00 +0000

qstack gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted
3

answered 2021-06-26 19:00:00 +0000

lakamha gravatar image

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.

edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer


Question Tools

Stats

Asked: 2021-04-20 11:00:00 +0000

Seen: 8 times

Last updated: Jun 26 '21