CODEWITHSUNDEEP
iosobjective-cuiviewtransparent
Js Lim
Js Lim

Reputation: 3695

UIView with transparent in middle

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

Upvotes: 5

Views: 4638

Answers (3)

Js Lim
Js Lim

Reputation: 3695

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

Upvotes: 7

Quang Hà
Quang Hà

Reputation: 4744

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!

Upvotes: 0

Duncan C
Duncan C

Reputation: 131511

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.

Upvotes: -1

Related Questions