使用Xib自定义UITableViewCell

ゝ一纸荒年。 2022-06-05 06:06 230阅读 0赞

# 前言 #

首先:什么是UITableView?看图

![785927-20160516224312248-1615342692.png][]

其次:什么是cell?

![785927-20160516224336810-1932718857.png][]

然后:为什么要自定cell,UITableView不是自带的有cell么?

因为在日常开发中,系统自带的cell满足不了客户和开发人员的需求(并且每个cell中的内容\\大小\\样式相同),我们就需要自定义cell来实现更加优化的功能.比如下面这种

![785927-20160516225128935-527822431.png][]

最后:怎么自定义cell?

**1.创建一个新的项目,在storyboard中拖入两个imageView,两个label**

**![785927-20160516222443107-1294292906.png][]**

** **

**2.在ViewController里面创建UITableView**

![ExpandedBlockStart.gif][]

![复制代码][copycode.gif]

1 //
     2 //  ViewController.m
     3 //  Xib自定义UITableViewCell
     4 //
     5 //  Created by admin on 16/5/16.
     6
     7 //
     8 
     9 #import "ViewController.h"
    10 
    11 @interface ViewController ()<UITableViewDelegate,UITableViewDataSource>
    12 @property (nonatomic, strong) UITableView *tableView;
    13 @end
    14 
    15 @implementation ViewController
    16 
    17 - (void)viewDidLoad {
    18     [super viewDidLoad];
    19     // Do any additional setup after loading the view, typically from a nib.
    20     [self config];
    21 }
    22 
    23 - (void)didReceiveMemoryWarning {
    24     [super didReceiveMemoryWarning];
    25     // Dispose of any resources that can be recreated.
    26 }
    27 
    28 
    29 -(void)config {
    30     //初始化tableView,并给tableView设置frame以及样式
    31     self.tableView = [[UITableView alloc] initWithFrame:[UIScreen mainScreen].bounds style:UITableViewStylePlain];
    32     //遵守代理和数据源(因为要用到代理和数据源方法)
    33     self.tableView.delegate = self;
    34     self.tableView.dataSource = self;
    35     //添加到ViewController的视图中
    36     [self.view addSubview:self.tableView];
    37 }
    38 
    39 /**
    40  *  返回多少个组(默认是1组,如果只有一组可以不实现这个方法)
    41  *
    42  *  @param tableView 当前tableView
    43  *
    44  *  @return 组的个数
    45  */
    46 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    47     return 1;
    48 }
    49 /**
    50  *  每一组返回多少行
    51  *
    52  *  @param tableView 当前tableView
    53  *  @param section   当前组
    54  *
    55  *  @return 行的个数
    56  */
    57 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    58     return 20;
    59 }
    60 
    61 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    62     //指定cell的重用标识符
    63     static NSString *reuseIdentifier = @"CELL";
    64     //去缓存池找名叫reuseIdentifier的cell
    65     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:reuseIdentifier];
    66     //如果缓存池中没有,那么创建一个新的cell
    67     if (!cell) {
    68         cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:reuseIdentifier];
    69     }
    70     //返回当前cell
    71     return cell;
    72 }

![复制代码][copycode.gif]

运行效果

![785927-20160516225239904-1268246375.png][]

**4.Xib自定义cell**

首先我们要创建一个xib文件,有两种创建方式:

直接上图

第一种:

![785927-20160516225850263-950686794.png][]

![785927-20160516230254544-948846356.png][]

第二种:

![785927-20160516230635029-1516444314.png][]

![785927-20160516230653388-920830186.png][]

![785927-20160516230704763-1419301741.png][]

第二种在创建类的时候也同时创建了xib,比较方便,要是用第一种方式创建,还得关联类

![785927-20160516230909748-2078203960.png][]

下面就要拖控件到Xib的cell中并给控件设置布局(约束)了

![785927-20160516231027232-208166959.png][]

![785927-20160516231039185-80087734.png][]

