Wie zeichne ich eine Linie und einen Farbverlauf in meinem Tabellenkopfbereich viewForHeaderInSection?

Question

Ich habe einige Titel in meinem UITableView-Header-Abschnitt hinzugefügt, und ich möchte eine weiße Linie am unteren Rand und einen grauen Verlauf von oben nach unten zeichnen.

Im Moment habe ich in viewForHeaderInSection eine Ansicht mit Beschriftungen für meine Überschriften erstellen. Ich versuche jetzt, eine weiße Linie zu zeichnen, die ich mit einem 1 Pixel hohen Label geschafft habe.

Answer 1

Sie eine UIView-Unterklasse erstellen, sagen HeaderView, in dem Sie Ihre Linie zeichnen werden:

@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 

und dann in der Tabelle delegieren:

- (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; 

}

Answer 2

Menschen, die möchte die Sicht nicht ableiten (UILabel/UIButton) usw.

-(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]; 
} 

Answer 3

Ich weiß, dass dies bereits beantwortet wurde, aber ich hatte Probleme, die Linie über den Gradienten zu ziehen. Ich dachte, es könnte andere geben, die das gleiche Problem haben, also hier ist, wie ich es gelöst habe. Dies funktioniert für 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 (Implementieren Sie diese beiden Methoden in Ihrem 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; 
}