不使用图像的自定义 UIButton 形状
我想制作一个看起来与 UIBackBarButtonItem 类似的 UIButton(带有一个指向导航堆栈左侧的箭头。如果可能的话,我更愿意在不使用图像的情况下执行此操作,因为按钮将具有不同的大小,具体取决于手机的大小) 我
有没有办法在代码中激活这种影响?我的想法是以某种方式使用按钮的 CALayer!
正在尝试使用@Deepak
编辑
的建议,但我遇到了问题。按钮的右侧看起来像 [UIBezierPath bezierPathWithRoundedRect:rectcornerRadius: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];
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];
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您可以使用
石英
。您将需要子类UIButton
并实现其drawRect:
方法。您必须定义一条路径并用渐变填充它。您还必须实现
hitTest:withEvent:
因为它涉及非矩形形状。You can do this with
Quartz
. You will need subclassUIButton
and implement itsdrawRect:
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.这解决了我的绘画困难
This solved the drawing difficulties for me