iOS自定义TableViewCell详解[两种方法]

今天要跟大家分享的是两种自定义UITableViewCell方法。

一、首先看看效果

1)第一种是通过nib文件加载的方式,在UITableView里面添加自定义的Cell。

2)第二种是代码里面自定义Cell的形式。

两种方式各有各的优点,根据不同的情况进行选择即可。


二、建立项目

1)建立SingleView项目,命名为CustomTableViewCell。

2)完成nib文件配置,View中只有一个UITableView控件,就是我们将要显示的表视图了。

设置style为Grouped,因为我们要把两种自定义Cell的方法用不同的分区显示。

别忘记配置表的代理,在此就不赘述了,有疑问的看看demo就懂了。


三、使用nib文件自定义Cell

1)建立自定义Cell的nib文件,在New File里面选择UserInterface中的Empty,取名为CustomCell。

2)接着,拉出6个label,摆出如下图所示(当然你可以自由发挥),注意中间的”|”也是一个label。为了能够在代码中找到Cell里面的控件,我们还需要设置label的Tag标记。(写死的label就不用了,例如“类型:”)。

设置Tag:

3)拖完控件之后,我们需要设置nib文件的控制器,修改File’s Owner的Class为YGViewController(对应自己程序中的表视图控制器),点击File’s Owner,然后在身份检查器中输入YGViewController。

注:一个控制器是可以加载多个nib文件的,这里我们的YGViewController就加载了YGViewController.nib和CustomCell.nib两个文件。

只要配置好输出口和操作的链接,我们就能有条不紊的对多个nib进行操作了。下面设定CustomCell.nib的输出口,取名teaCell。

[cpp]  view plain copy
  1. @property (retain, nonatomic) IBOutlet UITableViewCell *teaCell;  

4)关键代码讲解

YGAViewController.h

[cpp]  view plain copy
  1. #import <UIKit/UIKit.h>  
  2. #import <QuartzCore/QuartzCore.h>  
  3. //学生  
  4. #define nameTag          1  
  5. #define classTag         2  
  6. #define stuNumberTag     3  
  7. #define imageTag         4  
  8. #define nameFontSize    15  
  9. #define fontSize        12  
  10.   
  11. //老师,对应的nib文件里面label的tag  
  12. #define teaNameTag       1  
  13. #define teaTypeTag       2  
  14. #define teaOfficeTag     3  
  15.   
  16.   
  17. @interface YGViewController : UIViewController <UITableViewDelegate,UITableViewDataSource>  
  18.   
  19. @property (retain,nonatomic) NSArray *stuArray;//学生资料  
  20. @property (retain,nonatomic) NSArray *teaArray;//老师资料  
  21. @property (retain, nonatomic) IBOutlet UITableViewCell *teaCell;  
  22. @end  

YGAViewController.m

初始化数据:

[cpp]  view plain copy
  1. //初始化老师数据  
  2. NSDictionary *tDic1 = [[NSDictionary alloc]initWithObjectsAndKeys:@"史小强",@"name",@"讲师",@"type", @"C406", @"office",nil];  
  3. NSDictionary *tDic2 = [[NSDictionary alloc]initWithObjectsAndKeys:@"李永乐",@"name",@"教授",@"type", @"D011", @"office",nil];  
  4. _teaArray = [[NSArray alloc]initWithObjects:tDic1,tDic2, nil];  

Cell的生成方法,此时section等于2,调用customCellByXib方法:

