新手教程之使用Xib自訂UITableViewCell，xibuitableviewcell

新手教程之使用Xib自訂UITableViewCell，xibuitableviewcell
新手教程之使用Xib自訂UITableViewCell前言

首先:什麼是UITableView?看圖

其次:什麼是cell?

然後:為什麼要自定cell,UITableView不是內建的有cell麼?

因為在日常開發中,系統內建的cell滿足不了客戶和開發人員的需求(並且每個cell中的內容\大小\樣式相同),我們就需要自訂cell來實現更加最佳化的功能.比如下面這種

最後:怎麼自訂cell?

1.建立一個新的項目,在storyboard中拖入兩個imageView,兩個label

 

 

2.在ViewController裡面建立UITableView

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 @interface ViewController ()<UITableViewDelegate,UITableViewDataSource>12 @property (nonatomic, strong) UITableView *tableView;13 @end14 15 @implementation ViewController16 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 當前tableView43 *44 * @return 組的個數45 */46 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {47 return 1;48 }49 /**50 * 每一組返回多少行51 *52 * @param tableView 當前tableView53 * @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的cell65 UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:reuseIdentifier];66 //如果緩衝池中沒有,那麼建立一個新的cell67 if (!cell) {68 cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:reuseIdentifier];69 }70 //返回當前cell71 return cell;72 }系統內建的UITableView

運行效果

4.Xib自訂cell

 

首先我們要建立一個xib檔案,有兩種建立方式:

直接

第一種:

第二種:

第二種在建立類的時候也同時建立了xib,比較方便,要是用第一種方式建立,還得關聯類別

下面就要拖控制項到Xib的cell中並給控制項設定布局(約束)了

 

下面進入代碼階段

5.擷取Xib自訂的cell

代碼:(XibTableViewCell.h)

 1 // 2 //  XibTableViewCell.h 3 //  Xib自訂UITableViewCell 4 // 5 //  Created by admin on 16/5/16. 6 //  Copyright © 2016年 KXZDJ. All rights reserved. 7 // 8  9 #import <UIKit/UIKit.h>10 11 @interface XibTableViewCell : UITableViewCell12 //載入xib的方法(自己寫的,不是系統內建)13 +(instancetype)xibTableViewCell;14 15 @end

(XibTableViewCell.m)

 1 // 2 //  XibTableViewCell.m 3 //  Xib自訂UITableViewCell 4 // 5 //  Created by admin on 16/5/16. 6 //  Copyright © 2016年 KXZDJ. All rights reserved. 7 // 8  9 #import "XibTableViewCell.h"10 11 @implementation XibTableViewCell12 //實作類別方法13 +(instancetype)xibTableViewCell {14     //在類方法中載入xib檔案,注意:loadNibNamed:owner:options:這個方法返回的是NSArray,所以在後面加上firstObject或者lastObject或者[0]都可以;因為我們的Xib檔案中,只有一個cell15     return [[[NSBundle mainBundle] loadNibNamed:@"XibTableViewCell" owner:nil options:nil] lastObject];16 }17 18 - (void)awakeFromNib {19     // Initialization code20 }21 22 - (void)setSelected:(BOOL)selected animated:(BOOL)animated {23     [super setSelected:selected animated:animated];24 25     // Configure the view for the selected state26 }27 28 @end

6.把xib檔案載入到系統的UITableView中替換系統內建的cell

這一步必須在

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath方法中進行,或者是封裝在自己定義的類中,不過就算封裝了,也要在這個方法中調用.

6.1給控制項拖線關聯到類中,方便調用控制項

6.2代碼:

 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 @end16 17 @implementation ViewController18 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 當前tableView45  *46  *  @return 組的個數47  */48 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {49     return 1;50 }51 /**52  *  每一組返回多少行53  *54  *  @param tableView 當前tableView55  *  @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的cell67     //這裡換成自己定義的cell68     XibTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:reuseIdentifier];69     //如果緩衝池中沒有,那麼建立一個新的cell70     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     //返回當前cell82     return cell;83 }84 /**85  *  返回cell的行高86  *87  *  @param tableView 當前tableView88  *  @param indexPath89  *90  *  @return cell的行高91  */92 -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {93     return 200;94 }95 96 @end

 

運行效果

總結:到此Xib自訂UITableViewCell就告一段落,如有錯誤,煩請各位指正,希望能幫到大家,不是故意黑金三胖.