下面进入代码阶段

**5.获取Xib自定义的cell**

代码:(XibTableViewCell.h)

![复制代码][copycode.gif]

1 //
     2 //  XibTableViewCell.h
     3 //  Xib自定义UITableViewCell
     4 //
     5 //  Created by admin on 16/5/16.
     6 //  Copyright © 2016年. All rights reserved.
     7 //
     8 
     9 #import <UIKit/UIKit.h>
    10 
    11 @interface XibTableViewCell : UITableViewCell
    12 //加载xib的方法(自己写的,不是系统自带)
    13 +(instancetype)xibTableViewCell;
    14 
    15 @end

![复制代码][copycode.gif]

(XibTableViewCell.m)

![复制代码][copycode.gif]

1 //
     2 //  XibTableViewCell.m
     3 //  Xib自定义UITableViewCell
     4 //
     5 //  Created by admin on 16/5/16.
     6 //  Copyright © 2016年. All rights reserved.
     7 //
     8 
     9 #import "XibTableViewCell.h"
    10 
    11 @implementation XibTableViewCell
    12 //实现类方法
    13 +(instancetype)xibTableViewCell {
    14     //在类方法中加载xib文件,注意:loadNibNamed:owner:options:这个方法返回的是NSArray,所以在后面加上firstObject或者lastObject或者[0]都可以;因为我们的Xib文件中,只有一个cell
    15     return [[[NSBundle mainBundle] loadNibNamed:@"XibTableViewCell" owner:nil options:nil] lastObject];
    16 }
    17 
    18 - (void)awakeFromNib {
    19     // Initialization code
    20 }
    21 
    22 - (void)setSelected:(BOOL)selected animated:(BOOL)animated {
    23     [super setSelected:selected animated:animated];
    24 
    25     // Configure the view for the selected state
    26 }
    27 
    28 @end

![复制代码][copycode.gif]

**6.把xib文件加载到系统的UITableView中替换系统自带的cell**

这一步必须在

\-(UITableViewCell \*)tableView:(UITableView \*)tableView cellForRowAtIndexPath:(NSIndexPath \*)indexPath方法中进行,或者是封装在自己定义的类中,不过就算封装了,也要在这个方法中调用.

6.1给控件拖线关联到类中,方便调用控件

![785927-20160516232908482-21295444.png][]

6.2代码:

![复制代码][copycode.gif]