[cpp]  view plain copy
  1. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{  
  2.     UITableViewCell *cell;  
  3.     if([indexPath section] == 1){  
  4.         //通过代码自定义cell  
  5.         cell = [self customCellWithOutXib:tableView withIndexPath:indexPath];  
  6.     }  
  7.     else{  
  8.         //通过nib自定义cell  
  9.         cell = [self customCellByXib:tableView withIndexPath:indexPath];  
  10.     }  
  11.     assert(cell != nil);  
  12.     return cell;  
  13. }  
  14.   
  15. //通过nib文件自定义cell  
  16. -(UITableViewCell *)customCellByXib:(UITableView *)tableView withIndexPath:(NSIndexPath *)indexPath{  
  17.     static NSString *customXibCellIdentifier = @"CustomXibCellIdentifier";//建立标志符  
  18.     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:customXibCellIdentifier];  
  19.     if(cell == nil){  
  20.         NSArray *nib = [[NSBundle mainBundle]loadNibNamed:@"CustomCell" owner:self options:nil];//加载nib文件  
  21.         if([nib count]>0){  
  22.             cell = _teaCell;  
  23.         }  
  24.         else{  
  25.             assert(NO);//读取文件失败  
  26.         }  
  27.     }  
  28.     NSUInteger row = [indexPath row];//获得当前行  
  29.     NSDictionary *dic  = [_teaArray objectAtIndex:row];//对应行的数据  
  30.     //姓名  
  31.     ((UILabel *)[cell.contentView viewWithTag:teaNameTag]).text = [dic objectForKey:@"name"];  
  32.   
  33.     //类型  
  34.     ((UILabel *)[cell.contentView viewWithTag:teaTypeTag]).text = [dic objectForKey:@"type"];  
  35.   
  36.     //办公室  
  37.     ((UILabel *)[cell.contentView viewWithTag:teaOfficeTag]).text = [dic objectForKey:@"office"];  
  38.     return cell;  
  39. }  


四、在代码里面自定义cell

配置的步骤和上面一样,主要区别在于需要自己自定义控件来是实现cell。

YGAViewController.m

数据:

[cpp]  view plain copy
  1. //初始化学生数据(class,name,stuNumber,image)  
  2.     NSDictionary *dic1 = [[NSDictionary alloc]initWithObjectsAndKeys:@"一班",@"class",@"李秋",@"name",@"200931000919",@"stuNumber",@"1.jpg",@"image",nil];  
  3.     NSDictionary *dic2 = [[NSDictionary alloc]initWithObjectsAndKeys:@"二班",@"class",@"张亮",@"name",@"200931000920",@"stuNumber",@"2.jpg",@"image",nil];  
  4.     NSDictionary *dic3 = [[NSDictionary alloc]initWithObjectsAndKeys:@"三班",@"class",@"杨光",@"name",@"200931000921",@"stuNumber",@"3.jpg",@"image",nil];  
  5.     NSDictionary *dic4 = [[NSDictionary alloc]initWithObjectsAndKeys:@"四班",@"class",@"atany",@"name",@"200931000922",@"stuNumber",@"4.jpg",@"image",nil];  
  6.    
  7.     _stuArray = [[NSArray alloc]initWithObjects:dic1, dic2, dic3, dic4, nil];  

自定义Cell:

