テーブルヘッダーセクションのviewForHeaderInSectionに線とグラデーションを描画するにはどうすればよいですか？

Question

私は私のUITableViewヘッダーセクションにいくつかのタイトルを追加しました。下の白い線と上から下のグレーのグラデーションを描きたいと思います。

現在、viewForHeaderInSectionに私の見出しのラベル付きビューを作成しています。私は今、白い線を描画しようとしています。これは、1ピクセルの高さのラベルを使用して管理しています。

Answer 1

あなたは、UIViewのサブクラスを作成して表示し、あなたの線を描画しますHeaderViewていると言う：

あなたのテーブルのデリゲートで

@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 

、その後：

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

人、ビュー（UILabel/UIButton）などをサブクラス化したくない...

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

これはすでに解決されていることは分かっていますが、グラデーションを描画するには問題がありました。同じ問題を抱えている人がいるかもしれないと思ったので、ここで私はそれを解決しました。これは、iOS 4倍

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 

使い方（のために働くあなたの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; 
}