自定义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@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连线图