How to make an arc on the bottom of uiview like an old SpaceBar Key of keyboard?

Question

I have a UIView i need to give an arc only to the bottom left and bottom right corners of UIView like an arc, eg-like old space bar key on keyboard?

that make edges rounded i want it like a curve like a smile curve — roshan.k, May 29 '18 at 10:28
@roshan.k Why do you tell about a space-bar key? Old-style spacebar key aren't curved IMHO — FredericP, May 29 '18 at 10:41

score 1 · Accepted Answer · answered May 29 '18 at 20:32

If you want to do this:

You can use this code:

NSInteger marginCurve = 30;

    UIView *example1 = [[UIView alloc] initWithFrame: CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height / 2)];
    [example1 setBackgroundColor: [UIColor clearColor]];

    UIBezierPath *curve1 = [UIBezierPath bezierPath];
    [curve1 moveToPoint: CGPointMake(0, 0)];
    [curve1 addLineToPoint: CGPointMake(example1.frame.size.width, 0)];
    [curve1 addLineToPoint: CGPointMake(example1.frame.size.width, example1.frame.size.height - marginCurve)];
    [curve1 addCurveToPoint: CGPointMake(0, example1.frame.size.height - marginCurve)
              controlPoint1: CGPointMake(example1.frame.size.width / 2, example1.frame.size.height)
              controlPoint2: CGPointMake(example1.frame.size.width / 2, example1.frame.size.height)];
    [curve1 closePath];

    CAShapeLayer *ex1Layer = [CAShapeLayer layer];
    [ex1Layer setFrame: example1.bounds];
    [ex1Layer setFillColor: [UIColor brownColor].CGColor];
    [ex1Layer setPath: curve1.CGPath];

    [example1.layer addSublayer: ex1Layer];
    [self.view addSubview: example1];

I hope it helps you :)

thanks it is very close to what i needed – roshan.k May 30 '18 at 05:18 — roshan.k, May 30 '18 at 05:18

EsbenB · Answer 2 · 2018-05-30T07:23:59.830

Its a bit unclear what you mean by 'eg-like old space bar key on keyboard', but it sounds like you need to make a custom drawn UIView.

You do that by:

Making a subclass of UIView and override -(void)drawRect:(CGRect)rect

In here you can make a custom drawing most likely using UIBezierPath

A BezerPath can represent a large number of shapes and forms.

Depending on what you want to draw it will look something like:

-(void)drawRect:(CGRect)rect
{
    [super drawRect:rect];
     CGContextRef context = UIGraphicsGetCurrentContext();

     for (UIBezierPath * path in self.paths) {
        CGContextAddPath(ctx, path.CGPath);
        CGContextSetStrokeColorWithColor(ctx,self.color.CGColor);
        CGContextStrokePath(ctx);
     }

See this excellent tutorial on UIBezierPath

How to make an arc on the bottom of uiview like an old SpaceBar Key of keyboard?

2 Answers2