1 //
     2 //  ViewController.m
     3 //  Xib自定义UITableViewCell
     4 //
     5 //  Created by admin on 16/5/16.
     6 //  Copyright © 2016年 KXZDJ. All rights reserved.
     7 //
     8 
     9 #import "ViewController.h"
    10 //导入头文件
    11 #import "XibTableViewCell.h"
    12 
    13 @interface ViewController ()<UITableViewDelegate,UITableViewDataSource>
    14 @property (nonatomic, strong) UITableView *tableView;
    15 @end
    16 
    17 @implementation ViewController
    18 
    19 - (void)viewDidLoad {
    20     [super viewDidLoad];
    21     // Do any additional setup after loading the view, typically from a nib.
    22     [self config];
    23 }
    24 
    25 - (void)didReceiveMemoryWarning {
    26     [super didReceiveMemoryWarning];
    27     // Dispose of any resources that can be recreated.
    28 }
    29 
    30 
    31 -(void)config {
    32     //初始化tableView,并给tableView设置frame以及样式
    33     self.tableView = [[UITableView alloc] initWithFrame:[UIScreen mainScreen].bounds style:UITableViewStylePlain];
    34     //遵守代理和数据源(因为要用到代理和数据源方法)
    35     self.tableView.delegate = self;
    36     self.tableView.dataSource = self;
    37     //添加到ViewController的视图中
    38     [self.view addSubview:self.tableView];
    39 }
    40 
    41 /**
    42  *  返回多少个组(默认是1组,如果只有一组可以不实现这个方法)
    43  *
    44  *  @param tableView 当前tableView
    45  *
    46  *  @return 组的个数
    47  */
    48 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    49     return 1;
    50 }
    51 /**
    52  *  每一组返回多少行
    53  *
    54  *  @param tableView 当前tableView
    55  *  @param section   当前组
    56  *
    57  *  @return 行的个数
    58  */
    59 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    60     return 20;
    61 }
    62 
    63 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    64     //指定cell的重用标识符
    65     static NSString *reuseIdentifier = @"CELL";
    66     //去缓存池找名叫reuseIdentifier的cell
    67     //这里换成自己定义的cell
    68     XibTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:reuseIdentifier];
    69     //如果缓存池中没有,那么创建一个新的cell
    70     if (!cell) {
    71         //这里换成自己定义的cell,并调用类方法加载xib文件
    72         cell = [XibTableViewCell xibTableViewCell];
    73     }
    74     //给cell赋值
    75     cell.backView.image = [UIImage imageNamed:@"223733vuf3mhajhd04hdh5"];
    76     cell.infoLabel.text = @"金三胖真帅";
    77     cell.infoLabel.textColor = [UIColor redColor];
    78     cell.zanView.image = [UIImage imageNamed:@"103112778vn00czp59p6w7"];
    79     cell.zanLabel.text = @"100";
    80     cell.zanLabel.textColor = [UIColor redColor];
    81     //返回当前cell
    82     return cell;
    83 }
    84 /**
    85  *  返回cell的行高
    86  *
    87  *  @param tableView 当前tableView
    88  *  @param indexPath
    89  *
    90  *  @return cell的行高
    91  */
    92 -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    93     return 200;
    94 }
    95 
    96 @end

![复制代码][copycode.gif]

运行效果

![785927-20160516233412748-303699252.png][]

# 总结:到此Xib自定义UITableViewCell就告一段落 #

[785927-20160516224312248-1615342692.png]: /images/20220605/f486133e32cd46e995a8cbb47e535779.png
[785927-20160516224336810-1932718857.png]: /images/20220605/6dfbecdf19da4521a1e05fe76eeba50d.png
[785927-20160516225128935-527822431.png]: /images/20220605/b7f9934242e846d0841c7c2f4545098d.png
[785927-20160516222443107-1294292906.png]: /images/20220605/f38596ce87924702ba354a2e4ef18bd7.png
[ExpandedBlockStart.gif]: /images/20220605/0aecd4f757dd4aba858ca4c7e5a291cd.png
[copycode.gif]: /images/20220605/ea942225798244acb27f25c718896137.png
[785927-20160516225239904-1268246375.png]: /images/20220605/3c62d3f57d0a4d9a93747a44d1a3f7f6.png
[785927-20160516225850263-950686794.png]: /images/20220605/15be4ebbf08043f9a379a3c2e6ddb6ee.png
[785927-20160516230254544-948846356.png]: /images/20220605/0aaac1f742f64f798fae5294a6bb330f.png
[785927-20160516230635029-1516444314.png]: /images/20220605/faebaf5f52a444759b11f0fb13aac6d5.png
[785927-20160516230653388-920830186.png]: /images/20220605/ce4492562b5741f78a2c51fdbe9e02d5.png
[785927-20160516230704763-1419301741.png]: /images/20220605/260886b1c434492c8cff1ed63073abf4.png
[785927-20160516230909748-2078203960.png]: /images/20220605/154b96a75c7d4e0e8ca48b58ef637f1d.png
[785927-20160516231027232-208166959.png]: /images/20220605/40c483448c4b4f0d91132edeca81f048.png
[785927-20160516231039185-80087734.png]: /images/20220605/4bce4a2b9ddc4e3bad57b850d712037f.png
[785927-20160516232908482-21295444.png]: /images/20220605/5f93b261592b44169135cd36451ad67d.png
[785927-20160516233412748-303699252.png]: /images/20220605/83972887d46e49b2b1d89007ec255947.png