新手自定义 UITableViewCell无图片绘制(一)

一、最终效果图：

注：仅支持ARC，非ARC需要添加部分代码。

二、新建任意类型的项目工程，我这里使用的是Single-View模板。

新建工程后，代码添加UITableView，由于本人喜欢使用纯代码编程，因此所有的东西都是用代码实现的。下面是添加UITableView的代码：

ViewController.h文件中添加：

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController<UITableViewDataSource,UITableViewDelegate>{
    
    UITableView *_tableView;
    
    NSMutableArray *_titleArray;
    NSMutableArray *_itemsArray;
}

@property (nonatomic,strong) UITableView *tableView;

@end

ViewController.h文件中添加：

@implementation ViewController

@synthesize tableView = _tableView;

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    
    _titleArray = [[NSMutableArray alloc] initWithObjects:@"Draw Rects",@"Draw Gradients",@"Draw Arcs",nil ];
    _itemsArray = [[NSMutableArray alloc] initWithObjects:@"UIKit",@"TableView",@"Objective-C",nil ];
    
    _tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) style:UITableViewStyleGrouped];
    _tableView.delegate = self;
    _tableView.dataSource = self;
    [self.view addSubview:_tableView];
}

三、代理方法实现

这样就完成了基本的引入添加，但是此时更改不能显示，UITableView的delegate和DataSource相关必须的代码还都没有重写，TableView是空的。

实现下面三个方法：

-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
    return 2;
}

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    if(section == 0){
        return _titleArray.count;
    }else{
        return _itemsArray.count;
    }
}

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *identifier = @"cell";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
    if(cell == nil){
        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier];
        
       
    }
    
    NSString *entry;
    if(indexPath.section == 0){
        entry = [_titleArray objectAtIndex:indexPath.row];
    }else{
        entry = [_itemsArray objectAtIndex:indexPath.row];
    }
    
    cell.textLabel.text = entry;
    cell.textLabel.backgroundColor = [UIColor clearColor];
    
    return cell;
}

完成这些后运行工程，就能看到一个基本的列表样式显示了：

四、为Group添加头标题

重写方法tableView:titleForHeaderInSection方法：

-(NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{
    if(section == 0){
        return @"即将学到的...";
    }else{
        return @"所具备的...";
    }
}

五、重绘Cell的背景

新建一个基于UIView的子类CustomCellBackView.h，并在子类中打开DrawRect方法，在次方法中绘制背景颜色，这里使用的是Core Graphic绘制方法：

    CGContextRef context = UIGraphicsGetCurrentContext(); 
    CGColorRef redColor = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:1.0].CGColor;
 
    CGContextSetFillColorWithColor(context, redColor);
    CGContextFillRect(context, self.bounds);

然后在ViewController.h文件中引入新建的子类并定义为Cell的背景：

 引入文件：

#import "ViewController.h"
#import "CustomCellBackView.h"

 定义为Cell的背景：

  UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
    if(cell == nil){
        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier];
        
        cell.backgroundView = [[CustomCellBackView alloc]init];
        cell.selectedBackgroundView = [[CustomCellBackView alloc] init];
    }

运行后：

六、这样就完成了第一步。接下来要做的就是给Cell绘制表格样式，就需要新建一个绘制类Common了，这个类继承子NSObject。

在头文件中定义一个方法： 

-(void)drawLinerGradient:(CGContextRef)context Rect:(CGRect)rect startColorRef:(CGColorRef)startColor endColorRef:(CGColorRef)endColor;

然后在实现文件中进行详细的绘制：

-(void)drawLinerGradient:(CGContextRef)context Rect:(CGRect)rect startColorRef:(CGColorRef)startColor endColorRef:(CGColorRef)endColor{
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    
    CGFloat locations[] = {0.0,1.0};
    
    NSArray *colors = [NSArray arrayWithObjects:(__bridge id)startColor,(__bridge id)endColor, nil];
    
    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (CFArrayRef)CFBridgingRetain(colors), locations);
    
    CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
    CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));
    
    CGContextSaveGState(context);
    CGContextAddRect(context, rect);
    CGContextClip(context);
    CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
    CGContextRestoreGState(context);
    
    CGGradientRelease(gradient);
    CGColorSpaceRelease(colorSpace);
}

这里面用到了很多Core Graphic的方法，以及部分ios5  ARC模式支持的定义，不了解的可以查看Apple  API文档。

七、完成之后，在CustomCellBackView.m文件中引入Common.h文件，并重写drawRect方法：

    CGContextRef context = UIGraphicsGetCurrentContext();
    
    CGColorRef redColor = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:1.0].CGColor;
    
    CGColorRef whiteColor = [UIColor colorWithRed:1.0 green:1.0
                                             blue:1.0 alpha:1.0].CGColor;
    CGColorRef lightGrayColor = [UIColor colorWithRed:230.0/255.0 green:230.0/255.0
                                                 blue:230.0/255.0 alpha:1.0].CGColor;
    
    CGRect paperRect = self.bounds;  
    
    Common *common = [[Common alloc]init];
    [common drawLinerGradient:context Rect:paperRect startColorRef:whiteColor endColorRef:lightGrayColor];
 
    
    //add line stroke
    CGRect strokeRect = CGRectInset(paperRect, 5.0, 5.0);
    
    CGContextSetStrokeColorWithColor(context, redColor);
    CGContextSetLineWidth(context, 1.0);
    CGContextStrokeRect(context, strokeRect);

八、运行程序，查看结果：

注：这样就基本完成了一个UITableCell的自定义，但那时这样的样式还是有欠缺，这个效果没有立体感，而且边框线也有点太粗了，剩下的部分留在后面介绍吧。