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];
}
精彩评论