I'm having some trouble drawing a custom gradient background in a UITableViewCell when the style is set to 'grouped' and the cell is first or the last one of the section. My approach is to simply create a CAGradientLayer and add it to the view like this:
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = rect;
gradient.colors = [NSArray arrayWithObjects:(id)[_backgroundColorLight CGColor], (id)[_backgroundColorDark CGColor], nil];
[self.backgroundView.layer insertSublayer:gradient atIndex:0];
self.backgroundView.layer.masksToBounds = YES;
Unfortunately this produces cells like this one:
Does anyone have a hint on how to make the background fit the boarders of the cell?
Thanks
–f
If you draw a custom background, you also have to draw the borders yourself. There's quite some open source stuff out there.
Basically, you need to know [in the cell] if it's top/middle/bottom/single, and cut the stuff in drawRect. You won't come far with insertSublayer.
Check out the PageCellBackground class you find here:
http://cocoawithlove.com/2010/12/uitableview-construction-drawing-and.html
I've not tried it but CAGradientLayer happens to be a subclass of CALayer, so perhaps setting its borderRadius may work. But it rounds all corners then, so you may compensate for that by making the layer bigger than the cell and have the cell view cut it off.
Look at Rounded UIView using CALayers - only some corners - How? for more examples
Related
I have created a NSViewController which i have called "GradientViewController" with nib file, I have initialised the view and it is getting displayed over my rootViewController. I am wanting to add a gradient background to "GradientViewController". Does anyone know how i can do this?
if I create a CAGradientLayer with "GradientViewController" using
NSGradient *gradient = [[NSGradient alloc] initWithStartingColor:[NSColor orangeColor] endingColor:[NSColor lightGrayColor]];
How would i get this to display? (If it's the correct way to create a gradient)
It's been very difficult to find the answer to this and i've been searching for days. Example code would be great as I am new to cocoaTouch and trying to swap from iOS
I always just add a custom view class as a subview and put the gradient in the drawRect function of that when I want gradients on my ViewControllers.
I am thinking about adding drop shadow to the bottom and right side of UIView, but I found all the solutions out there are adding shadows for four sides a view. Is there a way to work around that?
You can use CAGradientLayer like so,
CAGradientLayer *shadow = [CAGradientLayer layer];
shadow.frame = CGRectMake(-10, 0, 10, myView.frame.size.height);
shadow.startPoint = CGPointMake(1.0, 0.5);
shadow.endPoint = CGPointMake(0, 0.5);
shadow.colors = [NSArray arrayWithObjects:(id)[[UIColor colorWithWhite:0.0 alpha:0.4f] CGColor], (id)[[UIColor clearColor] CGColor], nil];
[myView.layer addSublayer:shadow];
You'll have to change the frame to suit your needs. This example displays a shadow along the height of a view on the left. You can also change the start and end point to control the direction of the shadow.
I may do it by adding two UIImageViews with stretched shadow image on bottom and right side of the view. You don't have to cover all the view with those UIImageViews, you just clip as much as you need. Take a look at the color blended layers of twitter on the iPhone, I believe those beautiful shadows are created by using UIImageViews. And that saves system resources. Of course you can use CALayer to create shadow, but I think it consumes more system resources to render the shadow, so CALayer is second choice for me.
UIBezierPath *shadowPath = [UIBezierPath
bezierPathWithRect:self.yourViewObj.bounds];
self.yourViewObj.layer.masksToBounds = NO;
self.yourViewObj.layer.shadowColor = [UIColor blackColor].CGColor;//*** color you want for shadow
self.yourViewObj.layer.shadowOffset = CGSizeMake(5.0f, 5.0f);
self.yourViewObj.layer.shadowOpacity = 0.7f;
self.yourViewObj.layer.shadowPath = shadowPath.CGPath;
I am trying to set the backgroundView parameter of a UITableViewCell, but the backgroundView is overlapping the bounds of the cell. I have tried setting masksToBounds to YES, but that doesn't seem to make a difference. Please can you tell me where I am going wrong?
Here is an image showing my problem:
Here is my code:
UIImageView *iv = [[[UIImageView alloc] initWithFrame:cell.frame] autorelease];
[iv setImage:[UIImage imageNamed:#"paper"]];
[iv.layer setMasksToBounds:YES];
[cell.layer setMasksToBounds:YES];
[cell.contentView.layer setMasksToBounds:YES];
[cell setBackgroundView:iv];
Using masksToBounds doesn't work because the bounds of the cell are a rectangle.
Even if the corners of the cell are rounded, they're still part of the cell (but they contain transparent pixels). When a cell is displayed in a grouped table view, its background view (and its selected background view) is drawn in regard of its position in its section (middle, top, bottom, single).
So, if you want to provide a custom background view, you need to compute the position of the cell in its section and provide the adequate background :
either by using 4 different images
or by using the mask property of the background image's layer
or by subclassing UIView and implementing drawRect: so the graphic context is clipped before the image is drawn.
Are you setting every cell that background view, if so why don't you just set it to the table view background.
How can one reproduce the same effect as Single Line Etched when using plain table and custom cells?
I think I need to add them as subview to each cell, excluding the last one. I want to know how to reproduce that without having to use images to that. Does anyone know?
Isn't the separator just a single pixel grey line, even for Single Line Etched?
In this case, create a UIView the width of the cell, but only one pixel high and then set it's background colour,then stick it at the bottom of the cell's content view.
UIView *lineView;
lineView = [[UIView alloc] initWithFrame:CGRectMake(0.0f,
cell.contentView.bounds.size.height-1.0f,
cell.contentView.bounds.size.width,
1.0f);
lineView.autoresizingMask = UIViewAutoresizingFlexibleTopMargin;
lineView.backgroundColor = [UIColor grayColor];
[cell.contentView addSubview:lineView];
I'm trying to draw an NSTextFieldCell subclass that looks like the rounded event item normal table in iCal.
Based on this question, I've got the following code in my subclass:
- (void)drawInteriorWithFrame:(NSRect)cellFrame inView:(NSView *)controlView {
NSGradient *gradient = [[NSGradient alloc] initWithStartingColor:[NSColor lightGrayColor] endingColor:[NSColor grayColor]];
[gradient drawInRect:cellFrame angle:90];
controlView.layer.cornerRadius = 0.5f;
[[self title] drawInRect:cellFrame withAttributes:nil];
}
But this just draws the cell as a normal rectangle, with the gradient fill, but without the rounded corners. I'm obviously missing something, but what?
What about calling:
[[textfield cell] setBezelStyle: NSTextFieldRoundedBezel];
Based on this question, I've got the following code in my subclass: …
The accepted answer on that question assumes that the cell is in a text field (i.e., it is the only cell in the view and it effectively is the entire view), and that that view is or can be layer-backed.
That won't work when you're a table column's cell, because you are not supposed to redraw the whole view and making it layer-backed probably isn't going to work correctly. (I'm not sure one can expect layer-backing a text field to work correctly, either. Anything beyond a plain NSView either is made to work layer-backed or isn't; if the documentation doesn't say it is, assume it isn't.)
[gradient drawInRect:cellFrame angle:90];
But this just draws the cell as a normal rectangle, with the gradient fill, but without the rounded corners.
Yup. That's all this method does, so without the rounded corners being already specified (e.g., as the corner radius of a layer), you need to construct and draw the shape with rounded corners yourself.
To do that, create a path for a rectangle with rounded corners, and draw the gradient in that.