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

我知道这已经得到了解答，但我在绘制渐变线时遇到了问题。我想可能有其他人有同样的问题，所以这就是我如何解决它。这适用于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

用法（在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;
}

Answer 3

人们，不想继承视图（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];
}

如何在表格标题部分viewForHeaderInSection中绘制直线和渐变？

3 个答案: