自定義Cell時Cell的控件都是添加到Cell的contentView上
KVC方法設置屬性值, 快速創建數據源
- (void)setValuesForKeysWithDictionary:(NSDictionary *)keyedValues
[model setValuesForKeysWithDictionary:dict];
使用XIB方式時新建Cell對象時使用
- (NSArray *)loadNibNamed:(NSString *)name owner:(id)owner options:(NSDictionary *)options
cell = [[[NSBundle mainBundle] loadNibNamed:@"BookCell" owner:self options:nil] lastObject];
一.代碼自定義 "UITableViewCell"
題目要求:根據plist文件準備數據源, 并創建模型
-
根據需求和plist文件創建模型類
-
創建數據源(數據源數組中的數據是模型對象): 從plist文件中獲取數據
-
新建tableView
-
核心:自定義Cell
// 自定義cell // 繼承于UITableViewCell創建一個類型 // 然后添加需要的視圖, 用來顯示數據 @interface BookCell : UITableViewCell // 左邊的圖片, 需要注意: 不要和父類的imageView屬性沖突 @property (nonatomic, strong) UIImageView *bookImageView; // 書名, 需要注意: 不要和父類的textLabel和DetailTextLable屬性沖突 @property (nonatomic, strong) UILabel *nameLabel; // 價格 @property (nonatomic, strong) UILabel *prcieLabel; // 描述 @property (nonatomic, strong) UILabel *descLabel; // 顯示數據 - (void)config:(BookModel *)model; @end- 重寫
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier { self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]; if (self) { // 初始化視圖對象 // 圖片 _bookImageView = [[UIImageView alloc] initWithFrame:CGRectMake(20, 10, 60, 60)]; // 添加到父視圖 // 自定義cell的時候, 所有視圖都添加到cell的contentView中 [self.contentView addSubview:_bookImageView]; // 書名 _nameLabel = [[UILabel alloc] initWithFrame:CGRectMake(100, 5, 200, 20)]; [self.contentView addSubview:_nameLabel]; // 價格 _prcieLabel = [[UILabel alloc] initWithFrame:CGRectMake(100, 30, 200, 20)]; [self.contentView addSubview:_prcieLabel]; // 描述 _descLabel = [[UILabel alloc] initWithFrame:CGRectMake(100, 55, 200, 20)]; [self.contentView addSubview:_descLabel]; } return self; }- 自定義Cell中顯示數據的方法
- (void)config:(BookModel *)model { self.bookImageView.image = [UIImage imageNamed:model.icon]; self.nameLabel.text = model.name; self.prcieLabel.text = model.price; self.descLabel.text = model.detail; } - 重寫
-
DataSource方法
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *cellID = @"cellID"; BookCell *cell = [tableView dequeueReusableCellWithIdentifier:cellID]; if (nil == cell) { cell = [[BookCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellID]; } [cell config:self.dataArray[indexPath.row]]; return cell; }
二. 代碼自定義Cell為一個ScrollView加上其他控件的效果
-
初步創建廣告數據的模型類
#import <Foundation/Foundation.h> @interface AdModel : NSObject // 圖片 @property (nonatomic, strong) NSString *imageName; // 標題文字 @property (nonatomic, strong) NSString *title; @end -
準備廣告cell的數據源
@property (nonatomic, strong) NSMutableArray *adArray;// 創建廣告cell對應的數據 - (void)createAdvertisementData { // 數據源數組 _adArray = [NSMutableArray array]; for (int i = 0; i < 4; i++) { AdModel *model = [[AdModel alloc] init]; model.imageName = [NSString stringWithFormat:@"image%d", i]; model.title = [NSString stringWithFormat:@"第%d個標題", i+1]; [_adArray addObject:model]; } } -
核心: 自定義Cell
- AdCell.h
@interface AdCell : UITableViewCell // 滾動視圖, 用來顯示圖片 @property (nonatomic, strong) UIScrollView *scrollView; // 底部的背景視圖(只需顯示顏色) @property (nonatomic, strong) UIView *bgView; // 標題文字 @property (nonatomic, strong) UILabel *titleLabel; // UIPageControl @property (nonatomic, strong) UIPageControl *pageCtrl; // 顯示數據(如果是之前的config: 方法, 相當于只是setter方法) @property (nonatomic, strong) NSArray *adArray; @end- AdCell.m
#import "AdCell.h"
#import "AdModel.h"
#define kHeightOfStatusBar 20
#define kHeightOfAssemble 44
#define kHeightOfNavigationAndStatusBar 64
#define kBoundsOfScreen [[UIScreen mainScreen] bounds]
#define kWidthOfScreen [[UIScreen mainScreen] bounds].size.width
#define kHeightOfScreen [[UIScreen mainScreen] bounds].size.height
@implementation AdCell
// 重寫父類的方法
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
// 初始化視圖
// 1. 滾動視圖
_scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, kWidthOfScreen, 160)];
[self.contentView addSubview:_scrollView];
// 2. 背景視圖
_bgView = [[UIView alloc] initWithFrame:CGRectMake(0, 130, kWidthOfScreen, 30)];
_bgView.backgroundColor = [UIColor grayColor];
// 設置透明度
_bgView.alpha = 0.5;
[self.contentView addSubview:_bgView];
// 3. 標題文字
_titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(20, 130, 120, 30)];
_titleLabel.textColor = [UIColor whiteColor];
[self.contentView addSubview:_titleLabel];
// 4. pageCtrl
_pageCtrl = [[UIPageControl alloc] initWithFrame:CGRectMake(160, 130, kWidthOfScreen - 180, 30)];
[self.contentView addSubview:_pageCtrl];
}
return self;
}
// 重新實現setter方法
- (void)setAdArray:(NSArray *)adArray
{
_adArray = adArray;
// 添加額外的功能
// 1.滾動視圖: 顯示4張圖片
for (int i = 0; i < adArray.count; i++) {
// 創建圖片視圖對象
AdModel *model = adArray[i];
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(i*kWidthOfScreen, 0, kWidthOfScreen, CGRectGetHeight(self.scrollView.frame))];
imageView.image = [UIImage imageNamed:model.imageName];
//UIViewContentModeScaleToFill：圖片被拉伸（比例可能不變）以充滿整個imageView
//UIViewContentModeScaleAspectFit：圖片被拉伸，比例不變，圖片的長邊剛好與imageview一樣
//UIViewContentModeScaleAspectFill:圖片被拉伸，比例不變，圖片的短邊與imageview一致，圖片有可能超出imageview
imageView.contentMode = UIViewContentModeScaleAspectFit;
[self.scrollView addSubview:imageView];
}
self.scrollView.contentSize = CGSizeMake(kWidthOfScreen*adArray.count, 160);
// 2. 背景視圖無需改動
// 3. 標題文字
if (adArray.count > 0) {
AdModel *model = adArray[0];
// 顯示標題
self.textLabel.text = model.title;
}
// 4. pageCtrl
_pageCtrl.numberOfPages = adArray.count;
_pageCtrl.currentPage = 0;
}
-
修改tableView相關協議方法的實現, 使其能夠顯示
#pragma mark - DataSource - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { // return self.dataArray.count; // 廣告的顯示占一個Cell return self.dataArray.count + 1; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { if (indexPath.row == 0) { // 廣告cell static NSString *adCellID = @"adCell"; AdCell *cell = [tableView dequeueReusableCellWithIdentifier:adCellID]; if (nil == cell) { cell = [[AdCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:adCellID]; } cell.adArray = self.adArray; return cell; } // 書籍cell static NSString *cellID = @"cellID"; BookCell *cell = [tableView dequeueReusableCellWithIdentifier:cellID]; if (nil == cell) { cell = [[BookCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellID]; } [cell config:self.dataArray[indexPath.row - 1]]; return cell; } #pragma mark - Delegate - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { if (indexPath.row == 0) { // 廣告cell return 160; } return 80; }
三. xib方式自定義Cell
-
創建模型, 創建導航欄, 普通方法創建數據源
-
kvc方法設置屬性值
-
普通方法創建數據源
-
model.title = dict[@"title"];
model.icon = dict[@"icon"];
model.price = dict[@"price"];
model.detail = dict[@"detail"];
```
-
用KVC方法設置屬性值, 快速創建數據源
// 用字點數據轉成對象時, 如果字典的key值和對象的屬性名稱一一對應, 可以用kvc來設置屬性值
[model setValuesForKeysWithDictionary:dict];
```
-
創建tabview對象,遵守協議實現協議方法
-
完成自定義cell前工作
-
創建BookCell(切記設置Cell的重用標記)
XIB連線圖
-
創建滾動視圖的模型和廣告cell的數據源
/*
第一個參數: xib文件的名字
第二個參數: 對象的所有者(可以傳self, 也可以傳nil)
第三個參數: 選項參數(傳nil)
*/
cell = [[[NSBundle mainBundle] loadNibNamed:@"BookCell" owner:self options:nil] lastObject];
-
創建并書寫完成AdCell(切記設置AdCell的重用標記)
XIB連線圖
