I want to make a UIButton with that looks similar to the UIBackBarButtonItem (with an arrow pointing left for the navigation stack. I would prefer to do this without having to use an image if possible because the button will have a different size depending on the phone's orientation.
Is there a way to active this affect in code? My idea was using the CALayer of the button somehow.
Thanks!
EDIT
I am trying to use @Deepak's advice, but I am running into a a problem. I want the right side of the button to look like a [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:4] with the left side looking like an arrow. I tried to do this using the addQuadCurveToPoint:controlPoint method.
I am using the corner of the rect as the control point, but the path does not curve like I expect. It is still cornered as if I only used the addLineToPoint: method. My code is below.
float radius = 4.0;
UIBezierPath *path = [UIBezierPath bezierPath];
CGPoint startPoint = CGPointMake(rect.size.width/5.0, 0);
CGPoint pointBeforeTopCurve = CGPointMake(rect.size.width - radius, 0);
CGPoint topRightCorner = CGPointMake(rect.size.width, 0);
CGPoint pointAfterTopCurve = CGPointMake(rect.size.width, 0.0-radius);
CGPoint pointBeforeBottomCurve = CGPointMake(rect.size.width, rect.size.height-radius);
CGPoint bottomRightCorner = CGPointMake(rect.size.width, rect.size.height);
CGPoint pointAfterBottomCurve = CGPointMake(rect.size.width - radius, rect.size.height);
CGPoint pointBeforeArrow = CGPointMake(rect.size.width/5.0, rect.size.height);
CGPoint arrowPoint = CGPointMake(0, rect.size.height/2.0);
[path moveToPoint:pointBeforeTopCurve];
[path addQuadCurveToPoint:pointAfterTopCurve controlPoint:topRightCorner];
[path addLineToPoint:pointBeforeBottomCurve];
[path addQuadCurveToPoint:pointAfterBottomCurve controlPoint:bottomRightCorner];
[path addLineToPoint:pointBeforeArrow];
[path addLineToPoint:arrowPoint];
[path addLineToPoint:startPoint];
You can do this with Quartz
. You will need subclass UIButton
and implement its drawRect:
method. You will have to define a path and fill it with a gradient.
You will also have to implement hitTest:withEvent:
as it involves non-rectangular shape.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With