Circular UIView (with cornerRadius) without Blended Layer

Question

I'm trying to get the circle below to have an opaque solid white color where the cornerRadius cuts out the UIView.

UIView *circle = [[UIView alloc] initWithFrame:CGRectMake(i * (todaySize + rightMargin), 0, smallSize, smallSize)];
circle.layer.cornerRadius = smallSize/2;
circle.layer.borderWidth = 0.5;
circle.layer.backgroundColor = [UIColor whiteColor].CGColor;
circle.backgroundColor = [UIColor whiteColor];
[self addSubview:circle];

I've tried a few things like setting the backgroundColor and opaque without any luck. Color Blended Layers still shows that the surrounding of the circle is transparent. Does anybody know how to solve this?

You'll have to explain what you mean or show a picture or something. Have you tried `circle.clipsToBounds = YES;`? — Fogmeister, Nov 12 '14 at 09:42

score 17 · Accepted Answer · answered Jan 12 '16 at 21:47

To avoid blending when using rounded corners, the rounding needs to be done in drawRect, rather than as a property on the layer. I needed UICollectionView cells with a rounded background in an app I'm working on. When I used layer.cornerRadius, the performance took a huge hit. Turning on color blended layers yielded the following:

Not what I was hoping for, I want those cells to be colored green indicating there is no blending occurring. To do this, I subclassed UIView into RoundedCornerView. My implementation is real short and sweet:

import UIKit

class RoundedCornerView: UIView {
    static let cornerRadius = 40.0 as CGFloat

    override func drawRect(rect: CGRect) {
        let borderPath = UIBezierPath(roundedRect: self.bounds, cornerRadius: RoundedCornerView.cornerRadius)
        UIColor.whiteColor().set()
        borderPath.fill()
    }
}

Then I set the view I was rounding to be a RoundedCornerView in my nib. Running at that point yielded this:

Scrolling is buttery smooth and there is no longer any blending occurring. One odd side effect of this is that the view's backgroundColor property will color the excluded area of the corners, not the main body of the view. This means that the backgroundColor should be set to whatever is behind your view, not to the desired fill color.

score 1 · Answer 2 · answered May 19 '19 at 11:36

Try using a mask to both avoid blending and dealing with the parent / child background color match.

override func layoutSubviews() {
    super.layoutSubviews()

    let maskLayer = CAShapeLayer()
    maskLayer.path = UIBezierPath(roundedRect: bounds, cornerRadius: 20).cgPath
    layer.mask = maskLayer
}

score -1 · Answer 3 · answered Nov 12 '14 at 09:49

-1

Set clipsToBoundson the view or masksToBounds on the layer to YES

answered Nov 12 '14 at 09:49

rounak

9,217
3
42
59

Circular UIView (with cornerRadius) without Blended Layer

3 Answers3