IOS5基础之十一-----定制表视图单元

定制表视图单元格是为了处理单元格中有很多复杂的数据。

同样以Single View Application 创建一个new Project。 命名为Cells。

将向主视图中拖入 Table View，并向File‘s Owner 设置委托和数据源。

创建UITableViewCell子类。

选择Cells文件夹 Command+N新建一个Object-c Class。创建一个BIDNameAndColorCell为类名。 选择Subclass of 中选择UITableViewCell。

BIDNameAndColorCell.h

@property (copy,nonatomic) NSString *name;

@property (copy,nonatomic) NSString *color;

BIDNameAndColorCell.m

#define kNameValueTag 1

#define kColorValueTag 2

@synthesize name;

@synthesize color;

这里是手动生成UILabel。

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier

{

    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];

     

      if (self) {

        // Initialization code

       

        CGRect nameLabelRect=CGRectMake(0, 5, 70, 15);

        UILabel *nameLabel=[[UILabel alloc]initWithFrame:nameLabelRect];

        nameLabel.textAlignment=UITextAlignmentRight;

        nameLabel.text=@"Name:";

        nameLabel.font= [UIFont boldSystemFontOfSize:12];

        [self.contentView addSubview:nameLabel];

        

        CGRect colorLabelRect=CGRectMake(0, 26, 70, 15);

        UILabel *colorLabel=[[UILabel alloc]initWithFrame:colorLabelRect];

        colorLabel.text=@"Color:";

        colorLabel.font =[UIFont boldSystemFontOfSize:12];

        colorLabel.textAlignment=UITextAlignmentRight;

        [self.contentView addSubview:colorLabel];

        

        CGRect nameValueRect= CGRectMake(80, 5, 200, 15);

        UILabel *nameValue=[[UILabel alloc] initWithFrame:nameValueRect];

        nameValue.tag =kNameValueTag;

        [self.contentView addSubview:nameValue];

        

        CGRect colorValueRect=CGRectMake(80, 25, 200,15);

        UILabel *colorValue=[[UILabel alloc]initWithFrame:colorValueRect];

        colorLabel.tag=kColorValueTag;

        [self.contentView addSubview:colorValue];

            }

      

    return self;

}

这两个方法是写Name和Color值

-(void)setName:(NSString *)n

{

    if (![n isEqualToString:name]) {

        name=[n copy];

       UILabel *nameLabel=(UILabel *)[self.contentView viewWithTag:kNameValueTag];

        nameLabel.text=name;

    }

}

-(void)setColor:(NSString *)c

{

    if(![c isEqualToString:color])

    {

        color =[c copy];

        UILabel *colorLabel=(UILabel *)[self.contentView viewWithTag:kColorValueTag];

        colorLabel.text=color;

    }

}

实现控制器部分

#import <UIKit/UIKit.h>

@interface BIDViewController : UIViewController

<UITableViewDataSource,UITableViewDelegate>

@property (strong,nonatomic) NSArray *computers;

@end

数组是保存作为数据源保存。委托和数据源。

加载数据和释放实例

- (void)viewDidLoad

{

    [super viewDidLoad];

// Do any additional setup after loading the view, typically from a nib.

    NSDictionary *row1= [[NSDictionary alloc ]initWithObjectsAndKeys:@"MacBook Air",@"Name",@"White",@"Color", nil];

    NSDictionary *row2=[[NSDictionary alloc] initWithObjectsAndKeys:@"MacBook Pro",@"Name",@"Silver",@"Color", nil];

    NSDictionary *row3= [[NSDictionary alloc ]initWithObjectsAndKeys:@"iMac",@"Name",@"White",@"Color", nil];

    NSDictionary *row4=[[NSDictionary alloc] initWithObjectsAndKeys:@"Mac Mini",@"Name",@"Silver",@"Color", nil];

    NSDictionary *row5= [[NSDictionary alloc ]initWithObjectsAndKeys:@"Mac Pro",@"Name",@"Silver",@"Color", nil];

    self.computers=[[NSArray alloc] initWithObjects:row1,row2,row3,row4,row5, nil];

}

- (void)viewDidUnload

{

    [super viewDidUnload];

    // Release any retained subviews of the main view.

    // e.g. self.myOutlet = nil;

    self.computers=nil;

}

-(UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

{

    static NSString *CellTabledentifier=@"CellTabledentifier";

    BIDNameAndColorCell *cell=[tableView dequeueReusableCellWithIdentifier:CellTabledentifier];

    if(cell ==nil)

    {

        cell=[[BIDNameAndColorCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellTabledentifier];

    } 

    NSInteger row=[indexPath row];

    NSDictionary *rowData=[self.computers objectAtIndex:row];

    cell.name= [rowData objectForKey:@"Name"];

    cell.color=[rowData objectForKey:@"Color"]; 

    return cell;

}

从nib文件加载UITableViewCell

#import <UIKit/UIKit.h>

@interface BIDNameAndColorCell : UITableViewCell

@property (copy,nonatomic) NSString *name;

@property (copy,nonatomic) NSString *color;

@property (strong,nonatomic) IBOutlet UILabel *nameLabel;

@property (strong,nonatomic) IBOutlet UILabel *colorLabel;

@end

#import "BIDNameAndColorCell.h"

// #define kNameValueTag 1 新增输出口，就不需要标签值

// #define kColorValueTag 2

@implementation BIDNameAndColorCell

@synthesize name;

@synthesize color;

@synthesize nameLabel;

@synthesize colorLabel;

-(void)setName:(NSString *)n

{

    if (![n isEqualToString:name]) {

        name=[n copy];

       // UILabel *nameLabel=(UILabel *)[self.contentView viewWithTag:kNameValueTag];

        nameLabel.text=name;

    }

}

-(void)setColor:(NSString *)c

{

    if(![c isEqualToString:color])

    {

        color =[c copy];

        //UILabel *colorLabel=(UILabel *)[self.contentView viewWithTag:kColorValueTag];

        colorLabel.text=color;

    }

}

那段生成Labe控件的方法就可以不需要了

选择Cells Command+n 创建一个IB--》Empty视图。

然后拖入Table View Cell，选择cell视图的属性选择器将Identifier 设置为CellTableIdentifier.这个相当于表示符。

拖入四个label进入cell视图中。将身份检查器中的class选择为BIDNameAndColorCell。当你打开连接检查器是就能看到colorLabel和nameLabel并将他们关联到视图中的Label。

BIDViewController.m中的方法修改为

-(UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

{

    static NSString *CellTabledentifier=@"CellTabledentifier";

    //该方法第一次调用的时候

    static BOOL nibsRegistered=NO;

    if (!nibsRegistered) {

        UINib *nib=[UINib nibWithNibName:@"BIDNameAndColorCell" bundle:nil];

        [tableView registerNib:nib forCellReuseIdentifier:CellTabledentifier];

        nibsRegistered=YES;

    }

    BIDNameAndColorCell *cell=[tableView dequeueReusableCellWithIdentifier:CellTabledentifier];

    /*

    if(cell ==nil)

    {

        cell=[[BIDNameAndColorCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellTabledentifier];

    }

       */

    NSInteger row=[indexPath row];

    NSDictionary *rowData=[self.computers objectAtIndex:row];

    cell.name= [rowData objectForKey:@"Name"];

    cell.color=[rowData objectForKey:@"Color"]; 

    return cell;

}

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

{

    return 65.0;

}

这样就基本完成了定制表视图单元格。