How to create an oval shape UIButton

Question

I have to draw an oval shape button, i don't want to set the image in oval shape.

I have read that you can draw different shaper with UIBezierPath but i am unable to draw a proper oval shape.

Here is the code is am using to create a circular shape.

self.layer.borderWidth=1.0;

self.clipsToBounds = YES;
[self setTitleColor:ktextColor forState:UIControlStateNormal];

self.layer.cornerRadius = self.bounds.size.width/2;//half of the width
self.layer.borderColor=[[UIColor whiteColor]CGColor];

Any help is appreciated !!

Answer 1

You can set the delegate for your button's layer and implement the delegate method `displayLayer:'

-(void)displayLayer:(CALayer *)layer
{
  UIGraphicsBeginImageContext(layer.frame.size);
  CGContextRef context = UIGraphicsGetCurrentContext();    

  UIBezierPath* ovalPath = [UIBezierPath bezierPathWithOvalInRect: CGRectMake(0.0, 0.0, CGRectGetWidth(layer.frame), CGRectGetHeight(layer.frame))];
  [[UIColor whiteColor] setFill];
  [ovalPath fill];
  [[UIColor blackColor] setStroke];
  ovalPath.lineWidth = 1;
  [ovalPath stroke];

  UIImage *imageBuffer = UIGraphicsGetImageFromCurrentImageContext();
  UIGraphicsEndImageContext();

  layer.contents = (id)[imageBuffer CGImage];
}

Answer 2

You can also create a CAShapelayer and than add gesture to the layer as below:

-(void)generateOvalWithSize:(CGSize)size origin:(CGPoint)origin {
CAShapeLayer ovalLayer = [CAShapeLayer layer];

CGMutablePathRef ovalPath = CGPathCreateMutable();
CGPathAddEllipseInRect(ovalPath, NULL, CGRectMake(origin.x, origin.y, size.width, size.height));
CGPathCloseSubpath(ovalPath);

ovalLayer.path = ovalPath;

// Configure the apperence of the circle
ovalLayer.fillColor = [UIColor whiteColor].CGColor;
ovalLayer.strokeColor = [UIColor whiteColor].CGColor;
ovalLayer.lineWidth = 2;
// Add to parent layer
[[self layer] addSublayer:ovalLayer];

}

Answer 3

i have been using these two functions for a while, i haven't come across any issues yet, but if someone sees an issue please let me know.

you can pass anything that is a subclass of UIView (ie. UIButton, UICollectionViewCell, etc.)

+ (void)setCornerRadius:(CGFloat)radius forView:(UIView*)view
{
  [view.layer setCornerRadius:radius];
  [view.layer setMasksToBounds:YES];
}

+ (void)setBordersForView:(UIView*)view width:(CGFloat)width color:(UIColor*)color
{
  view.layer.borderColor = color.CGColor;
  view.layer.borderWidth = width;
}

the above yields me the effect below in a collection view:

the collection view cell has a single button which is bound all the way around the edges (auto layout) and takes up the full height and width of the cell.

then i pass in the entire cell (or self.viewForBaseLineLayout if calling from within the cell) as the view parameter in both functions listed above.

for the radius parameter i am passing 20.0f. (but this value will vary depending on the size the view you are passing; you just have to play around with it)

i know this post is old, but maybe it will help someone new : )

Answer 4

您可以使用OBShapedButton类在此下载