[cpp]  view plain copy
  1. -(UITableViewCell *)customCellWithOutXib:(UITableView *)tableView withIndexPath:(NSIndexPath *)indexPath{  
  2.     //定义标识符  
  3.     static NSString *customCellIndentifier = @"CustomCellIndentifier";  
  4.     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:customCellIndentifier];  
  5.       
  6.     //定义新的cell  
  7.     if(cell == nil){  
  8.         //使用默认的UITableViewCell,但是不使用默认的image与text,改为添加自定义的控件  
  9.         cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:customCellIndentifier];  
  10.         //姓名  
  11.         CGRect nameRect = CGRectMake(88, 15, 70, 25);  
  12.         UILabel *nameLabel = [[UILabel alloc]initWithFrame:nameRect];  
  13.         nameLabel.font = [UIFont boldSystemFontOfSize:nameFontSize];  
  14.         nameLabel.tag = nameTag;//设置tag,以便后面的定位  
  15.         nameLabel.textColor = [UIColor brownColor];  
  16.         [cell.contentView addSubview:nameLabel];  
  17.           
  18.         //班级  
  19.         CGRect classTipRect = CGRectMake(88, 40, 40, 14);  
  20.         UILabel *classTipLabel = [[UILabel alloc]initWithFrame:classTipRect];  
  21.         classTipLabel.text = @"班级:";  
  22.         classTipLabel.font = [UIFont boldSystemFontOfSize:fontSize];  
  23.         [cell.contentView addSubview:classTipLabel];  
  24.           
  25.           
  26.         CGRect classRect = CGRectMake(135, 40, 40, 14);  
  27.         UILabel *classLabel = [[UILabel alloc]initWithFrame:classRect];  
  28.         classLabel.tag = classTag;  
  29.         classLabel.font = [UIFont boldSystemFontOfSize:fontSize];  
  30.         [cell.contentView addSubview:classLabel];  
  31.           
  32.         //学号  
  33.         CGRect stuNameTipRect = CGRectMake(88, 60, 40, 12);  
  34.         UILabel *stuNameTipLabel = [[UILabel alloc]initWithFrame:stuNameTipRect];  
  35.         stuNameTipLabel.text = @"学号:";  
  36.         stuNameTipLabel.font = [UIFont boldSystemFontOfSize:fontSize];  
  37.         [cell.contentView addSubview:stuNameTipLabel];  
  38.           
  39.         CGRect stuNameRect = CGRectMake(135, 60, 150, 14);  
  40.         UILabel *stuNameLabel = [[UILabel alloc]initWithFrame:stuNameRect];  
  41.         stuNameLabel.tag = stuNumberTag;  
  42.         stuNameLabel.font = [UIFont boldSystemFontOfSize:fontSize];  
  43.           
  44.         [cell.contentView addSubview:stuNameLabel];  
  45.           
  46.         //图片  
  47.         CGRect imageRect = CGRectMake(15, 15, 60, 60);  
  48.         UIImageView *imageView = [[UIImageView alloc]initWithFrame:imageRect];  
  49.         imageView.tag = imageTag;  
  50.           
  51.         //为图片添加边框  
  52.         CALayer *layer = [imageView layer];  
  53.         layer.cornerRadius = 8;//角的弧度  
  54.         layer.borderColor = [[UIColor whiteColor]CGColor];  
  55.         layer.borderWidth = 1;//边框宽度  
  56.         layer.masksToBounds = YES;//图片填充边框  
  57.         [cell.contentView addSubview:imageView];  
  58.     }  
  59.     //获得行数  
  60.     NSUInteger row = [indexPath row];  
  61.       
  62.     //取得相应行数的数据(NSDictionary类型,包括姓名、班级、学号、图片名称)  
  63.     NSDictionary *dic = [_stuArray objectAtIndex:row];  
  64.       
  65.     //设置图片  
  66.     UIImageView *imageV = (UIImageView *)[cell.contentView viewWithTag:imageTag];  
  67.     imageV.image = [UIImage imageNamed:[dic objectForKey:@"image"]];  
  68.       
  69.     //设置姓名  
  70.     UILabel *name = (UILabel *)[cell.contentView viewWithTag:nameTag];  
  71.     name.text = [dic objectForKey:@"name"];  
  72.       
  73.     //设置班级  
  74.     UILabel *class = (UILabel *)[cell.contentView viewWithTag:classTag];  
  75.     class.text = [dic objectForKey:@"class"];  
  76.       
  77.     //设置学号  
  78.     UILabel *stuNumber = (UILabel *)[cell.contentView viewWithTag:stuNumberTag];  
  79.     stuNumber.text = [dic objectForKey:@"stuNumber"];  
  80.       
  81.     //设置右侧箭头  
  82.     cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;  
  83.     return cell;  
  84. }  

1、在cell=nil里面摆好控件的位置,设置好相应的tag,然后在设置数据时,通过cell.contentViewviewWithTag:Tag 的形式定位到对应的Cell里面的tag。

2、通过NSUInteger row = [indexPath row]的到当前是哪一行,NSDictionary *dic = [_stuArrayobjectAtIndex:row];得到那一行的数据。


demo下载地址:http://download.csdn.net/detail/yang8456211/6409667


【传送门】想系统学习UITableView SDK代理方法可以看这篇文章:UITableView SDK委托方法详解

http://blog.csdn.net/yang8456211/article/details/12908429 


杨光(atany)原创,转载请注明博主与博文链接,未经博主允许,禁止任何商业用途。

博文地址:http://blog.csdn.net/yang8456211/article/details/12790487

博客地址:http://blog.csdn.net/yang8456211

—— by atany

本文遵循“署名-非商业用途-保持一致”创作公用协议

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值