Rounded Corners only on Top of a UIView

Question

Hi i am searching a clean solution without overwriting drawRect or stuff like that to create a UIView with Rounded corners on the Top of the

Answer 1

In Objective-C it looks like:

[oCollectionViewCell.layer setMasksToBounds:YES];
[oCollectionViewCell.layer setCornerRadius:5.0];
[oCollectionViewCell.layer setMaskedCorners:kCALayerMinXMinYCorner|kCALayerMaxXMinYCorner];

Answer 2

I worked this out with the help of Ashley.

First of all i subclassed a UIView. Creating a own constructor for my Class called - (id)initWithContentView:(UIView *)aView forTableView:(UITableView *)table andIndex:(NSIndexPath *)indexPath;. In this constructor i determine what kind of table cell i am want to style.

Then i overwrite l - (void)layoutSubviews to create the CAShapeLayer and applying the layer mask.

.h File Code

typedef enum {
    tableCellMiddle,
    tableCellTop,
    tableCellBottom,
    tableCellSingle
} tableCellPositionValue;

@interface TableCellBackgrounds : UIView
{
    tableCellPositionValue position;
}

- (id)initWithContentView:(UIView *)aView forTableView:(UITableView *)table andIndex:(NSIndexPath *)indexPath;

@end

.m File Code

- (id)initWithContentView:(UIView *)aView forTableView:(UITableView *)table andIndex:(NSIndexPath *)indexPath
{
    self = [super initWithFrame:aView.frame];

    [self setAutoresizingMask:UIViewAutoresizingFlexibleWidth];

    if(self)
    {
        [self setBackgroundColor:[UIColor colorWithRed:(float)230/255 green:(float)80/255 blue:(float)70/255 alpha:1]];

        if(table.style == UITableViewStyleGrouped)
        {
            int rows = [table numberOfRowsInSection:indexPath.section];


            if(indexPath.row == 0 && rows == 1)
            {
                self.layer.cornerRadius = 11;
                position = tableCellSingle;
            }
            else if (indexPath.row == 0)
                position = tableCellTop;
            else if (indexPath.row != rows - 1) 
                position = tableCellMiddle;
            else 
                position = tableCellBottom;
        }
    }
    return self;
}

- (void)layoutSubviews
{
    [super layoutSubviews];

    if(position == tableCellTop)
    {
        CAShapeLayer *maskLayer = [CAShapeLayer layer];
        maskLayer.path = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:UIRectCornerTopLeft|UIRectCornerTopRight cornerRadii:(CGSize){10.0, 10.0}].CGPath;
        self.layer.mask = maskLayer;
    }
    else if (position == tableCellBottom)
    {
        CAShapeLayer *maskLayer = [CAShapeLayer layer];
        maskLayer.path = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:UIRectCornerBottomLeft|UIRectCornerBottomRight cornerRadii:(CGSize){10.0, 10.0}].CGPath;
        self.layer.mask = maskLayer;
    } 
}

Answer 3

The straightforward way to do this would be to define a path in the shape you want, and fill it with whatever color you want to use for the background. You might use either UIBezierPath or CGPath for this. Using CGPath, for example, you can construct a path using methods such as CGMoveToPoint(), CGAddLineToPoint(), and CGAddArc(). You'd then fill it with CGContextFillPath(). Have a look at the Quartz 2D Programming Guide for a complete discussion.

Another way would be to add a subview with rounded corners (you can set the subview's layer's cornerRadius property), but let one side of the subview be clipped by the parent view.

A third way would be to add a background image with the desired shape. You can make the corners transparent and make the view's background transparent, and you'll get the desired effect. This won't work so well for resizing, though.

Where are you getting stuck?

Answer 4

Just tried with Swift 3.0 , Xcode 8.0:

REMEMBER to set your button in viewDidLayoutSubviews() or layoutSubViews as @rob described here .

And when you wanna change your button background, you just need to call:

yourButton.backgroundColor = UIColor.someColour

Source:

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    yourButton.layer.masksToBounds = true
    yourButton.roundCorners(corners: [.topLeft,.topRight], radius: 5)
}

extension UIButton
{
    func roundCorners(corners:UIRectCorner, radius: CGFloat)
    {
        let maskLayer = CAShapeLayer()
        maskLayer.path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius)).cgPath
        self.layer.mask = maskLayer
    }
}

• Here is the result:

Default state:

Seleted state:

Hope this help!!