新手教程之使用Xib自定义UITableViewCell

新手教程之使用Xib自定义UITableViewCell

前言

首先:什么是UITableView?看图

其次:什么是cell?

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

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

最后:怎么自定义cell?

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

 

2.在ViewController里面创建UITableView

//
//  ViewController.m
//  Xib自定义UITableViewCell
//
//  Created by admin on 16/5/16.
//  Copyright © 2016年 KXZDJ. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()<UITableViewDelegate,UITableViewDataSource>
@property (nonatomic, strong) UITableView *tableView;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    [self config];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


-(void)config {
    //初始化tableView,并给tableView设置frame以及样式
    self.tableView = [[UITableView alloc] initWithFrame:[UIScreen mainScreen].bounds style:UITableViewStylePlain];
    //遵守代理和数据源(因为要用到代理和数据源方法)
    self.tableView.delegate = self;
    self.tableView.dataSource = self;
    //添加到ViewController的视图中
    [self.view addSubview:self.tableView];
}

/**
 *  返回多少个组(默认是1组,如果只有一组可以不实现这个方法)
 *
 *  @param tableView 当前tableView
 *
 *  @return 组的个数
 */
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}
/**
 *  每一组返回多少行
 *
 *  @param tableView 当前tableView
 *  @param section   当前组
 *
 *  @return 行的个数
 */
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 20;
}

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    //指定cell的重用标识符
    static NSString *reuseIdentifier = @"CELL";
    //去缓存池找名叫reuseIdentifier的cell
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:reuseIdentifier];
    //如果缓存池中没有,那么创建一个新的cell
    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:reuseIdentifier];
    }
    //返回当前cell
    return cell;
}

运行效果

4.Xib自定义cell

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

直接上图

第一种:

第二种:

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

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

下面进入代码阶段

5.获取Xib自定义的cell

代码:(XibTableViewCell.h)

//
//  XibTableViewCell.h
//  Xib自定义UITableViewCell
//
//  Created by admin on 16/5/16.
//  Copyright © 2016年 KXZDJ. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface XibTableViewCell : UITableViewCell
//加载xib的方法(自己写的,不是系统自带)
+(instancetype)xibTableViewCell;

@end

(XibTableViewCell.m)

//
//  XibTableViewCell.m
//  Xib自定义UITableViewCell
//
//  Created by admin on 16/5/16.
//  Copyright © 2016年 KXZDJ. All rights reserved.
//

#import "XibTableViewCell.h"

@implementation XibTableViewCell
//实现类方法
+(instancetype)xibTableViewCell {
    //在类方法中加载xib文件,注意:loadNibNamed:owner:options:这个方法返回的是NSArray,所以在后面加上firstObject或者lastObject或者[0]都可以;因为我们的Xib文件中,只有一个cell
    return [[[NSBundle mainBundle] loadNibNamed:@"XibTableViewCell" owner:nil options:nil] lastObject];
}

- (void)awakeFromNib {
    // Initialization code
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
    [super setSelected:selected animated:animated];

    // Configure the view for the selected state
}

@end

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

这一步必须在

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

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

6.2代码:

//
//  ViewController.m
//  Xib自定义UITableViewCell
//
//  Created by admin on 16/5/16.
//  Copyright © 2016年 KXZDJ. All rights reserved.
//

#import "ViewController.h"
//导入头文件
#import "XibTableViewCell.h"

@interface ViewController ()<UITableViewDelegate,UITableViewDataSource>
@property (nonatomic, strong) UITableView *tableView;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    [self config];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


-(void)config {
    //初始化tableView,并给tableView设置frame以及样式
    self.tableView = [[UITableView alloc] initWithFrame:[UIScreen mainScreen].bounds style:UITableViewStylePlain];
    //遵守代理和数据源(因为要用到代理和数据源方法)
    self.tableView.delegate = self;
    self.tableView.dataSource = self;
    //添加到ViewController的视图中
    [self.view addSubview:self.tableView];
}

/**
 *  返回多少个组(默认是1组,如果只有一组可以不实现这个方法)
 *
 *  @param tableView 当前tableView
 *
 *  @return 组的个数
 */
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}
/**
 *  每一组返回多少行
 *
 *  @param tableView 当前tableView
 *  @param section   当前组
 *
 *  @return 行的个数
 */
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 20;
}

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    //指定cell的重用标识符
    static NSString *reuseIdentifier = @"CELL";
    //去缓存池找名叫reuseIdentifier的cell
    //这里换成自己定义的cell
    XibTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:reuseIdentifier];
    //如果缓存池中没有,那么创建一个新的cell
    if (!cell) {
        //这里换成自己定义的cell,并调用类方法加载xib文件
        cell = [XibTableViewCell xibTableViewCell];
    }
    //给cell赋值
    cell.backView.image = [UIImage imageNamed:@"223733vuf3mhajhd04hdh5"];
    cell.infoLabel.text = @"金三胖真帅";
    cell.infoLabel.textColor = [UIColor redColor];
    cell.zanView.image = [UIImage imageNamed:@"103112778vn00czp59p6w7"];
    cell.zanLabel.text = @"100";
    cell.zanLabel.textColor = [UIColor redColor];
    //返回当前cell
    return cell;
}
/**
 *  返回cell的行高
 *
 *  @param tableView 当前tableView
 *  @param indexPath
 *
 *  @return cell的行高
 */
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 200;
}

@end

运行效果

总结:到此Xib自定义UITableViewCell就告一段落,如有错误,烦请各位指正,希望能帮到大家,不是故意黑金三胖.