定制单元格的几种方式

定制单元格的几种方式


通过UITableViewCell固定格式设置，其属性是imageView，textLabel、detailLabel，但他们的样式固定，且通常来说不易改变它们的位置，不够灵活


通过UITableViewCell的contentView属性添加子视图
使用xib自定义子视图，布局十分方便，开发较为迅速
子类化UITableViewCell，更加面向对象




固有样式位置  改变系统样式位置


- (void)layoutSubviews {


[super layoutSubviews];


self.textLabel.frame = CGRectMake(10, 5, 200, 20);


self.detailLabel.frame = CGRectMake(10, 30, 100, 10);


self.imageView.frame = CGRectMake(260, 30, 50, 10);


}




定制单元格——第一种方式


向contentView添加子视图


if (cell == nil) {
cell = [[[UITableViewCell alloc]
initWithStyle:UITableViewCellStyleDefault
reuseIdentifier:identifier] autorelease];






UILabel *titleLab = [[UILabel alloc] initWithFrame:CGRectMake(10, 5,
200, 20)];
titleLab.tag = 100;
titleLab.font = [UIFont boldSystemFontOfSize:14.0f];
titleLab.backgroundColor = [UIColor clearColor];
[cell.contentView addSubview:titleLab];
[titleLab release];
// 添加其他子视图.....
}
UILabel *titleLab = (UILabel *)[cell.contentView viewWithTag:100];
titleLab.text = @"label内容";




定义单元格——第二种方式


xib定义单元格


if (cell == nil) {


NSBundle *bundle = [NSBundle mainBundle];


// 加载xib


NSArray *array = [bundle loadNibNamed:@"newsCell" owner:self


options:nil];


cell = [array objectAtIndex:0];


}








UILabel *titleLab = (UILabel *)[cell.contentView viewWithTag:100];


titleLab.text = @"label内容";




定制单元格——第三种方式




子类化定制


- (void)_initViews {
_titleLab = [[UILabel alloc] initWithFrame:CGRectZero];
_titleLab.font = [UIFont boldSystemFontOfSize:14.0f];
_titleLab.backgroundColor = [UIColor clearColor];
[self.contentView addSubview:_titleLab];
// .....初始化其他UI控件
}
- (void)setNews:(News *)news {
_titleLab.text = news.title;
_commentLab.text = [NSString stringWithFormat:@"%d条评论",
news.commentCount];
_timeLab.text = [NSString stringWithFormat:@"%d小时前",news.timeVal];
}
- (void)layoutSubviews {
[super layoutSubviews];
_titleLab.frame = CGRectMake(10, 5, 200, 20);
_commentLab.frame = CGRectMake(10, 30, 100, 10);
_timeLab.frame = CGRectMake(260, 30, 50, 10);
}




课堂实例1：定制我们的单元格




project: CustomCellDemo


new file...  name:RootViewController
             superclass:UITableViewController








查看 RootViewController.m   比较常用的方法都标注出来了








打开  AppDelegate.m


加入 #import "RootViewController.h"


在 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 中的


 [self.window makeKeyAndVisible];  下面加入


    RootViewController *viewController = [[RootViewController alloc] init];
    UINavigationController *navigtaion = [[UINavigationController alloc] initWithRootViewController:viewController];
   
    self.window.rootViewController = navigtaion;












打开 RootViewController.m 




修改  Table view data source  协议方法如下


#pragma mark - Table view data source


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


- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 4;
}


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:nil];
    
    switch (indexPath.row) {
        case 0:
            cell.textLabel.text = @"default cell(student)";
            break;
        case 1:
            cell.textLabel.text = @"1、contentView";
            break;
        case 2:
            cell.textLabel.text = @"2、nib";
            break;
        case 3:
            cell.textLabel.text = @"3、CustomCell";
            break;
        default:
            break;
    }
    
    return cell;
}


运行


打开  CustomCellDemo-Prefix.pch


加入




typedef enum kTableViewCellType {
    
    kDefaultCellType = 0,
    kContentCellType = 1,
    kNibCellType     = 2,
    kCustomCellType  = 3
    
} kTableViewCellType;












new file...  name:DetailViewController
             superclass:UITableViewController




打开 DetailViewController.h  代码修改如下


#import <UIKit/UIKit.h>


@interface DetailViewController : UITableViewController
{
@private
    NSArray *_listArray;
}


@property (nonatomic, assign) kTableViewCellType cellType;


@end










打开 RootViewController.m 


加入  #import "DetailViewController.h"


加入方法




