自定义UIButton形状而不使用图像 [英] Custom UIButton Shape without using an image

问题描述

我想创建一个看起来类似于UIBackBarButtonItem的UIButton（向左指向导航堆栈的箭头。如果可能的话，我更喜欢这样做而不必使用图像，因为按钮的大小会有所不同在电话的方向上。

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

谢谢！

编辑

我正在尝试使用@ Deepak的建议，但是我遇到了一个问题。我希望按钮的右侧看起来像[UIBezierPath bezierPathWithRoundedRect：rect cornerRadius：4]，左侧看起来像箭头。我尝试使用addQuadCurveToPoint：controlPoint方法执行此操作。 / p>

我使用rect的一角作为控制点，但是路径没有像我期望的那样弯曲。它仍然是走投无路的，好像我只使用了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]; 
 
 [路径addLineToPoint：pointBeforeBottomCurve]; 
 [path addQuadCurveToPoint：pointAfterBottomCurve controlPoint：bottomRightCorner]; 
 
 
 [path addLineToPoint：pointBeforeArrow]; 
 [path addLineToPoint：arrowPoint]; 
 [path addLineToPoint：startPoint]; 
  

解决方案

你可以用 石英 。您将需要子类 UIButton 并实现其 drawRect：方法。您必须定义路径并使用渐变填充它。

你还需要实现 hitTest：withEvent：，因为它涉及非矩形形状。

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.

这篇关于自定义UIButton形状而不使用图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！