iOS开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局 - 文顶顶 - 博客园
ios开发UI篇&使用纯代码自定义UItableviewcell实现一个简单的微博界面布局
一、实现效果
二、使用纯代码自定义一个tableview的步骤
1.新建一个继承自UITableViewCell的类
2.重写initWithStyle:reuseIdentifier:方法
添加所有需要显示的子控件(不需要设置子控件的数据和frame, &子控件要添加到contentView中)
进行子控件一次性的属性设置(有些属性只需要设置一次, 比如字体\固定的图片)
3.提供2个模型
数据模型: 存放文字数据\图片数据
frame模型: 存放数据模型\所有子控件的frame\cell的高度
4.cell拥有一个frame模型(不要直接拥有数据模型)
5.重写frame模型属性的setter方法: 在这个方法中设置子控件的显示数据和frame&
6.frame模型数据的初始化已经采取懒加载的方式(每一个cell对应的frame模型数据只加载一次)
三、文件结构和实现代码
1.文件结构
2.实现代码：
NJWeibo.h文件
1 #import &Foundation/Foundation.h&
3 @interface NJWeibo : NSObject
4 @property (nonatomic, copy) NSString * // 内容
5 @property (nonatomic, copy) NSString * // 头像
6 @property (nonatomic, copy) NSString * // 昵称
7 @property (nonatomic, copy) NSString * // 配图
8 @property (nonatomic, assign) BOOL
10 - (id)initWithDict:(NSDictionary *)
11 + (id)weiboWithDict:(NSDictionary *)
NJWeibo.m文件
1 #import "NJWeibo.h"
3 @implementation NJWeibo
5 - (id)initWithDict:(NSDictionary *)dict
if (self = [super init]) {
[self setValuesForKeysWithDictionary:dict];
13 + (id)weiboWithDict:(NSDictionary *)dict
return [[self alloc] initWithDict:dict];
NJWeiboCell.h文件
1 #import &UIKit/UIKit.h&
2 @class NJWeiboF
4 @interface NJWeiboCell : UITableViewCell
接收外界传入的模型
8 //@property (nonatomic, strong) NJWeibo *
10 @property (nonatomic, strong) NJWeiboFrame *weiboF
12 + (instancetype)cellWithTableView:(UITableView *)tableV
NJWeiboCell.m文件
1 #import "NJWeiboCell.h"
2 #import "NJWeibo.h"
3 #import "NJWeiboFrame.h"
5 #define NJNameFont [UIFont systemFontOfSize:15]
6 #define NJTextFont [UIFont systemFontOfSize:16]
8 @interface NJWeiboCell ()
12 @property (nonatomic, weak) UIImageView *iconV
16 @property (nonatomic, weak) UIImageView *vipV
20 @property (nonatomic, weak) UIImageView *pictureV
24 @property (nonatomic, weak) UILabel *nameL
28 @property (nonatomic, weak) UILabel *introL
31 @implementation NJWeiboCell
33 + (instancetype)cellWithTableView:(UITableView *)tableView
// NSLog(@"cellForRowAtIndexPath");
static NSString *identifier = @"status";
// 1.缓存中取
NJWeiboCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
if (cell == nil) {
cell = [[NJWeiboCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier];
构造方法(在初始化对象的时候会调用)
一般在这个方法中添加需要显示的子控件
51 - (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
// 让自定义Cell和系统的cell一样, 一创建出来就拥有一些子控件提供给我们使用
// 1.创建头像
UIImageView *iconView = [[UIImageView alloc] init];
[self.contentView addSubview:iconView];
self.iconView = iconV
// 2.创建昵称
UILabel *nameLabel = [[UILabel alloc] init];
nameLabel.font = NJNameF
// nameLabel.backgroundColor = [UIColor redColor];
[self.contentView addSubview:nameLabel];
self.nameLabel = nameL
// 3.创建vip
UIImageView *vipView = [[UIImageView alloc] init];
vipView.image = [UIImage imageNamed:@"vip"];
[self.contentView addSubview:vipView];
self.vipView = vipV
// 4.创建正文
UILabel *introLabel = [[UILabel alloc] init];
introLabel.font = NJTextF
introLabel.numberOfLines = 0;
// introLabel.backgroundColor = [UIColor greenColor];
[self.contentView addSubview:introLabel];
self.introLabel = introL
// 5.创建配图
UIImageView *pictureView = [[UIImageView alloc] init];
[self.contentView addSubview:pictureView];
self.pictureView = pictureV
92 - (void)setWeiboFrame:(NJWeiboFrame *)weiboFrame
_weiboFrame = weiboF
// 1.给子控件赋值数据
[self settingData];
// 2.设置frame
[self settingFrame];
设置子控件的数据
106 - (void)settingData
NJWeibo *weibo = self.weiboFrame.
// 设置头像
self.iconView.image = [UIImage imageNamed:weibo.icon];
// 设置昵称
self.nameLabel.text = weibo.
// 设置vip
if (weibo.vip) {
self.vipView.hidden = NO;
self.nameLabel.textColor = [UIColor redColor];
self.vipView.hidden = YES;
self.nameLabel.textColor = [UIColor blackColor];
// 设置内容
self.introLabel.text = weibo.
// 设置配图
if (weibo.picture) {// 有配图
self.pictureView.image = [UIImage imageNamed:weibo.picture];
self.pictureView.hidden = NO;
self.pictureView.hidden = YES;
设置子控件的frame
138 - (void)settingFrame
// 设置头像的frame
self.iconView.frame = self.weiboFrame.iconF;
// 设置昵称的frame
self.nameLabel.frame = self.weiboFrame.nameF;
// 设置vip的frame
self.vipView.frame = self.weiboFrame.vipF;
// 设置正文的frame
self.introLabel.frame = self.weiboFrame.introF;
// 设置配图的frame
if (self.weiboFrame.weibo.picture) {// 有配图
self.pictureView.frame = self.weiboFrame.pictrueF;
计算文本的宽高
@param str
需要计算的文本
@param font
文本显示的字体
@param maxSize 文本显示的范围
@return 文本占用的真实宽高
169 - (CGSize)sizeWithString:(NSString *)str font:(UIFont *)font maxSize:(CGSize)maxSize
NSDictionary *dict = @{NSFontAttributeName : font};
// 如果将来计算的文字的范围超出了指定的范围,返回的就是指定的范围
// 如果将来计算的文字的范围小于指定的范围, 返回的就是真实的范围
CGSize size =
[str boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:dict context:nil].
NJWeiboFrame.h文件
专门用来保存每一行数据的frame, 计算frame
3 #import &Foundation/Foundation.h&
4 @class NJW
5 @interface NJWeiboFrame : NSObject
头像的frame
9 @property (nonatomic, assign) CGRect iconF;
昵称的frame
13 @property (nonatomic, assign) CGRect nameF;
vip的frame
17 @property (nonatomic, assign) CGRect vipF;
正文的frame
21 @property (nonatomic, assign) CGRect introF;
配图的frame
25 @property (nonatomic, assign) CGRect pictrueF;
29 @property (nonatomic, assign) CGFloat cellH
34 @property (nonatomic, strong) NJWeibo *
NJWeiboFrame.m文件
1 #import "NJWeiboFrame.h"
2 #import "NJWeibo.h"
3 #define NJNameFont [UIFont systemFontOfSize:15]
4 #define NJTextFont [UIFont systemFontOfSize:16]
7 @implementation NJWeiboFrame
10 - (void)setWeibo:(NJWeibo *)weibo
CGFloat padding = 10;
// 设置头像的frame
CGFloat iconViewX =
CGFloat iconViewY =
CGFloat iconViewW = 30;
CGFloat iconViewH = 30;
self.iconF = CGRectMake(iconViewX, iconViewY, iconViewW, iconViewH);
// 设置昵称的frame
// 昵称的x = 头像最大的x + 间隙
CGFloat nameLabelX = CGRectGetMaxX(self.iconF) +
// 计算文字的宽高
CGSize nameSize = [self sizeWithString:_weibo.name font:NJNameFont maxSize:CGSizeMake(MAXFLOAT, MAXFLOAT)];
CGFloat nameLabelH = nameSize.
CGFloat nameLabelW = nameSize.
CGFloat nameLabelY = iconViewY + (iconViewH - nameLabelH) * 0.5;
self.nameF = CGRectMake(nameLabelX, nameLabelY, nameLabelW, nameLabelH);
// 设置vip的frame
CGFloat vipViewX = CGRectGetMaxX(self.nameF) +
CGFloat vipViewY = nameLabelY;
CGFloat vipViewW = 14;
CGFloat vipViewH = 14;
self.vipF = CGRectMake(vipViewX, vipViewY, vipViewW, vipViewH);
// 设置正文的frame
CGFloat introLabelX = iconViewX;
CGFloat introLabelY = CGRectGetMaxY(self.iconF) +
CGSize textSize =
[self sizeWithString:_weibo.text font:NJTextFont maxSize:CGSizeMake(300, MAXFLOAT)];
CGFloat introLabelW = textSize.
CGFloat introLabelH = textSize.
self.introF = CGRectMake(introLabelX, introLabelY, introLabelW, introLabelH);
// 设置配图的frame
CGFloat cellHeight = 0;
if (_weibo.picture) {// 有配图
CGFloat pictureViewX = iconViewX;
CGFloat pictureViewY = CGRectGetMaxY(self.introF) +
CGFloat pictureViewW = 100;
CGFloat pictureViewH = 100;
self.pictrueF = CGRectMake(pictureViewX, pictureViewY, pictureViewW, pictureViewH);
// 计算行高
self.cellHeight = CGRectGetMaxY(self.pictrueF) +
// 没有配图情况下的行高
self.cellHeight = CGRectGetMaxY(self.introF) +
计算文本的宽高
@param str
需要计算的文本
@param font
文本显示的字体
@param maxSize 文本显示的范围
@return 文本占用的真实宽高
80 - (CGSize)sizeWithString:(NSString *)str font:(UIFont *)font maxSize:(CGSize)maxSize
NSDictionary *dict = @{NSFontAttributeName : font};
// 如果将来计算的文字的范围超出了指定的范围,返回的就是指定的范围
// 如果将来计算的文字的范围小于指定的范围, 返回的就是真实的范围
CGSize size =
[str boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:dict context:nil].
NJViewController.m文件
1 #import "NJViewController.h"
2 #import "NJWeibo.h"
3 #import "NJWeiboCell.h"
4 #import "NJWeiboFrame.h"
6 @interface NJViewController ()
7 @property (nonatomic, strong) NSArray *statusF
10 @implementation NJViewController
12 #pragma mark - 数据源方法
14 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
return self.statusFrames.
20 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
NJWeiboCell *cell = [NJWeiboCell cellWithTableView:tableView];
// 3.设置数据
cell.weiboFrame = self.statusFrames[indexPath.row];
29 #pragma mark - 懒加载
30 - (NSArray *)statusFrames
if (_statusFrames == nil) {
NSString *fullPath = [[NSBundle mainBundle] pathForResource:@"statuses.plist" ofType:nil];
NSArray *dictArray = [NSArray arrayWithContentsOfFile:fullPath];
NSMutableArray *models = [NSMutableArray arrayWithCapacity:dictArray.count];
for (NSDictionary *dict in dictArray) {
// 创建模型
NJWeibo *weibo = [NJWeibo weiboWithDict:dict];
// 根据模型数据创建frame模型
NJWeiboFrame *wbF = [[NJWeiboFrame alloc] init];
wbF.weibo =
[models addObject:wbF];
self.statusFrames = [models copy];
return _statusF
50 #pragma mark - 代理方法
51 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
// NSLog(@"heightForRowAtIndexPath");
// 取出对应航的frame模型
NJWeiboFrame *wbF = self.statusFrames[indexPath.row];
NSLog(@"height = %f", wbF.cellHeight);
return wbF.cellH
60 - (BOOL) prefersStatusBarHidden
return YES;
四、补充说明
由于系统提供的tableview可能并不能满足我们的开发需求，所以经常要求我们能够自定义tableview。
自定义tableview有两种方式，一种是使用xib创建，一种是使用纯代码的方式创建。
对于样式一样的tableview，通常使用xib进行创建，对于高度不一样，内容也不完全一致的通常使用纯代码进行自定义。
随笔 - 274
评论 - 256求解：IOS开发-在Group样式的UITableView中使用自定义的Cell，在每个Section的第一行左侧出现莫名的图形 - iPhone - 网站开发技术
帮助别人就是帮助自己！
如果这里解决了您的问题，请您点一下推荐
求解：IOS开发-在Group样式的UITableView中使用自定义的Cell，在每个Section的第一行左侧出现莫名的图形
在Group样式的UITableView中使用自定义的Cell，在每个Section的第一行左侧出现莫名的图形
在我自定义的Cell中并没有设置该View，不知道它我怎么来的
。。。自绘的？
引用 1 楼 gxingmin 的回复:
。。。自绘的？
神马自绘？
你这红线。。
引用 1 楼 gxingmin 的回复:
。。。自绘的？
边框的颜色是可以设置的
我就是把边框的颜色改成这样了，把背景色改成透明的！
我尝试了什么颜色都不改！
但是那个该死的莫名的图形还是存在那里，而且它的颜色还随着边框线颜色的改变而改变！iOS学习之UITableView(一): 新手篇创建tableView - 推酷
iOS学习之UITableView(一): 新手篇创建tableView
一、UITableView简单介绍
& &1.tableView是一个用户可以滚动的多行单列列表，在表视图中，每一行都是一个UITableViewCell对象，表视图有两种风格可选
typedef NS_ENUM(NSInteger, UITableViewStyle) {
UITableViewStylePlain,
// regular table view
UITableViewStyleGrouped
// preferences style table view
图1 tableView两种形态在iOS6和iOS7上的对比
&2.表视图还可为其添加索引值，比如通讯录中右侧索引列表，每一个索引项对应其节头标题（图2）
& & & & & & & & &
图2 带索引值的列表 & & & & & & & & & & & & & & & & 图3 可以选择的列表
&3.最简单的一种表视图是一个选择列表，可以限制选择一列或多列，如图3
&4.页眉和页脚，可以根据自己的需要，对tableView设置页眉和页脚的内容
& & & & & & &
图4 带页眉和页脚的列表
二、UITableViewCell
& & 1. UITableViewCell是表视图的单元格，系统会缓存可见的行。通过完成UITableViewDataSource协议中必须完成的代理方法CellForRowAtIndexPath方法来填充表视图上单元格数据。
& & 2. UITableViewCell有四种样式可选
UITableViewCellStyleDefault, // 简单包含一个可选的imageView和一个label显示文本
UITableViewCellStyleValue1, // 包含可选的imageView，一个textLabel和一个detailLabel，其中detailLabel位置在最左，右对齐，文本颜色为蓝色
UITableViewCellStyleValue2,
//包含一个textLabel和一个detailLabel，textLabel默认为蓝色文本，右对齐，detailLabel的位置紧挨着textLabel右边，默认文本左对齐，颜色为黑色
UITableViewCellStyleSubtitle // 包含可选的imageView，一个textLabel，一个detailLabel，其中detailLabel在textLabel下方，字体较小，默认颜色为黑色，左对齐
三、创建简单TableView
& & 1. 先给出效果图
&&&&&&&&&&&&& &
图5 &plain简单列表样式 &
& & 图6 grouped简单列表样式
& & & & & &&
& & 2. 创建方式及代码（本文只讲述代码创建）
& & & & a) 创建一个Single &View Application，命名为&tableView&
&&&&& & b) 新建一个继承自UITableView的类，关于tableView的实现将全部写在这个类中(当然也可直接在对 & & &应所需要用得ViewController中创建，分离出来的好处是可以在将tableView的方法分离，当代码量比较 & & &大或者这个table需要在多个地方使用时推荐使用),命名为general_table_view.
&&&&& & c) 代码
①在general_table_view.h文件中，添加几个属性
@interface general_table_view : UITableView
// tableView的坐标
@property (nonatomic, assign) CGRect
tableViewF
// 存放Cell上各行textLabel值
@property (nonatomic, copy)NSMutableArray * textLabel_MA
// 存放Cell上各行imageView上图片
@property (nonatomic, copy)NSMutableArray * images_MA
// 存放Cell上各行detailLabel值
@property (nonatomic, copy)NSMutableArray * subtitle_MA
②在general_table_view.m的interface中声明代理
@interface general_table_view ()&UITableViewDataSource,UITableViewDelegate&
③在.m中的initWithFrame方法内部设置table的代理
// Initialization code
self.delegate
self.dataSource =
以及添加tableViewFrame的set方法
-(void)setTableViewFrame:(CGRect)tableViewFrame
self.frame = tableViewF// 设置tableView的frame为所传值
④接下来实现tableView的dataSource和delegate方法
必须实现的方法有两个
// tableView每个分区的行数，可以为各个分区设置不同的行数，根据section的值判断即可
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
return [_textLabel_MArray count];
// 实现每一行Cell的内容，tableView重用机制
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
// 为其定义一个标识符，在重用机制中，标识符非常重要，这是系统用来匹配table各行cell的判断标准，在以后的学习中会体会到
static NSString *cellIdentifier = @&cellIdentifier&;
// 从缓存队列中取出复用的cell
UITableViewCell *cell
= [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
// 如果队列中cell为空，即无复用的cell，则对其进行初始化
if (cell==nil) {
= [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
// 定义其辅助样式
cell.accessoryType
= UITableViewCellAccessoryN
// 设置cell上文本内容
cell.textLabel.text
= [_textLabel_MArray objectAtIndex:indexPath.row];
⑤还有其他辅助方法，根据需要添加
// tableView分区数量，默认为1，可为其设置为多个分区
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
// tableView页眉的值，同理，可为不同的分区设置不同的页眉，也可不写此方法
-(NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
return @&页眉&;
-(NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section
return @&页脚&;
⑥在所需要添加的ViewController中添加tableView，在ViewController.m方法中
#import &general_table_view.h&
@interface ViewController ()
general_table_view *// 声明table
并在ViewDidLoad方法中对其进行初始化
= [[general_table_view alloc] initWithFrame:CGRectMake(0, 20, 320, self.view.frame.size.height-20) style:UITableViewStylePlain];
// 设置数据源
table.textLabel_MArray
= [[NSMutableArray alloc] initWithObjects:@&南京市&,@&南通市&,@&淮安市&,@&镇江市&,@&扬州市&,@&常州市&, nil];
[self.view addSubview:table];// 添加到当前View
⑦运行即可得到图5的效果，将初始化时的style改为UITableViewStyleGrouped即可得到图6的效果
= [[general_table_view alloc] initWithFrame:CGRectMake(0, 20, 320, self.view.frame.size.height-20) style:UITableViewStyleGrouped];
四、为每一行添加图片
在ViewController.m的ViewDidLoad方法中设置数据源时，在addSubview之前，初始化一个存放图片的数组，这里我添加的是同一张图片，如果想为每一行设置不同的图片，添加不同的图片到数组中即可
NSMutableArray *images
= [NSMutableArray array];
for(NSInteger index = 0;index&[table.textLabel_MArray count];index++){
UIImage *image
= [UIImage imageNamed:@&2&];
[images addObject:image];
table.images_MArray
= [[NSMutableArray alloc] initWithArray:images];
在CellForRowAtIndexPath方法中设置textLabel值部分添加
// 设置cell上文本内容
cell.textLabel.text
= [_textLabel_MArray objectAtIndex:indexPath.row];
// 设置每一行的图片
cell.imageView.image
= [_images_MArray objectAtIndex:indexPath.row];
运行，效果图如图7
五、列表的其他样式
在CellForRowAtIndexPath方法中，初始化Cell时改变cell的style和accessoryType
1、style，style默认有四种可选，见上文第二点第2条
在ViewController的ViewDidLoad方法中添加图片的for循环中为数组添加值
NSMutableArray *subtitle= [NSMutableArray array];
for(NSInteger index = 0;index&[table.textLabel_MArray count];index++){
UIImage *image
= [UIImage imageNamed:@&2&];
NSString *detail
= [NSString stringWithFormat:@&detail text %d&,index+1];
[images addObject:image];
[subtitle addObject:detail];
table.subtitle_MArray
= [[NSMutableArray alloc] initWithArray:subtitle];
并在CellForRowAtIndexPath方法初始化时将
UITableViewCellStyleDefault
改变成其他三种样式，并
// 设置小标题
cell.detailTextLabel.text
= [_subtitle_MArray objectAtIndex:indexPath.row];
效果图如下：
UITableViewCellStyleDefault & & & & & & & & 图8 UITableViewCellStyleValue1
UITableViewCellStyleValue2 & & & & & & & & 图10 UITableViewCellStyleSubtitle
关于AccessoryType，以上
// 定义其辅助样式
cell.accessoryType
= UITableViewCellAccessoryN
已发表评论数()
&&登&&&陆&&
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见503 - Service Not Available
503 - Service Not Available一、UITableView简单介绍
& &1.tableView是一个用户可以滚动的多行单列列表，在表视图中，每一行都是一个UITableViewCell对象，表视图有两种风格可选
typedef NS_ENUM(NSInteger, UITableViewStyle) {
UITableViewStylePlain,
// regular table view
UITableViewStyleGrouped
// preferences style table view};
&图1 tableView两种形态在iOS6和iOS7上的对比
&2.表视图还可为其添加索引值，比如通讯录中右侧索引列表，每一个索引项对应其节头标题（图2）
& & & & & & & & & & & &&& 图2 带索引值的列表 & & & & & & & & & & & & & & & &&&&&&&&&& 图3 可以选择的列表& &&
这两种形式的列表见博文
&3.最简单的一种表视图是一个选择列表，可以限制选择一列或多列，如图3& & & &
&4.页眉和页脚，可以根据自己的需要，对tableView设置页眉和页脚的内容
& & & & & & & & & & &&图4 带页眉和页脚的列表
二、UITableViewCell
& & 1. UITableViewCell是表视图的单元格，系统会缓存可见的行。通过完成UITableViewDataSource协议中必须完成的代理方法CellForRowAtIndexPath方法来填充表视图上单元格数据。
& & 2. UITableViewCell有四种样式可选& &&
UITableViewCellStyleDefault, // 简单包含一个可选的imageView和一个label显示文本
UITableViewCellStyleValue1, // 包含可选的imageView，一个textLabel和一个detailLabel，其中detailLabel位置在最左，右对齐，文本颜色为蓝色
UITableViewCellStyleValue2,
//包含一个textLabel和一个detailLabel，textLabel默认为蓝色文本，右对齐，detailLabel的位置紧挨着textLabel右边，默认文本左对齐，颜色为黑色
UITableViewCellStyleSubtitle // 包含可选的imageView，一个textLabel，一个detailLabel，其中detailLabel在textLabel下方，字体较小，默认颜色为黑色，左对齐
三、创建简单TableView
& & 1. 先给出效果图
& & & & & & & & & && 图5 &plain简单列表样式 &&&&&&&&&&&&&&&&&&&&&&&& & & &&&&&&& 图6 grouped简单列表样式
& & 2. 创建方式及代码（本文只讲述代码创建）
& & & & a) 创建一个Single &View Application，命名为&tableView&
&&&&& & b) 新建一个继承自UITableView的类，关于tableView的实现将全部写在这个类中(当然也可直接在对 & & &应所需要用得ViewController中创建，分离出来的好处是可以在将tableView的方法单独放在一个类中，当ViewController的代码量比较大或者这个table需要在多个地方使用时推荐使用),命名为general_table_view.
&&&&& & c) 代码
①在general_table_view.h文件中，添加几个属性& &&
@interface general_table_view : UITableView// tableView的坐标@property (nonatomic, assign) CGRect
tableViewF// 存放Cell上各行textLabel值@property (nonatomic, copy)NSMutableArray * textLabel_MA// 存放Cell上各行imageView上图片@property (nonatomic, copy)NSMutableArray * images_MA// 存放Cell上各行detailLabel值@property (nonatomic, copy)NSMutableArray * subtitle_MA@end ②在general_table_view.m的interface中声明代理
@interface general_table_view ()&UITableViewDataSource,UITableViewDelegate&@end
③在.m中的initWithFrame方法内部设置table的代理
// Initialization code
self.delegate
self.dataSource =
以及添加tableViewFrame的set方法
-(void)setTableViewFrame:(CGRect)tableViewFrame{
self.frame = tableViewF// 设置tableView的frame为所传值}
④接下来实现tableView的dataSource和delegate方法
必须实现的方法有两个
// tableView每个分区的行数，可以为各个分区设置不同的行数，根据section的值判断即可-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return [_textLabel_MArray count];}// 实现每一行Cell的内容，tableView重用机制-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
// 为其定义一个标识符，在重用机制中，标识符非常重要，这是系统用来匹配table各行cell的判断标准，在以后的学习中会体会到
static NSString *cellIdentifier = @&cellIdentifier&;
// 从缓存队列中取出复用的cell
UITableViewCell *cell
= [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
// 如果队列中cell为空，即无复用的cell，则对其进行初始化
if (cell==nil) {
= [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
// 定义其辅助样式
cell.accessoryType
= UITableViewCellAccessoryN
// 设置cell上文本内容
cell.textLabel.text
= [_textLabel_MArray objectAtIndex:indexPath.row];}
⑤还有其他辅助方法，根据需要添加
// tableView分区数量，默认为1，可为其设置为多个分区-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
return 1;}// tableView页眉的值，同理，可为不同的分区设置不同的页眉，也可不写此方法-(NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{
return @&页眉&;}// 页脚-(NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section{
return @&页脚&;}
⑥在所需要添加的ViewController中添加tableView，在ViewController.m方法中
#import &general_table_view.h&@interface ViewController (){
general_table_view *// 声明table}@end
并在ViewDidLoad方法中对其进行初始化
= [[general_table_view alloc] initWithFrame:CGRectMake(0, 20, 320, self.view.frame.size.height-20) style:UITableViewStylePlain];
// 设置数据源
table.textLabel_MArray
= [[NSMutableArray alloc] initWithObjects:@&南京市&,@&南通市&,@&淮安市&,@&镇江市&,@&扬州市&,@&常州市&, nil];
[self.view addSubview:table];// 添加到当前View
⑦运行即可得到图5的效果，将初始化时的style改为UITableViewStyleGrouped即可得到图6的效果
= [[general_table_view alloc] initWithFrame:CGRectMake(0, 20, 320, self.view.frame.size.height-20) style:UITableViewStyleGrouped];
四、为每一行添加图片
在ViewController.m的ViewDidLoad方法中设置数据源时，在addSubview之前，初始化一个存放图片的数组，这里我添加的是同一张图片，如果想为每一行设置不同的图片，添加不同的图片到数组中即可
NSMutableArray *images
= [NSMutableArray array];for(NSInteger index = 0;index&[table.textLabel_MArray count];index++){
UIImage *image
= [UIImage imageNamed:@&2&];
[images addObject:image];}table.images_MArray
= [[NSMutableArray alloc] initWithArray:images];
在CellForRowAtIndexPath方法中设置textLabel值部分添加
// 设置cell上文本内容
cell.textLabel.text
= [_textLabel_MArray objectAtIndex:indexPath.row];// 设置每一行的图片
cell.imageView.image
= [_images_MArray objectAtIndex:indexPath.row];
运行，效果图如图7
五、列表的其他样式
在CellForRowAtIndexPath方法中，初始化Cell时改变cell的style和accessoryType
1、style，style默认有四种可选，见上文第二点第2条
在ViewController的ViewDidLoad方法中添加图片的for循环中为数组添加值
NSMutableArray *subtitle= [NSMutableArray array];
for(NSInteger index = 0;index&[table.textLabel_MArray count];index++){
UIImage *image
= [UIImage imageNamed:@&2&];
NSString *detail
= [NSString stringWithFormat:@&detail text %d&,index+1];
[images addObject:image];
[subtitle addObject:detail];
}table.subtitle_MArray
= [[NSMutableArray alloc] initWithArray:subtitle];
并在CellForRowAtIndexPath方法初始化时将
UITableViewCellStyleDefault改变成其他三种样式，并添加代码
// 设置小标题
cell.detailTextLabel.text
= [_subtitle_MArray objectAtIndex:indexPath.row];
效果图如下：
&& & & && 图7 UITableViewCellStyleDefault & & & & & & & &&&&&&&&& 图8 UITableViewCellStyleValue1
& &&&&&&&& 图9&UITableViewCellStyleValue2 & & & & & & & &&&&&&&& 图10 UITableViewCellStyleSubtitle
关于AccessoryType，以上
// 定义其辅助样式
cell.accessoryType
= UITableViewCellAccessoryN
下一篇讲述列表中行的操作：