Make intersection transparent using multiple subviews

Question

Please check below image. i have added scrollview in "BLACK" color and added subview in "GREY" color. now i want to make subview transparent which is define as "WHITE" color.

Please refer the below code. Let me know how to make button transparent with particular frame or let me know if you have any alternative for that.

self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0.0, 40.0, self.frame.size.width, 300.0)];
self.scrollView.contentSize = CGSizeMake(self.bounds.size.width,ViewHeight);
self.scrollView.autoresizingMask=UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
self.scrollView.delegate = self;
self.scrollView.backgroundColor =[UIColor blackColor];
[self.view addSubview:self.scrollView


UIButton *butApp = [UIButton buttonWithType:UIButtonTypeCustom];
[butApp setFrame:CGRectMake(x, y , w, h)];
[butApp setBackgroundColor:[UIColor greyColor]];
[self.scrollView addSubview:butApp];


UIButton* gapButton = [UIButton buttonWithType:UIButtonTypeCustom];
[gapButton setFrame:CGRectMake(x+3, y+10, w-6, 10)];
[gapButton setBackgroundColor:[UIColor whiteColor]];
[self.scrollView addSubview:gapButton];

Instead of this gapButton i need transparent portion in grey color so user can see black color in that portion.

enter image description here

yes i have tried clearColor on gapButton but it shows me grey Color but i need black color in that white portion. — Paras Gandhi, Dec 27 '11 at 07:20
Something like [this](http://stackoverflow.com/questions/3800278/iphone-draw-transparent-rectangle-on-uiview-to-reveal-view-beneath)? — johnluttig, Dec 27 '11 at 07:25
@johnluttig Thanks for your quick reply.i can implement it with core graphics and drawRect method but do you have any other alternative that i can implement easily without this drawRect method and all.Let me know if you have any idea about this. — Paras Gandhi, Dec 27 '11 at 07:36
I feel your pain. I will continue to search for a simpler solution, but the easiest solution at this point seems to be subclassing UIView and overriding drawRect class for the button with the hole. It may be easier to come up with an alternate solution back at the drawing board; i.e. not having to see through a certain part of a UIView. — johnluttig, Dec 27 '11 at 07:56
Just thought of something: what if you make the UIButton background image a gray square with a clear part in the center? i.e. alpha = 0 in center of png/jpg. — johnluttig, Dec 27 '11 at 07:58
@johnluttig Thanks. I had discussion with developer who is working in android SDK and he suggest me that try to make the intersection part transparent so that tha main background appear. and its possible in android so now i am searching on that. — Paras Gandhi, Dec 27 '11 at 08:43

johnluttig · Answer 1 · 2011-12-27T08:24:34.890

Try this, I suggested it in comments. Other answer requires subclassing UIButton, which you suggested was not ideal in your situation.

UIButton *butApp = [UIButton buttonWithType:UIButtonTypeCustom];
[butApp setFrame:CGRectMake(x, y , w, h)];
//[butApp setBackgroundColor:[UIColor greyColor]]; //replace this...
[butApp setBackgroundImage:[UIImage imageNamed:@"greyWithHoleInCenter.png"]
                   forState:UIControlStateNormal]; //...with this
[self.scrollView addSubview:butApp];

I created a crude .png file to represent the kind of backgroundImage you might be looking for. Note that the center is clear, not white. Therefore, it should show whatever image is behind it:

button with hole

Vincent Zgueb · Answer 2 · 2011-12-27T13:26:27.033

Ok. Funny question. In my opinion you have to override drawRect: + drawInContext: methods by subclassing UIView class. You also need to set the container view (the gray view) + button bg to clearColor

-(void)drawRect:(CGRect)r
{
 // Let this method blank will cause drawLayer:InContext to be called
}

-(void)drawLayer:(CALayer*)layer inContext:(CGContextRef)context
{
       // Fill the bg with gray 
    CGContextSetFillColorWithColor(context, [UIColor grayColor].CGColor);
    CGContextFillRect(context, self.bounds);

      // I clear the subview frames
    for (UIView * v in [self subviews]) // I do it for all subviews
    {
        CGContextSetBlendMode(context, kCGBlendModeClear);
        CGContextFillRect(context, v.frame);
    }
}

here is a screen shot

Make intersection transparent using multiple subviews

2 Answers2