不使用图像的自定义 UIButton 形状

Question

我想制作一个看起来类似于 UIBackBarButtonItem 的 UIButton（带有一个指向左侧的箭头用于导航堆栈。如果可能的话，我宁愿这样做而不必使用图像，因为按钮的大小会有所不同，具体取决于在手机的方向上。

有没有办法在代码中激活这种影响？我的想法是以某种方式使用按钮的 CALayer。

谢谢！

编辑

我正在尝试使用@Deepak 的建议，但我遇到了一个问题。我希望按钮的右侧看起来像 [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:4] 左侧看起来像箭头。我尝试使用 addQuadCurveToPoint:controlPoint 方法来做到这一点。

我使用矩形的角作为控制点，但路径没有像我预期的那样弯曲。它仍然像我只使用 addLineToPoint: 方法一样走投无路。我的代码如下。

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];

Answer 1

您可以使用Quartz 执行此操作。您将需要子类 UIButton 并实现其 drawRect: 方法。您将必须定义一个路径并用渐变填充它。

您还必须实现hitTest:withEvent:，因为它涉及非矩形形状。

Answer 2

这解决了我的绘图困难

    float radius = 10.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.0);
CGPoint pointAfterTopCurve = CGPointMake(rect.size.width, 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.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];


[path fill];