Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

For my application I'm using a TableView and using customized UITableViewCells.

I customized my cells via interface builder, not programmatically. Is there a way to also make the background color of my customized cell a gradient in the interface builder?

Thanks.

share|improve this question

4 Answers

up vote 14 down vote accepted

To draw a gradient, you will have to subclass and override the drawRect programmatically:

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSaveGState(context);
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGGradientRef gradient = CGGradientCreateWithColorComponents
                             (colorSpace,
                              (const CGFloat[8]){1.0f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 0.0f, 1.0f},
                              (const CGFloat[2]){0.0f,1.0f},
                              2);

    CGContextDrawLinearGradient(context,
                                gradient,
                                CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMinY(self.bounds)),
                                CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMaxY(self.bounds)),
                                0);

    CGColorSpaceRelease(colorSpace);
    CGContextRestoreGState(context);
}

The easiest way, which keeps your cells in the interface builder, is probably to subclass a UIView to have it draw a gradient in its drawRect and place it in your cell behind the other subviews:

GradientView *gradientView = [[GradientView alloc] init];
gradientView.frame = cell.bounds;
[cell addSubview:gradientView];
[cell sendSubviewToBack:gradientView];

However, the best way to do it is probably not to use the interface builder for this and make a subclass of UITableViewCell. For advanced customization, interface builders tend to only make things more complicated in my experience. That's up to personal preference though.

share|improve this answer
@SerdarDogruyol For the first solution I mentioned, UIView. For the second, UITableViewCell. I suggest reading the UIView class reference for more information on UIView subclassing and drawing: developer.apple.com/library/ios/#documentation/uikit/reference/… – Aberrant Nov 17 '11 at 13:37

Yes this is possible : Make a image in gradient with 1 X Height pix. Set this to backgroundColor for cell.

cell.backgroundColor =  [UIColor colorWithPatternImage:[UIImage imageNamed:@"gradImage.png"]];

**You can set gradient color with code but its time taken process. If you fill better then search for that.

share|improve this answer
I believe this is the best answer: "Is there a way...in the interface builder", but you should have provided a link on how to make the gradient. – Javy Nov 17 '11 at 20:45
Note, though, that due to the retina displays, images are likely to look ugly (pixelated) compared to the other components when they don't exactly match the unpredictable resolution of the device. – Aberrant Nov 18 '11 at 9:22

No, you can't. You could use UISegmentedControl with one segment in older sdk and xCode versions: http://chris-software.com/index.php/2009/05/13/creating-a-nice-glass-buttons/ But now you can't make less than two segments in one UISegmentedControl. And even this way you couldn't change the default colors of the buttons without coding.

share|improve this answer

I don't know if there is a gradient option, but you could add an UIImageView to the custom cell and add an image with a gradient.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.