How do I draw a line and a gradient in my table header section viewForHeaderInSection?

I've added some titles in my UITableView header section and I'd like to draw a white line at the bottom and a a gray gradient going from top to bottom.

At the moment in viewForHeaderInSection I have create a view w开发者_运维知识库ith labels for my headings. I'm now trying to draw a white line, which I've managed using a 1 pixel high label.

---

you show create an UIVIew subclass, say HeaderView in which you will draw your line:

@implementation HeaderView
- (void)drawRect:(CGRect)rect 
{
    [super drawRect:rect];

    //add a gradient:
    CAGradientLayer *layer = [[[CAGradientLayer alloc] init] autorelease]
    [gradientLayer setBounds:[self bounds]]
    [gradientLayer setColors:[NSArray arrayWithObjects:(id)[[UIColor blackColor] CGColor], (id)[[UIColor whiteColor] CGColor], nil]];
    [[self layer] insertSublayer:gradientLayer atIndex:0];

    //draw line
    CGContextRef ctx = UIGraphicsGetCurrentContext(); 
    CGContextSetRGBStrokeColor(ctx, 1.0, 0, 0, 1); 
    CGContextMoveToPoint(ctx, 0, rect.size.height-1);
    CGContextAddLineToPoint( ctx, rect.size.width, rect.size.height-1);
    CGContextStrokePath(ctx);


}
@end

and then in your table delegate:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    // create the parent view that will hold header Label
    HeaderView* customView = [[[HeaderView alloc] initWithFrame:CGRectMake(0.0, 0.0, 360.0, 20.0)] autorelease];

    UILabel * headerLabel = [[UILabel alloc] initWithFrame:CGRectZero];
    headerLabel.backgroundColor = [UIColor clearColor];
    headerLabel.frame = CGRectMake(10.0, 0.0, 100.0, 20.0); 
    headerLabel.text = [sectionTitles objectAtIndex:section];
    [customView addSubview:headerLabel];
    [headerLabel release];

    return customView;

}

---

I know this has already been answered but I had problems getting the line to draw over the gradient. I figured there may be others that are having the same issue so here is how I solved it. This works for iOS 4x

CustomTableViewSectionHeaderWithLine.h

#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>

@interface CustomTableViewSectionHeaderWithLine : UIView {
    UIColor *topColor;
    UIColor *bottomColor;
    UIColor *lineColor;
}
@property(nonatomic, retain) UIColor *topColor, *bottomColor, *lineColor;
@end

CustomTableViewSectionHeaderWithLine.m

#import "CustomTableViewSectionHeaderWithLine.h"


@implementation CustomTableViewSectionHeaderWithLine
@synthesize topColor;
@synthesize bottomColor;
@synthesize lineColor;

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Set the colors to something heinous so if you forget you can know immediately
        if ([self topColor] == nil) topColor = [UIColor greenColor];
        if ([self bottomColor] == nil) bottomColor = [UIColor yellowColor];
        if ([self lineColor] == nil) lineColor = [UIColor redColor];        
    }
    return self;
}

- (void)drawRect:(CGRect)rect 
{
    //[super drawRect:rect];

    //add a gradient:
    CAGradientLayer *gradientLayer = [[[CAGradientLayer alloc] init] autorelease];
    [gradientLayer setBounds:[self bounds]];
    CGRect newRect = CGRectMake(rect.origin.x, rect.origin.y, rect.size.width, rect.size.height -1);
    [gradientLayer setFrame:newRect];
    [gradientLayer setColors:[NSArray arrayWithObjects:(id)[topColor CGColor], (id)[bottomColor CGColor], nil]];
    [[self layer] insertSublayer:gradientLayer atIndex:0];

    //draw line
    CGContextRef ctx = UIGraphicsGetCurrentContext(); 
    CGContextBeginPath(ctx);
    // This gets the RGB Float values from the color initialized for lineColor
    const float* colors = CGColorGetComponents( lineColor.CGColor );
    CGContextSetRGBStrokeColor(ctx, colors[0], colors[1], colors[2], 1);    
    //CGContextSetGrayStrokeColor(ctx, 0, 1);
    CGContextMoveToPoint(ctx, 0, rect.size.height);
    CGContextAddLineToPoint( ctx, rect.size.width, rect.size.height);
    CGContextStrokePath(ctx);
}

- (void)dealloc
{
    [super dealloc];
}

@end

Usage (Implement these two methods in your TableViewDelegate

- (UIView *) tableView:(UITableView *) tableView viewForHeaderInSection:(NSInteger)section {
    CustomTableViewSectionHeaderWithLine *customView = [[[CustomTableViewSectionHeaderWithLine alloc] initWithFrame:CGRectMake(0.0, 0.0, 360.0, 25.0)] autorelease];
    [customView setTopColor:[UIColor whiteColor]];
    [customView setBottomColor:[UIColor blackColor]];
    [customView setLineColor:[UIColor whiteColor]];

    UILabel *label = [[[UILabel alloc] initWithFrame:CGRectMake(10, 3, tableView.bounds.size.width - 10, 18)] autorelease];
    label.text = [tableView.dataSource tableView:tableView titleForHeaderInSection:section];
    label.textColor = [UIColor blackColor];
    label.backgroundColor = [UIColor clearColor];
    [customView addSubview:label];

    return customView;
}

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
    return 25;
}

---

People, who do not want to subclass the view (UILabel/UIButton) etc...

-(void) drawUnderlinedLabel {
    NSString *string = [forgetButton titleForState: UIControlStateNormal];
    CGSize stringSize = [string sizeWithFont: forgetButton.titleLabel.font];
    CGRect buttonFrame = forgetButton.frame;
    CGRect labelFrame = CGRectMake(buttonFrame.origin.x + buttonFrame.size.width - stringSize.width, buttonFrame.origin.y + stringSize.height + 1 , stringSize.width, 2);
    UILabel *lineLabel = [[UILabel alloc] initWithFrame: labelFrame];
    lineLabel.backgroundColor = [UIColor blackColor];
    //[forgetButton addSubview:lineLabel];
    [self.view addSubview: lineLabel];
}