OC中UITableView之自定義cell的使用(1):通過xib建立
阿新 • • 發佈:2018-12-16
在使用UITableView做開發時,常常會遇到 系統提供的樣式無法滿足專案需求的情況,這時就需要根據需求來自定義cell。
自定義cell有兩種方式:
· 通過xib自定義cell(適用於cell中子控制元件個數固定、cell樣式統一的結構,例如:商品的列表頁面)
· 通過程式碼自定義cell(適用於cell中子控制元件個數不固定、cell樣式不統一的結構,例如:微博列表)
通過xib建立自定義cell基本步驟(商品列表例子):
1.建立一個xib檔案描述view ,設定資料來源為控制器
TgCell.xib
2.新建一個新的類(繼承自系統自帶的某個view,繼承自哪個類,取決於xib根物件的Class)
新建類的類名最好跟xib的檔名保持一致
將xib中的控制元件與自定義類進行連線
@property (weak, nonatomic) IBOutlet UIImageView *iconView;
@property (weak, nonatomic) IBOutlet UILabel *titleView;
@property (weak, nonatomic) IBOutlet UILabel *priceView;
@property (weak, nonatomic) IBOutlet UILabel *countView;
包含一個模型資料屬性
@property (strong, nonatomic) Tg *tg;
重寫模型資料的setter方法 和 構造方法
//構造方法 +(instancetype)tgCellWithTableView:(UITableView *)tableView { //cell的識別符號 static NSString *ID = @"TGID"; //從緩衝池中拿到識別符號是ID的cell物件 TgCell *cell = [tableView dequeueReusableCellWithIdentifier:ID]; if (cell == nil) { //如果沒有找到緩衝池中的物件, //則新建一個 通過loadNibNamed 方法從xib返回cell物件 cell = [[[NSBundle mainBundle] loadNibNamed:@"TgCell" owner:nil options:nil] lastObject]; } return cell; } //setter方法 -(void)setTg:(Tg *)tg { _tg = tg; //圖片 self.iconView.image = [UIImage imageNamed:self.tg.icon]; //標題 self.titleView.text = self.tg.title; //價格 self.priceView.text = [NSString stringWithFormat:@"¥ %@",self.tg.price]; //人數 self.countView.text = [NSString stringWithFormat:@"%@人已購買",self.tg.buyCount]; }
3.控制器中
1)遵守TableView的資料來源協議 <UITableViewDataSource>
@interface ViewController () <UITableViewDataSource>
@end
1)包含模型資料屬性,並拿到TableView物件
@property (strong, nonatomic) NSArray *tgInfo;
@property (weak, nonatomic) IBOutlet UITableView *tableView;
2)重寫資料模型的setter方法,實現資料從檔案到模型的轉換
/**
tgInfo的get方法實現懶載入
*/
-(NSArray *)tgInfo
{
if (_tgInfo == nil) {
NSString *path = [[NSBundle mainBundle] pathForResource:@"tgs.plist" ofType:nil];
NSArray *dictArray = [NSArray arrayWithContentsOfFile:path];
NSMutableArray *tgArray = [NSMutableArray array];
for (NSDictionary *dict in dictArray) {
Tg *tg = [Tg tgWithDict:dict];
[tgArray addObject:tg];
}
_tgInfo = tgArray;
}
return _tgInfo;
}
3)重寫TableView的資料來源方法
/**
每組有多少行資料
*/
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return self.tgInfo.count;
}
/**
設定每條資料
*/
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
//1.建立cell
TgCell *cell = [TgCell tgCellWithTableView:tableView];
//2.給cell傳遞模型資料
cell.tg = self.tgInfo[indexPath.row];
return cell;
}