How to make rounded corners and sides in UIview programmatically?

Question

How to make rounded corners and sides in UIview programmatically like has youtube:

I know how to make rounded corner but have no idea how to make rounded sides. I need to do it programmatically (not just setting image mask previously designed)

Answer 1

You can create a UIBezierPath. If you want to just round the corners, you can use bezierPathWithRoundedRect. If you want something more sophisticated, like that YouTube logo, you would use moveToPoint and a series of addCurveToPoint or addQuadCurveToPoint.

For example, this is a close approximation:

That was generated with:

- (void)viewDidLoad {
    [super viewDidLoad];

    CGFloat width  = MIN(self.view.bounds.size.width, self.view.bounds.size.width) * 0.7;
    CGFloat height = width * 3.0 / 4.0;
    CGSize  size   = CGSizeMake(width, height);
    CGFloat corner = width / 9.0;

    CGPoint center = CGPointMake(self.view.bounds.size.width / 2.0, self.view.bounds.size.height / 2.0);

    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path = [self roundedPathAtCenter:center size:size corner:corner].CGPath;
    layer.fillColor = [UIColor redColor].CGColor;
    layer.strokeColor = [UIColor clearColor].CGColor;
    [self.view.layer addSublayer:layer];
}

- (UIBezierPath *)roundedPathAtCenter:(CGPoint)center size:(CGSize)size corner:(CGFloat)corner {
    CGFloat width = size.width;
    CGFloat height = size.height;

    UIBezierPath *path = [UIBezierPath bezierPath];

    // upper left corner

    [path moveToPoint: CGPointMake(center.x - width / 2.0 + corner / 2.0, center.y - height / 2.0 + corner / 2.0)];

    // path to top center

    [path addQuadCurveToPoint: CGPointMake(center.x, center.y - height / 2.0) controlPoint: CGPointMake(center.x - width / 2.0 + corner, center.y - height / 2.0)];

    // path to upper right

    [path addQuadCurveToPoint: CGPointMake(center.x + width / 2.0 - corner / 2.0, center.y - height / 2.0 + corner / 2.0) controlPoint: CGPointMake(center.x + width / 2.0 - corner, center.y - height / 2.0)];

    // path to mid right

    [path addQuadCurveToPoint: CGPointMake(center.x + width / 2.0, center.y) controlPoint: CGPointMake(center.x + width / 2.0, center.y - height / 2.0 + corner)];

    // path to lower right

    [path addQuadCurveToPoint: CGPointMake(center.x + width / 2.0 - corner / 2.0, center.y + height / 2.0 - corner / 2.0) controlPoint: CGPointMake(center.x + width / 2.0, center.y + height / 2.0 - corner)];

    // path to center bottom

    [path addQuadCurveToPoint: CGPointMake(center.x, center.y + height / 2.0) controlPoint: CGPointMake(center.x + width / 2.0 - corner, center.y + height / 2.0)];

    // path to lower left

    [path addQuadCurveToPoint: CGPointMake(center.x - width / 2.0 + corner / 2.0, center.y + height / 2.0 - corner / 2.0) controlPoint: CGPointMake(center.x - width / 2.0 + corner, center.y + height / 2.0)];

    // path to mid left

    [path addQuadCurveToPoint: CGPointMake(center.x - width / 2.0, center.y) controlPoint: CGPointMake(center.x - width / 2.0, center.y + height / 2.0 - corner)];

    // path to top left

    [path addQuadCurveToPoint: CGPointMake(center.x - width / 2.0 + corner / 2.0, center.y - height / 2.0 + corner / 2.0) controlPoint: CGPointMake(center.x - width / 2.0, center.y - height / 2.0 + corner)];

    [path closePath];

    return path;
}

You can play around with those control points to get the effect you're looking for. The key is that you want the the first control point to be in line with the second control point of the preceding arc.

In this example, I'm just creating a CAShapeLayer and adding it as a sublayer. Alternatively, you could take this CAShapeLayer and add it as a mask to the layer of some other view, too. The key is that you just need to create a UIBezierPath that draws the outline you want, and either just draw it, add it as a sublayer, or use it as a mask.