定制单元格的几种方式
通过UITableViewCell固定格式设置,其属性是imageView,textLabel、detailLabel,但他们的样式固定,且通常来说不易改变它们的位置,不够灵活
通过UITableViewCell的contentView属性添加子视图
使用xib自定义子视图,布局十分方便,开发较为迅速
子类化UITableViewCell,更加面向对象
固有样式位置 改变系统样式位置
- (void)layoutSubviews {
[super layoutSubviews];
self.textLabel.frame = CGRectMake(10, 5, 200, 20);
self.detailLabel.frame = CGRectMake(10, 30, 100, 10);
self.imageView.frame = CGRectMake(260, 30, 50, 10);
}
定制单元格——第一种方式
向contentView添加子视图
if (cell == nil) {
cell = [[[UITableViewCell alloc]
initWithStyle:UITableViewCellStyleDefault
reuseIdentifier:identifier] autorelease];
UILabel *titleLab = [[UILabel alloc] initWithFrame:CGRectMake(10, 5,
200, 20)];
titleLab.tag = 100;
titleLab.font = [UIFont boldSystemFontOfSize:14.0f];
titleLab.backgroundColor = [UIColor clearColor];
[cell.contentView addSubview:titleLab];
[titleLab release];
// 添加其他子视图.....
}
UILabel *titleLab = (UILabel *)[cell.contentView viewWithTag:100];
titleLab.text = @"label内容";
定义单元格——第二种方式
xib定义单元格
if (cell == nil) {
NSBundle *bundle = [NSBundle mainBundle];
// 加载xib
NSArray *array = [bundle loadNibNamed:@"newsCell" owner:self
options:nil];
cell = [array objectAtIndex:0];
}
UILabel *titleLab = (UILabel *)[cell.contentView viewWithTag:100];
titleLab.text = @"label内容";
定制单元格——第三种方式
子类化定制
- (void)_initViews {
_titleLab = [[UILabel alloc] initWithFrame:CGRectZero];
_titleLab.font = [UIFont boldSystemFontOfSize:14.0f];
_titleLab.backgroundColor = [UIColor clearColor];
[self.contentView addSubview:_titleLab];
// .....初始化其他UI控件
}
- (void)setNews:(News *)news {
_titleLab.text = news.title;
_commentLab.text = [NSString stringWithFormat:@"%d条评论",
news.commentCount];
_timeLab.text = [NSString stringWithFormat:@"%d小时前",news.timeVal];
}
- (void)layoutSubviews {
[super layoutSubviews];
_titleLab.frame = CGRectMake(10, 5, 200, 20);
_commentLab.frame = CGRectMake(10, 30, 100, 10);
_timeLab.frame = CGRectMake(260, 30, 50, 10);
}
课堂实例1:定制我们的单元格
project: CustomCellDemo
new file... name:RootViewController
superclass:UITableViewController
查看 RootViewController.m 比较常用的方法都标注出来了
打开 AppDelegate.m
加入 #import "RootViewController.h"
在 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 中的
[self.window makeKeyAndVisible]; 下面加入
RootViewController *viewController = [[RootViewController alloc] init];
UINavigationController *navigtaion = [[UINavigationController alloc] initWithRootViewController:viewController];
self.window.rootViewController = navigtaion;
打开 RootViewController.m
修改 Table view data source 协议方法如下
#pragma mark - Table view data source
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 4;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:nil];
switch (indexPath.row) {
case 0:
cell.textLabel.text = @"default cell(student)";
break;
case 1:
cell.textLabel.text = @"1、contentView";
break;
case 2:
cell.textLabel.text = @"2、nib";
break;
case 3:
cell.textLabel.text = @"3、CustomCell";
break;
default:
break;
}
return cell;
}
运行
打开 CustomCellDemo-Prefix.pch
加入
typedef enum kTableViewCellType {
kDefaultCellType = 0,
kContentCellType = 1,
kNibCellType = 2,
kCustomCellType = 3
} kTableViewCellType;
new file... name:DetailViewController
superclass:UITableViewController
打开 DetailViewController.h 代码修改如下
#import <UIKit/UIKit.h>
@interface DetailViewController : UITableViewController
{
@private
NSArray *_listArray;
}
@property (nonatomic, assign) kTableViewCellType cellType;
@end
打开 RootViewController.m
加入 #import "DetailViewController.h"
加入方法
#pragma mark - Table view delegate
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
DetailViewController *detailViewController = [[DetailViewController alloc] init];
detailViewController.cellType = indexPath.row;
[self.navigationController pushViewController:detailViewController animated:YES];
}
将 - (void)viewDidLoad 方法改为
- (void)viewDidLoad
{
[super viewDidLoad];
// 是否清除掉选中状态,默认YES
self.clearsSelectionOnViewWillAppear = YES;
}
运行
将 self.clearsSelectionOnViewWillAppear = YES;
改为 self.clearsSelectionOnViewWillAppear = NO;
运行
改回 YES
打开 DetailViewController.m
定制单元格——第一种方式
修改 协议方法如下
#pragma mark - Table view data source
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 20;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = @"Cell";
if (self.cellType == kContentCellType) {
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 150, 44)];
label.tag = 101;
label.backgroundColor = [UIColor redColor];
[cell.contentView addSubview:label];
// add subviews ....
}
UILabel *label = (UILabel *)[cell.contentView viewWithTag:101];
label.text = _listArray[indexPath.row];
return cell;
}else if (self.cellType == kNibCellType) {
return nil;
}else if (self.cellType == kCustomCellType){
return nil;
}else {
return nil;
}
}
修改 - (void)viewDidLoad 方法如下
- (void)viewDidLoad
{
[super viewDidLoad];
_listArray = [UIFont familyNames];
self.tableView.rowHeight = 80;
}
运行
定义单元格——第二种方式
xib定义单元格
new file ... User Interface view
save as: MyCell
打开 MyCell.xib
删除 view
添加一个 Table View Cell 设置 width:320 height:80
在 Table View Cell 里面 左侧添加一个 label 设置属性 tag:201
中间添加一个 image view 设置属性 background :sky tag:202
打开 DetailViewController.m
将
else if (self.cellType == kNibCellType) {
return nil;
}else if (self.cellType == kCustomCellType){
return nil;
}else {
return nil;
}
改为
else if (self.cellType == kNibCellType) {
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
NSArray *nibs = [[NSBundle mainBundle] loadNibNamed:@"MyCell" owner:self options:nil];
cell = [nibs objectAtIndex:0];
}
UILabel *label = (UILabel *)[cell.contentView viewWithTag:201];
label.text = _listArray[indexPath.row];
UIImageView *imgView = (UIImageView *)[cell.contentView viewWithTag:202];
imgView.backgroundColor = (indexPath.row%2 == 0) ? [UIColor redColor] : [UIColor yellowColor];
return cell;
}else if (self.cellType == kCustomCellType){
return nil;
}else {
return nil;
}
运行
定制单元格——第三种方式
子类化定制
new file... name:MyCell
superclass: UITableViewCell
MyCell.h 修改代码如下
#import <UIKit/UIKit.h>
@interface MyCell : UITableViewCell
{
@private
UILabel *_label;
}
// model 对象
@property (nonatomic, copy) NSString *text;
@end
MyCell.m 代码修改如下
#import "MyCell.h"
@interface MyCell ()
- (void)initSubViews;
@end
@implementation MyCell
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
[self initSubViews];
}
return self;
}
- (void)initSubViews
{
_label = [[UILabel alloc] initWithFrame:CGRectZero];
_label.backgroundColor = [UIColor yellowColor];
[self.contentView addSubview:_label];
// .....
}
- (void)layoutSubviews
{
[super layoutSubviews];//如果不调用父类将不会排版 显示版面
_label.frame = CGRectMake(80, 0, 160, 80);//改变系统样式位置
_label.text = self.text;
// layout subViews
}
@end
打开 DetailViewController.m
加入 #import "MyCell.h"
将
else if (self.cellType == kCustomCellType){
return nil;
}
改为
else if (self.cellType == kCustomCellType){
MyCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[MyCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
}
cell.text = _listArray[indexPath.row];
// NSLog(@"textLabel >>>>: %@", NSStringFromCGRect(cell.textLabel.frame));
return cell;
}
运行
通过UITableViewCell固定格式设置,其属性是imageView,textLabel、detailLabel,但他们的样式固定,且通常来说不易改变它们的位置,不够灵活
通过UITableViewCell的contentView属性添加子视图
使用xib自定义子视图,布局十分方便,开发较为迅速
子类化UITableViewCell,更加面向对象
固有样式位置 改变系统样式位置
- (void)layoutSubviews {
[super layoutSubviews];
self.textLabel.frame = CGRectMake(10, 5, 200, 20);
self.detailLabel.frame = CGRectMake(10, 30, 100, 10);
self.imageView.frame = CGRectMake(260, 30, 50, 10);
}
定制单元格——第一种方式
向contentView添加子视图
if (cell == nil) {
cell = [[[UITableViewCell alloc]
initWithStyle:UITableViewCellStyleDefault
reuseIdentifier:identifier] autorelease];
UILabel *titleLab = [[UILabel alloc] initWithFrame:CGRectMake(10, 5,
200, 20)];
titleLab.tag = 100;
titleLab.font = [UIFont boldSystemFontOfSize:14.0f];
titleLab.backgroundColor = [UIColor clearColor];
[cell.contentView addSubview:titleLab];
[titleLab release];
// 添加其他子视图.....
}
UILabel *titleLab = (UILabel *)[cell.contentView viewWithTag:100];
titleLab.text = @"label内容";
定义单元格——第二种方式
xib定义单元格
if (cell == nil) {
NSBundle *bundle = [NSBundle mainBundle];
// 加载xib
NSArray *array = [bundle loadNibNamed:@"newsCell" owner:self
options:nil];
cell = [array objectAtIndex:0];
}
UILabel *titleLab = (UILabel *)[cell.contentView viewWithTag:100];
titleLab.text = @"label内容";
定制单元格——第三种方式
子类化定制
- (void)_initViews {
_titleLab = [[UILabel alloc] initWithFrame:CGRectZero];
_titleLab.font = [UIFont boldSystemFontOfSize:14.0f];
_titleLab.backgroundColor = [UIColor clearColor];
[self.contentView addSubview:_titleLab];
// .....初始化其他UI控件
}
- (void)setNews:(News *)news {
_titleLab.text = news.title;
_commentLab.text = [NSString stringWithFormat:@"%d条评论",
news.commentCount];
_timeLab.text = [NSString stringWithFormat:@"%d小时前",news.timeVal];
}
- (void)layoutSubviews {
[super layoutSubviews];
_titleLab.frame = CGRectMake(10, 5, 200, 20);
_commentLab.frame = CGRectMake(10, 30, 100, 10);
_timeLab.frame = CGRectMake(260, 30, 50, 10);
}
课堂实例1:定制我们的单元格
project: CustomCellDemo
new file... name:RootViewController
superclass:UITableViewController
查看 RootViewController.m 比较常用的方法都标注出来了
打开 AppDelegate.m
加入 #import "RootViewController.h"
在 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 中的
[self.window makeKeyAndVisible]; 下面加入
RootViewController *viewController = [[RootViewController alloc] init];
UINavigationController *navigtaion = [[UINavigationController alloc] initWithRootViewController:viewController];
self.window.rootViewController = navigtaion;
打开 RootViewController.m
修改 Table view data source 协议方法如下
#pragma mark - Table view data source
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 4;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:nil];
switch (indexPath.row) {
case 0:
cell.textLabel.text = @"default cell(student)";
break;
case 1:
cell.textLabel.text = @"1、contentView";
break;
case 2:
cell.textLabel.text = @"2、nib";
break;
case 3:
cell.textLabel.text = @"3、CustomCell";
break;
default:
break;
}
return cell;
}
运行
打开 CustomCellDemo-Prefix.pch
加入
typedef enum kTableViewCellType {
kDefaultCellType = 0,
kContentCellType = 1,
kNibCellType = 2,
kCustomCellType = 3
} kTableViewCellType;
new file... name:DetailViewController
superclass:UITableViewController
打开 DetailViewController.h 代码修改如下
#import <UIKit/UIKit.h>
@interface DetailViewController : UITableViewController
{
@private
NSArray *_listArray;
}
@property (nonatomic, assign) kTableViewCellType cellType;
@end
打开 RootViewController.m
加入 #import "DetailViewController.h"
加入方法
#pragma mark - Table view delegate
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
DetailViewController *detailViewController = [[DetailViewController alloc] init];
detailViewController.cellType = indexPath.row;
[self.navigationController pushViewController:detailViewController animated:YES];
}
将 - (void)viewDidLoad 方法改为
- (void)viewDidLoad
{
[super viewDidLoad];
// 是否清除掉选中状态,默认YES
self.clearsSelectionOnViewWillAppear = YES;
}
运行
将 self.clearsSelectionOnViewWillAppear = YES;
改为 self.clearsSelectionOnViewWillAppear = NO;
运行
改回 YES
打开 DetailViewController.m
定制单元格——第一种方式
修改 协议方法如下
#pragma mark - Table view data source
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 20;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = @"Cell";
if (self.cellType == kContentCellType) {
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 150, 44)];
label.tag = 101;
label.backgroundColor = [UIColor redColor];
[cell.contentView addSubview:label];
// add subviews ....
}
UILabel *label = (UILabel *)[cell.contentView viewWithTag:101];
label.text = _listArray[indexPath.row];
return cell;
}else if (self.cellType == kNibCellType) {
return nil;
}else if (self.cellType == kCustomCellType){
return nil;
}else {
return nil;
}
}
修改 - (void)viewDidLoad 方法如下
- (void)viewDidLoad
{
[super viewDidLoad];
_listArray = [UIFont familyNames];
self.tableView.rowHeight = 80;
}
运行
定义单元格——第二种方式
xib定义单元格
new file ... User Interface view
save as: MyCell
打开 MyCell.xib
删除 view
添加一个 Table View Cell 设置 width:320 height:80
在 Table View Cell 里面 左侧添加一个 label 设置属性 tag:201
中间添加一个 image view 设置属性 background :sky tag:202
打开 DetailViewController.m
将
else if (self.cellType == kNibCellType) {
return nil;
}else if (self.cellType == kCustomCellType){
return nil;
}else {
return nil;
}
改为
else if (self.cellType == kNibCellType) {
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
NSArray *nibs = [[NSBundle mainBundle] loadNibNamed:@"MyCell" owner:self options:nil];
cell = [nibs objectAtIndex:0];
}
UILabel *label = (UILabel *)[cell.contentView viewWithTag:201];
label.text = _listArray[indexPath.row];
UIImageView *imgView = (UIImageView *)[cell.contentView viewWithTag:202];
imgView.backgroundColor = (indexPath.row%2 == 0) ? [UIColor redColor] : [UIColor yellowColor];
return cell;
}else if (self.cellType == kCustomCellType){
return nil;
}else {
return nil;
}
运行
定制单元格——第三种方式
子类化定制
new file... name:MyCell
superclass: UITableViewCell
MyCell.h 修改代码如下
#import <UIKit/UIKit.h>
@interface MyCell : UITableViewCell
{
@private
UILabel *_label;
}
// model 对象
@property (nonatomic, copy) NSString *text;
@end
MyCell.m 代码修改如下
#import "MyCell.h"
@interface MyCell ()
- (void)initSubViews;
@end
@implementation MyCell
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
[self initSubViews];
}
return self;
}
- (void)initSubViews
{
_label = [[UILabel alloc] initWithFrame:CGRectZero];
_label.backgroundColor = [UIColor yellowColor];
[self.contentView addSubview:_label];
// .....
}
- (void)layoutSubviews
{
[super layoutSubviews];//如果不调用父类将不会排版 显示版面
_label.frame = CGRectMake(80, 0, 160, 80);//改变系统样式位置
_label.text = self.text;
// layout subViews
}
@end
打开 DetailViewController.m
加入 #import "MyCell.h"
将
else if (self.cellType == kCustomCellType){
return nil;
}
改为
else if (self.cellType == kCustomCellType){
MyCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[MyCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
}
cell.text = _listArray[indexPath.row];
// NSLog(@"textLabel >>>>: %@", NSStringFromCGRect(cell.textLabel.frame));
return cell;
}
运行