Make intersection transparent using multiple subviews - iphone

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.

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:

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);
}
}

Related

highlight a part of the cell when selected

I am trying to add a non-standard color to the cell when its highlighted. FOr this i create a view with the background color that i want and set it as the selectedBackgroundView for the cell.
All is fine.
UIView *selectionView = [[UIView alloc] init];
[selectionView setBackgroundColor:[UIColor colorWithRed:(121/255.0) green:(201/255.0) blue:(209/255.0) alpha:1.0]];
[cell setSelectedBackgroundView:selectionView];
My question, can i change the frame of the selectedBackgroundView so that it highlights only a part of the cell (to be precise, i want the selectionBackroundView to have an X-offset of 20 pixels).
is there any easy way of doing this ?
Updated code :
UIView *selectionView = [[UIView alloc] init];
[selectionView setBackgroundColor:[UIColor clearColor]];
UIView *selectionSubView = [[UIView alloc] initWithFrame:(CGRectMake(20.0f, 0.0f, 300.0f, 72.0f))];
[selectionSubView setBackgroundColor:[UIColor colorWithRed:(121/255.0) green:(201/255.0) blue:(209/255.0) alpha:1.0]];
UIView *clearView = [[UIView alloc] initWithFrame:(CGRectMake(0.0f, 0.0f, 20.0f, 72.0f))];
[clearView setBackgroundColor: [UIColor clearColor]];
[selectionView addSubview: selectionSubView];
[selectionView addSubview: clearView];
[cell setSelectedBackgroundView: selectionView];
THis doesn seem to work either. I have added this code in the 'cellForRowAtIndexPath'
Thanks in advance
You could put a smaller UIView as subview of your selectionView and change tha background color of that view.
You can do like this.
You create the separate file for UIView as below.
TestView.m
- (id)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
// Initialization code.
[self setBackgroundColor:[UIColor clearColor]];
}
return self;
}
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
/* Draw a circle */
// Get the contextRef
CGContextRef contextRef = UIGraphicsGetCurrentContext();
// Set the border width
CGContextSetLineWidth(contextRef, 1.0);
// Set the circle fill color to GREEN
CGContextSetRGBFillColor(contextRef, 100.0, 255.0, 0.0, 1.0);
// Set the cicle border color to BLUE
CGContextSetRGBStrokeColor(contextRef, 0.0, 0.0, 255.0, 1.0);
// Fill the circle with the fill color
CGContextFillRect(contextRef, CGRectMake(20, 0, rect.size.width, rect.size.height));
// Draw the circle border
//CGContextStrokeRectWithWidth(contextRef, rect, 10);//(contextRef, rect);
}
And this Custom View you can use as a background View for cell selection like this.
TestView *bgView = [[TestView alloc] initWithFrame:cell.frame]; // Creating a view for the background...this seems to be required.
cell.selectedBackgroundView = bgView;
May be this help you.
Thanks,
Minesh Purohit.
Does the cell have fixed size and highlight area ?
If yes, create an image and use image view as the selectedBackgroundView
Try to set frame size for selectionView where x = 20. I am not sure about this but I guess it should work for your given scenario.

Rounding color around borders of a button