#pragma mark - Table view delegate


- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    DetailViewController *detailViewController = [[DetailViewController alloc] init];
    detailViewController.cellType = indexPath.row;
    [self.navigationController pushViewController:detailViewController animated:YES];
}






将 - (void)viewDidLoad  方法改为


- (void)viewDidLoad
{
    [super viewDidLoad];


    // 是否清除掉选中状态，默认YES
    self.clearsSelectionOnViewWillAppear = YES;
}


运行 


    将    self.clearsSelectionOnViewWillAppear = YES;


    改为   self.clearsSelectionOnViewWillAppear = NO;




运行






     改回  YES












打开 DetailViewController.m


定制单元格——第一种方式


修改 协议方法如下




#pragma mark - Table view data source


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


- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 20;
}


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";


    if (self.cellType == kContentCellType) {
        
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
        
        if (cell == nil) {
            cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
            
            UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 150, 44)];
            label.tag = 101;
            label.backgroundColor = [UIColor redColor];
            [cell.contentView addSubview:label];
          
            
            // add subviews ....
        }
        
        UILabel *label = (UILabel *)[cell.contentView viewWithTag:101];
        label.text = _listArray[indexPath.row];
        
        return cell;
        
    }else if (self.cellType == kNibCellType) {
        
       return nil;
        
    }else if (self.cellType == kCustomCellType){
        
       return nil;
        
    }else {
        return nil;
    }
}






修改 - (void)viewDidLoad  方法如下


- (void)viewDidLoad
{
    [super viewDidLoad];
    
    _listArray = [UIFont familyNames];
    
    self.tableView.rowHeight = 80;
}


运行








定义单元格——第二种方式


xib定义单元格




new file ...   User Interface    view   


                                 save as:  MyCell




  打开  MyCell.xib


            删除   view
            
            添加一个  Table View Cell    设置  width:320   height:80


            在 Table View Cell  里面 左侧添加一个 label           设置属性  tag:201


                                     中间添加一个 image view     设置属性  background :sky       tag:202










打开 DetailViewController.m




将 


else if (self.cellType == kNibCellType) {
        
       return nil;
        
    }else if (self.cellType == kCustomCellType){
        
       return nil;
        
    }else {
        return nil;
    }




改为




else if (self.cellType == kNibCellType) {
        
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
        
        if (cell == nil) {
            
            NSArray *nibs = [[NSBundle mainBundle] loadNibNamed:@"MyCell" owner:self options:nil];
            cell = [nibs objectAtIndex:0];
        }
        
        UILabel *label = (UILabel *)[cell.contentView viewWithTag:201];
        label.text = _listArray[indexPath.row];
        
        UIImageView *imgView = (UIImageView *)[cell.contentView viewWithTag:202];
        imgView.backgroundColor = (indexPath.row%2 == 0) ? [UIColor redColor] : [UIColor yellowColor];
        
        return cell;
        
    }else if (self.cellType == kCustomCellType){
        
        return nil;
        
    }else {
        return nil;
    }








运行






定制单元格——第三种方式




子类化定制








new file...  name:MyCell
             superclass: UITableViewCell




MyCell.h  修改代码如下




#import <UIKit/UIKit.h>


@interface MyCell : UITableViewCell
{
@private
    UILabel *_label;
}


// model 对象
@property (nonatomic, copy) NSString *text;


@end




MyCell.m  代码修改如下


#import "MyCell.h"


@interface MyCell ()


- (void)initSubViews;


@end


@implementation MyCell


- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        [self initSubViews];
    }
    return self;
}


- (void)initSubViews
{
    _label = [[UILabel alloc] initWithFrame:CGRectZero];
    _label.backgroundColor = [UIColor yellowColor];
    [self.contentView addSubview:_label];
    
    // .....
}


- (void)layoutSubviews
{
    [super layoutSubviews];//如果不调用父类将不会排版 显示版面
    
    _label.frame = CGRectMake(80, 0, 160, 80);//改变系统样式位置
    _label.text = self.text;
    // layout subViews
}




@end








打开 DetailViewController.m




加入  #import "MyCell.h"






  将


else if (self.cellType == kCustomCellType){
        
        return nil;
        
    }




改为


 else if (self.cellType == kCustomCellType){
        
        MyCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
        
        if (cell == nil) {
            cell = [[MyCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
        }
        
        cell.text = _listArray[indexPath.row];
        
//        NSLog(@"textLabel >>>>: %@", NSStringFromCGRect(cell.textLabel.frame));
        
        return cell;
        
    }




运行