UIView with transparent in middle

Question

enter image description here

Is it possible to create such a UIView fill with color, but in the middle is transparent?

I'm thinking about to create 5 UIViews here. Just wondering is it possible to accomplish by using only ONE UIView

[CAShapeLayer](https://developer.apple.com/library/ios/documentation/GraphicsImaging/Reference/CAShapeLayer_class/Reference/Reference.html) — Mick MacCallum, Jun 13 '14 at 02:30
Check out my solution here: http://stackoverflow.com/questions/14141081/uiview-drawrect-draw-the-inverted-pixels-make-a-hole-a-window-negative-space/32941652#32941652 — James Laurenstin, Oct 05 '15 at 05:13

score 7 · Accepted Answer · edited May 23 '17 at 11:46

7

From Duncan C, I get to know where should I start, then I found CALayer with transparent hole in it.

UIBezierPath *overlayPath = [UIBezierPath bezierPathWithRect:self.view.bounds];
UIBezierPath *transparentPath = [UIBezierPath bezierPathWithRect:CGRectMake(60, 120, 200, 200)];
[overlayPath appendPath:transparentPath];
[overlayPath setUsesEvenOddFillRule:YES];

CAShapeLayer *fillLayer = [CAShapeLayer layer];
fillLayer.path = overlayPath.CGPath;
fillLayer.fillRule = kCAFillRuleEvenOdd;
fillLayer.fillColor = [UIColor colorWithRed:255/255.0 green:20/255.0 blue:147/255.0 alpha:1].CGColor;

[self.view.layer addSublayer:fillLayer];

Make use of 2 UIBezierPath, then fill with color that I want (in my question is pink color), then add as sublayer

edited May 23 '17 at 11:46

Community

1
1

answered Jun 13 '14 at 03:33

Js Lim

3,625
6
42
80

If anyone know , How to transparent uiview with touches began any touches moved method..Please help me. – Milan patel Dec 17 '14 at 05:50
@milanpatel, don't post a new question as a comment on somebody else's thread. Create your own question. – Duncan C Aug 01 '17 at 10:35

score 0 · Answer 2 · answered Jun 13 '14 at 02:50

You create a view as subclass of UIView and add these codes: In YourView.h

#import <UIKit/UIKit.h>

@interface YourView : UIView

@property (nonatomic, assign) CGRect rectForClearing;
@property (nonatomic, strong) UIColor *overallColor;

@end

In YourView.m

#import "YourView.h"

@implementation NBAMiddleTransparentView

- (id)initWithFrame:(CGRect)frame 
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
        self.backgroundColor = [UIColor clearColor];
    }
    return self;
}
- (id)initWithCoder:(NSCoder *)aDecoder // support init from nib
{
    self = [super initWithCoder:aDecoder];
    if (self) {
        // Initialization code
        self.backgroundColor = [UIColor clearColor];
    }
    return self;
}

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
    // Drawing code
    [super drawRect:rect];
    CGContextRef ct = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(ct, self.overallColor.CGColor);
    CGContextFillRect(ct, self.bounds);
    CGContextClearRect(ct, self.rectForClearing);
}

@end

Using:

yourView.overallColor = [UIColor redColor];
yourView.rectForClearing = CGRectMake(20, 20, 20, 20);

Hope this helps!

score -1 · Answer 3 · answered Jun 13 '14 at 02:46

-1

Yes it's possible. You could attach a mask layer to your view's layer, and "punch out" the center portion of the mask. It would actually be quite easy.

answered Jun 13 '14 at 02:46

Duncan C

128,072
22
173
272

2

This comment needs some elaboration on how to add a mask and "punch" it out – erparker Jul 31 '17 at 17:57

UIView with transparent in middle

3 Answers3

Linked