新手教程之使用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就告一段落,如有錯誤,煩請各位指正,希望能幫到大家,不是故意黑金三胖.