I've got a little problem as seen below:
The cell has a background color, and the button doesn't. Still, it doesn't give me rounded edges, but corners. How can I fix that?
UIButton *meerKnop = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[[meerKnop layer] setCornerRadius:8.0f];
meerKnop.backgroundColor = [UIColor whiteColor];
meerKnop.frame = CGRectMake(11.0, (60.0 + (teller * 52.5)), 299.0, 50.0);
...
[meerKnop addSubview:locationLabel];
...
[meerKnop addSubview:categoryLabel];
UISwipeGestureRecognizer *swipe = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:#selector(handleSwipe:)];
swipe.direction = UISwipeGestureRecognizerDirectionRight;
[meerKnop addGestureRecognizer:swipe];
[swipe release];
[meerKnop addTarget:self action:#selector(alertPressed:) forControlEvents:UIControlEventTouchUpInside];
meerKnop.tag = incId;
[cell addSubview:meerKnop];
Try setting the corner radius of the layer of the button.
[button.layer setCornerRadius:10];
Remember to import if you are using layer property
Also, use:
[[button layer] setMasksToBounds:YES];
With this code the layer gets a corner radius of 10.0 and the -setMasksToBounds: tells the button’s layer to mask any layer content that comes below it in the layer tree. This is necessary in order for the layer to mask off the rounded corners.
UIButton *meerKnop = [UIButton buttonWithType:UIButtonTypeRoundedRect];
Change this to:
UIButton *meerKnop = [UIButton buttonWithType:UIButtonTypeCustom];
Edited:
UIButton *meerKnop = [UIButton buttonWithType:UIButtonTypeCustom];
[[meerKnop layer] setCornerRadius:8.0f];
meerKnop.backgroundColor = [UIColor redcolor];
meerKnop.frame = CGRectMake(11.0, (60.0 + (teller * 52.5)), 299.0, 50.0);
show me where the big white rectangle is appearing? (I hope u have cleared the cell background color).
change the background colour of the button to same as that of cell.. it will take care of the rounded edges as there colour will become same as that of the background. sry i new.. i can think of this way only at the moment.. Hope it helps..

How to programmatically render a flat background UIColor as the background for a UIToolbar?

So I followed a tutorial which allows me to subclass UIToolbar and draw an image as a custom background for the UIToolbar.
Code was something like this:
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
UIImage *backgroundImage = [UIImage imageNamed:#"toolbar_background.png"];
[backgroundImage drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}
This works flawlessly. Considering though that I just want my toolbar background to be a flat color. Basically something like [UIColor blackColor], is there an easier way to do this in the drawRect method?
Having to make a 320 x 44 px height flat black background image and use that with the above code seems like extreme overhead when [UIColor blackColor] is available? I'm just not sure how to implement it here.
I thought about doing something like this instead:
- (void)drawRect:(CGRect)rect
{
UIView *test = [[UIView alloc] initWithFrame:CGRectMake(0,0,self.frame.size.width,self.frame.size.height)];
test.backgroundColor = [UIColor blackColor];
[self addSubview:test];
}
But this doesn't work because then the UIView COVERS all the UIToolbar items that I add later i.e the Toolbar is black yes, but the black is overtop all the toolbar items so they are not visible.
Is there a workaround?
Thanks.
You can create a flat UIToolbar without the need to create a subclass. Simply set BackgroundColor, BackgroundImage and ShadowImage.
[toolbar setBackgroundColor:[UIColor blackColor]];
[toolbar setBackgroundImage:[[UIImage alloc] init] forToolbarPosition:UIToolbarPositionAny barMetrics:UIBarMetricsDefault];
[toolbar setShadowImage:[[UIImage alloc] init] forToolbarPosition:UIToolbarPositionAny];
Override the -drawRect: method as in your first example, but instead of drawing an image, use the UIRectFill method, like this:
[[UIColor blackColor] setFill];
UIRectFill(self.bounds);

How to use UIView's contentStretch

I want to use an image of size 27x27 with the center 1 pixel stretchable as the backgroundImage of an UIButton. Here is my code:
[button setBackgroundImage:[UIImage imageNamed:#"button_image"] forState:UIControlStateNormal];
button.frame = CGRectMake(0.f, 0.f, 27.f, 27.f);
button.contentStretch = CGRectMake(13.f/27.f, 13.f/27.f, 1.f/27.f, 1.f/27.f);
[button setTitle:NSLocalizedString(#"long title", #"long title") forState:UIControlStateNormal];
[button sizeToFit];
CGRect buttonFrame = button.frame;
buttonFrame.size.width += 18.f * 2;
button.frame = buttonFrame;
But the result is no different from that without setting contentStretch at all.
So how to correctly use contentStretch to achieve what I want?
Please don't tell me again and again that I can achieve the same effect with stretchableImageWithLeftCapWidth:topCapHeight:. I know that and it's apparently not what I'm asking for. I just want to know how to properly use contentStretch. Thanks.
One issue I see is that you're dividing using integer division. 1 / 27 is equal to 0. 1.0 / 27.0 is equal to 0.037...
If all you want is a stretchable background on your button, check out stretchableImageWithLeftCapWidth:topCapHeight: on UIImage. Create the stretchable image that way, then set it to the background of your button.
I don't know the special behaviour with UIButtons (I'd also suggest to use stretchableImages there as it is a compound view). However, if you want to use contentStretch you could do so on an UIView given your data this was:
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0,0,100,100)];
view.layer.contents = (id)[[UIImage imageNamed:#"button_image"] CGImage];
view.contentStretch = CGRectMake(13./27., 13./27., 1./27., 1./27.);
This should be enough to have a UIView with a stretchable background.
Use -[UIImage stretchableImageWithLeftCapWidth:topCapHeight:].
I put this in the init method of a subclass of UIView:
// Add errorBackground & errorLabel.
rect.size.height = 26.0f;
errorBackground = [[UIImageView alloc] initWithFrame:rect];
errorBackground.image = [[UIImage imageNamed:#"ErrorBubble.png"]
stretchableImageWithLeftCapWidth:13 topCapHeight:0];
UILabel *errorLabel = [[UILabel alloc] initWithFrame:
CGRectMake(0.0f, 0.0f, rect.size.width, rect.size.height)];
errorLabel.autoresizingMask = UIViewAutoresizingFlexibleWidth;
errorLabel.backgroundColor = [UIColor clearColor];
errorLabel.textAlignment = UITextAlignmentCenter;
errorLabel.font = [UIFont systemFontOfSize:14.0f];
errorLabel.text = #"1 Failed Passcode Attempt";
errorLabel.textColor = [UIColor whiteColor];
errorLabel.shadowColor = [UIColor blackColor];
errorLabel.shadowOffset = CGSizeMake(0.0f, -1.0f);
[errorBackground addSubview:errorLabel];
[errorLabel release];
[self addSubview:errorBackground];
ErrorBubble.png:
ErrorBubble#2x.png:
Unsatisfying but simple answer:
You can't, until Apple fixes this. IMO it's a long outstanding and very annoying bug.
The UIButton implementation consists of a couple of subviews, and the (internal) background view does not seem to reflect the settings done on the UIButton view.

How do I make UITableViewCellAccessoryDisclosureIndicator visible in orange color instead of gray color?

without Creating any of the uibutton(custom button with background image)in tableview cell.
I want to change the accessory indicator color from gray to orange.What should i do for that...
plz reply as soon as possible(plz answer me clearly or else i can't understand)...
i'm waiting for ur reply...
Thank u...
There's a much easier solution to this:
cell.accessoryView = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:#"theimage.png"]] autorelease];
You'll need to create a new UIView with a UIImageView inside it and then set that as the Accessory for the cell. So you'll need to create a image just like the default accessory but in the colour you want.
UIView* accessoryView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 24, 50)];
UIImageView* accessoryViewImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"NEWIMAGE.png"]];
accessoryViewImage.center = CGPointMake(12, 25);
[accessoryView addSubview:accessoryViewImage];
[cell setAccessoryView:accessoryView];
[accessoryViewImage release];
[accessoryView release];
For others who are still stumbling upon this question, here's how to do it programmatically.
Create a UIView subclass, and override drawRect: with the following:
#define PADDING 4.f //give the canvas some padding so the ends and joints of the lines can be drawn with a mitered joint
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetStrokeColorWithColor(context, [UIColor grayColor].CGColor);
CGContextSetLineWidth(context, 3.f);
CGContextSetLineJoin(context, kCGLineJoinMiter);
CGContextMoveToPoint(context, PADDING, PADDING);
CGContextAddLineToPoint(context, self.frame.size.width - PADDING, self.frame.size.height/2);
CGContextAddLineToPoint(context, PADDING, self.frame.size.height - PADDING);
CGContextStrokePath(context);
}
This draws a stock indicator arrow. From here you can change the color, line width, etc.
To add the indicator view to your cell:
#define ACCESSORY_WIDTH 13.f
#define ACCESSORY_HEIGHT 18.f
cell.accessoryView = [[AccessoryIndicatorView alloc] initWithFrame:CGRectMake(self.frame.size.width - ACCESSORY_WIDTH - CELL_PADDING, self.frame.size.height/2 - ACCESSORY_HEIGHT/2, ACCESSORY_WIDTH, ACCESSORY_HEIGHT)];