自定义iOS UIButton形状

Question

I'm trying to create a semi circle button as per wireframe.

But it's not turning out right.

This is the code I've written in C#:

PORCalculatorButton.Layer.CornerRadius = PORCalculatorButton.Layer.Bounds.Width / 2;
PORCalculatorButton.ClipsToBounds = true;
PORCalculatorButton.Layer.MaskedCorners = (CoreAnimation.CACornerMask)3;

There are layout constraints on the button too.

Can anyone tell me where I've gone wrong or if there's a better way? I'll accept any answers in ObjC, Swift or C# Thanks.

Answer 1

Try the below Code:

let circlePath = UIBezierPath.init(arcCenter: 
CGPointMake(PORCalculatorButton.bounds.size.width / 2, PORCalculatorButton.bounds.size.height), radius: PORCalculatorButton.bounds.size.height, startAngle: 0.0, endAngle: CGFloat(M_PI), clockwise: false)
let circleShape = CAShapeLayer()
circleShape.path = circlePath.CGPath
PORCalculatorButton.layer.mask = circleShape

Answer 2

1. Because of layout constraints, your button will resize according to your outer views. You need to make sure to apply the layer properties, after your button is rendered, to ensure you have the final frame/bounds, and also re-apply the same properties if the button size changes (say due to rotation etc)
2. You are trying to clip/mask the button vertically, but you are using width, not height, to calculate corner radius. Is this the intended implementation?