ios实战开发之代码创建Cell（演示新浪微博）

Sian

1、效果演示



2、设计说明
2.0 设计草图


2.1 模型说明
2.1.1 SAWeibo类：该类主要功能是将基本数据抽象成数据模型，将数据处理思想转换成面向对象的理念；
2.1.2 SAWeiboFrame类：该类是新增加的一个类，将各视图尺寸位置的设置单独抽象出来创建一个视图框架模型，该模型中包含了数据模型，给每条微博提供数据源及各子视图子控件提供位置与尺寸服务；
2.1.3 SAWeiboCell类：该类主要功能是创建TableView中每个Cell的内容，包含数据与视图，因此将SAWeiboFrame添加给该类的一个成员变量，调用SAWeibo类与SAWeiboFrame类完成微博展示功能；

2.2 基本步骤
2.2.1 删除原有的控制器，新建一个控制器SAWeiboController直接继承自UITableViewController，删除storyboard中的view，新建一个UITableView并将UITableView的类设置为新创建的控制器
2.2.2 新建一个类SAWeiboCell继承自UITabeViewCell，该类主要功能在2.1 模型说明中已描述；
2.2.3 在控制器SAWeiboController中实现必须实现的几个方法，如numberOfRowsInSection、cellForRowAtIndexPath、heightForRowAtIndexPath等方法
2.2.4 在实现cellForRowAtIndexPath方法前需要创建SAWeiboCell类，并在该类中实现Cell创建的initWithStyle:reuseIdentifier:方法，添加cell内部需要的子控件（此时只管添加控件暂不关心控件的尺寸与位置）；
2.2.5 创建数据模型SAWeibo类，增加相应的数据属性；
2.2.6 创建视图框架模型SAWeiboFrame类，增加相应的数据属性并将数据模型设置成该模型的属性；
2.2.7 重写setWeibo方法，将数据模型赋值的同时将所有子控件的尺寸与位置进行计算确定、将在最后计算出每个Cell的高度
2.2.8 将计算得出来的值分别写到各属性中，回到控制器完善控制器未完成的配置；
2.2.9 将数据模型赋值，将视图框架模型赋值，并将相关属性结果回写到numberOfRowsInSection、cellForRowAtIndexPath、heightForRowAtIndexPath方法中

3、关键代码
SAWeibo.h

1. //
2. //  SAWeibo.h
3. //  Weibo
4. //
5. //  Created by yusian on 14-4-10.
6. //  Copyright (c) 2014年 yusian. All rights reserved.
7. //
9. #import <Foundation/Foundation.h>
11. @interface SAWeibo : NSObject
13. @property (nonatomic, copy)     NSString    *icon;      // 头像
14. @property (nonatomic, copy)     NSString    *name;      // 昵称
15. @property (nonatomic, assign)   BOOL        isVip;      // vip标识
16. @property (nonatomic, copy)     NSString    *time;      // 发表时间
17. @property (nonatomic, copy)     NSString    *source;    // 微博来源
18. @property (nonatomic, copy)     NSString    *content;   // 微博内容
19. @property (nonatomic, copy)     NSString    *image;     // 微博配图
21. + (id)weiboWithDict:(NSDictionary *)dict;               // 模型赋值类方法
22. - (id)initWithDict:(NSDictionary *)dict;                // 模型赋值对象方法
24. @end

复制代码

SAWeibo.m

1. //
2. //  SAWeibo.m
3. //  Weibo
4. //
5. //  Created by yusian on 14-4-10.
6. //  Copyright (c) 2014年 yusian. All rights reserved.
7. //
9. #import "SAWeibo.h"
11. @implementation SAWeibo
13. + (id)weiboWithDict:(NSDictionary *)dict
14. {
15.     return [[self alloc] initWithDict:dict];    // 调用对象方法初始化数据模型
16. }
18. // 取出字典中的每个Key中对应的值赋值给数据模型
19. - (id)initWithDict:(NSDictionary *)dict
20. {
21.     if (self = [super init]) {
22.         self.icon = dict[@"icon"];              // 头像图片名称
23.         self.name = dict[@"name"];              // 昵称
24.         self.time = dict[@"time"];              // 发表时间
25.         self.source = dict[@"source"];          // 微博来源
26.         self.isVip = [dict[@"vip"] boolValue];  // vip标识，Number类型转成BOOL类型
27.         self.content = dict[@"content"];        // 微博正文
28.         self.image = dict[@"image"];            // 微博配图图片名称
29.     }
30.     return self;
31. }
33. @end

复制代码

SAWeiboFrame.h

1. //
2. //  SAWeiboFrame.h
3. //  Weibo
4. //
5. //  Created by yusian on 14-4-10.
6. //  Copyright (c) 2014年 yusian. All rights reserved.
7. //
9. #import <Foundation/Foundation.h>
10. #define kIconWH 40                                  // 头像宽高
11. #define kInterval 10                                // 全局间距
12. #define kVipWH  14                                  // vip标识宽高
13. #define kImageWH 200                                // 微博配图宽高
14. #define kNameFont [UIFont systemFontOfSize:14]      // 昵称字号大小
15. #define kTimeFont [UIFont systemFontOfSize:12]      // 发表时间字号大小
16. #define kSourceFont [UIFont systemFontOfSize:12]    // 微博来源字号大小
17. #define kContentFont [UIFont systemFontOfSize:15]   // 微博正文字号大小
18. @class SAWeibo;
20. @interface SAWeiboFrame : NSObject
22. @property (nonatomic, assign, readonly) CGRect  iconViewFrame;      // 头像尺寸位置
23. @property (nonatomic, assign, readonly) CGRect  nameLabelFrame;     // 昵称尺寸位置
24. @property (nonatomic, assign, readonly) CGRect  timeLabelFrame;     // 发表时间尺寸位置
25. @property (nonatomic, assign, readonly) CGRect  vipViewFrame;       // vip标识尺寸位置
26. @property (nonatomic, assign, readonly) CGRect  sourceLabelFrame;   // 微博来源尺寸位置
27. @property (nonatomic, assign, readonly) CGRect  contentLabelFrame;  // 微博正文尺寸位置
28. @property (nonatomic, assign, readonly) CGRect  imageViewFrame;     // 微博配图尺寸位置
29. @property (nonatomic, assign, readonly) CGFloat cellHeight;         // 每条微博Cell高度
31. @property (nonatomic, strong) SAWeibo *weibo;                       // 数据模型
33. @end

复制代码

SAWeiboFrame.m

1. //
2. //  SAWeiboFrame.m
3. //  Weibo
4. //
5. //  Created by yusian on 14-4-10.
6. //  Copyright (c) 2014年 yusian. All rights reserved.
7. //
9. #import "SAWeiboFrame.h"
10. #import "SAWeibo.h"
12. @implementation SAWeiboFrame
14. // 在数据模型set方法中将各子视图的尺寸大小及每条微博的行高进行计算与确定
15. - (void)setWeibo:(SAWeibo *)weibo
16. {
17.     _weibo = weibo;     // 将创建好的模型对象赋值给成员变量，让模型数据成为视图框架模型的属性
19.     // 1、头像
20.     CGFloat iconX = kInterval;
21.     CGFloat iconY = kInterval;
22.     _iconViewFrame = CGRectMake(iconX, iconY, kIconWH, kIconWH);
23.    
24.     // 2、昵称
25.     CGFloat nameX = CGRectGetMaxX(_iconViewFrame) + kInterval;
26.     // CGRectGetMaxX(_iconViewFrame)为取头像Frame中X最大值
27.    
28.     CGFloat nameY = iconY;
29.     CGSize nameSize = [_weibo.name sizeWithFont:kNameFont];
30.     // [_weibo.name sizeWithFont:kNameFont]字符串方法，意为该字符串在某种字体状态下所占据的尺寸
31.    
32.     _nameLabelFrame = CGRectMake(nameX, nameY, nameSize.width, nameSize.height);
33.    
34.     // 3、vip
35.     CGFloat vipX = CGRectGetMaxX(_nameLabelFrame) + kInterval;
36.     CGFloat vipY = iconY;
37.     _vipViewFrame = CGRectMake(vipX, vipY, kVipWH, kVipWH);
38.    
39.     // 4、时间
40.     CGFloat timeX = nameX;
41.     CGFloat timeY = CGRectGetMaxY(_nameLabelFrame) + kInterval;
42.     CGSize timeSize = [_weibo.time sizeWithFont:kTimeFont];
43.     _timeLabelFrame = CGRectMake(timeX, timeY, timeSize.width, timeSize.height);
44.    
45.     // 5、来源
46.     CGFloat sourceX = CGRectGetMaxX(_timeLabelFrame) + kInterval;
47.     CGFloat sourceY = timeY;
48.     NSString *sourceText = [NSString stringWithFormat:@"来自:%@", _weibo.source];
49.     CGSize sourceSize = [sourceText sizeWithFont:kSourceFont];
50.     // 计算尺寸应为实际显示内容的尺寸，所以取拼串后字符串的sizeWithFont:方法
51.    
52.     _sourceLabelFrame = CGRectMake(sourceX, sourceY, sourceSize.width, sourceSize.height);
53.    
54.     // 6、正文
55.     CGFloat contentX = iconX;
56.     CGFloat contentY = MAX(CGRectGetMaxY(_iconViewFrame), CGRectGetMaxY(_timeLabelFrame)) + kInterval;
57.     // 正文与上面子视图保持一个全局间隔距离，但无法确定头像与发表时间哪个子视图下边缘Y值更大，所以利用宏MAX(A, B)对这两个子视图进行比较，以最大值为标准
58.    
59.     CGFloat contentWidth = 320 - 2 * kInterval;
60.     // 正文宽度保持屏幕两侧预算一个全局间隔距离即可
61.    
62.     CGSize contentSize = [_weibo.content sizeWithFont:kContentFont constrainedToSize:CGSizeMake(contentWidth, MAXFLOAT)];
63.     _contentLabelFrame = CGRectMake(contentX, contentY, contentSize.width, contentSize.height);
64.    
65.     // 7、配图
66.     if (self.weibo.image) {
67.         CGFloat imageX = contentX;
68.         CGFloat imageY = CGRectGetMaxY(_contentLabelFrame) + kInterval;
69.         _imageViewFrame = CGRectMake(imageX, imageY, kImageWH, kImageWH);
70.         
71.         // 如果有配图，则每条微博高度以配图下边缘Y值为基准
72.         _cellHeight = CGRectGetMaxY(_imageViewFrame) + kInterval;
73.     } else {
74.         // 如果没有配置，则每条微博高度以正文下边缘Y值为基准
75.         _cellHeight = CGRectGetMaxY(_contentLabelFrame) + kInterval;
76.     }
77.    
78. }
80. @end

复制代码

SAWeiboCell.h

1. //
2. //  SAWeiboCell.h
3. //  Weibo
4. //
5. //  Created by yusian on 14-4-10.
6. //  Copyright (c) 2014年 yusian. All rights reserved.
7. //
9. #import <UIKit/UIKit.h>
10. @class SAWeiboFrame;
12. @interface SAWeiboCell : UITableViewCell
14. @property (nonatomic, strong) SAWeiboFrame *weiboFrame;     // 让视图框架模型成为Cell模型的属性
16. + (NSString *)ID;       // 封装tableView的缓存cell标识
18. @end

复制代码

SAWeiboCell.m

1. //
2. //  SAWeiboCell.m
3. //  Weibo
4. //
5. //  Created by yusian on 14-4-10.
6. //  Copyright (c) 2014年 yusian. All rights reserved.
7. //
9. #import "SAWeiboCell.h"
10. #import "SAWeiboFrame.h"
11. #import "SAWeibo.h"
13. @interface SAWeiboCell ()   // 类扩展成员变量
14. {
15.     UIImageView     *_iconView;         // 头像
16.     UIImageView     *_vipView;          // vip标识
17.     UILabel         *_nameLabel;        // 昵称
18.     UILabel         *_sourceLabel;      // 微博来源
19.     UILabel         *_timeLabel;        // 发表时间
20.     UILabel         *_contentLabel;     // 微博正文
21.     UIImageView     *_imageView;        // 微博配图
22. }
23. @end
25. @implementation SAWeiboCell
27. #pragma mark cell初始化方法
28. - (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
29. {
30.     if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
31.         
32.         // 1、头像
33.         _iconView = [[UIImageView alloc] init];
34.         [self.contentView addSubview:_iconView];
35.         
36.         // 2、昵称
37.         _nameLabel = [[UILabel alloc] init];
38.         _nameLabel.font = kNameFont;
39.         [self.contentView addSubview:_nameLabel];
40.         
41.         // 3、vip标识
42.         _vipView = [[UIImageView alloc] init];
43.         _vipView.image = [UIImage imageNamed:@"vip.png"];
44.         [self.contentView addSubview:_vipView];
45.         
46.         // 4、发表时间
47.         _timeLabel = [[UILabel alloc] init];
48.         _timeLabel.font = kTimeFont;
49.         _timeLabel.textColor = [UIColor lightGrayColor];
50.         [self.contentView addSubview:_timeLabel];
51.         
52.         // 5、微博来源
53.         _sourceLabel = [[UILabel alloc] init];
54.         _sourceLabel.font = kSourceFont;
55.         _sourceLabel.textColor = [UIColor lightGrayColor];
56.         [self.contentView addSubview:_sourceLabel];
57.         
58.         // 6、正文
59.         _contentLabel = [[UILabel alloc] init];
60.         _contentLabel.font = kContentFont;
61.         [self.contentView addSubview:_contentLabel];
62.         
63.         // 7、配图
64.         _imageView = [[UIImageView alloc] init];
65.         [self.contentView addSubview:_imageView];
66.         
67.     }
68.     return self;
69. }
71. #pragma mark 成员变量weiboFrame的set方法
72. - (void)setWeiboFrame:(SAWeiboFrame *)weiboFrame
73. {
74.     _weiboFrame = weiboFrame;   // 将创建好的Frame对象赋值给成员变量
75.     [self settingView];         // 设置子视图数据
76.     [self settingFrame];        // 设置子视图尺寸及位置
77. }
79. // 调用微博数据模型设置每条微博中子视图数据内容
80. - (void)settingView
81. {
82.     // 1、头像
83.     _iconView.image = [UIImage imageNamed:_weiboFrame.weibo.icon];
84.    
85.     // 2、昵称
86.     _nameLabel.text = _weiboFrame.weibo.name;
87.     if (_weiboFrame.weibo.isVip) {
88.         _nameLabel.textColor = [UIColor redColor];      // 带vip标识的用户昵称显示为红色
89.     } else {
90.         _nameLabel.textColor = [UIColor blackColor];    // 非vip用户昵称显示为黑色
91.     }
92.    
93.     // 3、vip
94.     _vipView.hidden = !_weiboFrame.weibo.isVip;
96.     // 4、时间
97.     _timeLabel.text = _weiboFrame.weibo.time;
98.    
99.     // 5、来源
100.     _sourceLabel.text = [NSString stringWithFormat:@"来自:%@", _weiboFrame.weibo.source];
101.    
102.     // 6、正文
103.     _contentLabel.text = _weiboFrame.weibo.content;
104.     _contentLabel.numberOfLines = 0;                    // 多行文本
105.    
106.     // 7、配图
107.     if (_weiboFrame.weibo.image) {
108.         _imageView.hidden = NO;
109.         _imageView.image = [UIImage imageNamed:_weiboFrame.weibo.image];
110.         _imageView.contentMode = UIViewContentModeScaleAspectFit;
111.         // 图片显示模式为最大化填充，非拉伸效果，不改变图片宽高比
112.         
113.     } else {
114.         _imageView.hidden = YES;
115.     }
116. }
118. // 调用子视图框架模型设置每条微博中子视图的尺寸及位置
119. - (void)settingFrame
120. {
121.     // 1、头像
122.     _iconView.frame = _weiboFrame.iconViewFrame;
123.    
124.     // 2、昵称
125.     _nameLabel.frame = _weiboFrame.nameLabelFrame;
126.    
127.     // 3、vip
128.     _vipView.frame = _weiboFrame.vipViewFrame;
129.    
130.     // 4、时间
131.     _timeLabel.frame = _weiboFrame.timeLabelFrame;
132.    
133.     // 5、来源
134.     _sourceLabel.frame = _weiboFrame.sourceLabelFrame;
135.    
136.     // 6、正文
137.     _contentLabel.frame = _weiboFrame.contentLabelFrame;
138.    
139.     // 7、配图
140.     _imageView.frame = _weiboFrame.imageViewFrame;
141. }
143. // 封装tableView缓存中重复利用Cell的标识
144. +(NSString *)ID
145. {
146.     return @"Weibo";
147. }
149. @end

复制代码

SAWeiboController.h

1. //
2. //  SAWeiboController.h
3. //  Weibo
4. //
5. //  Created by yusian on 14-4-10.
6. //  Copyright (c) 2014年 yusian. All rights reserved.
7. //
9. #import <UIKit/UIKit.h>
11. @interface SAWeiboController : UITableViewController
13. @end

复制代码

SAWeiboController.m

1. //
2. //  SAWeiboController.m
3. //  Weibo
4. //
5. //  Created by yusian on 14-4-10.
6. //  Copyright (c) 2014年 yusian. All rights reserved.
7. //
9. #import "SAWeiboController.h"
10. #import "SAWeibo.h"
11. #import "SAWeiboFrame.h"
12. #import "SAWeiboCell.h"
14. @interface SAWeiboController ()
15. {
16.     NSMutableArray *_weiboFrames;       // 可变数据保存视图框架模型
17. }
19. @end
21. @implementation SAWeiboController
23. - (void)viewDidLoad
24. {
25.     [super viewDidLoad];
26.     _weiboFrames = [NSMutableArray array];
27.    
28.     // 将plist文件读取到数据，原始数据
29.     NSArray *array = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"Weibo.plist" ofType:nil]];
30.    
31.     for (NSDictionary *dict in array) {
32.         SAWeiboFrame *weiboFrame = [[SAWeiboFrame alloc] init]; // 创建视图框架模型
33.         weiboFrame.weibo = [SAWeibo weiboWithDict:dict];        // 将原始数据转换成数据模型
34.         [_weiboFrames addObject:weiboFrame];                    // 视图框架模型保存到数组
35.     }
36.    
37.     // 利用tableView缓存数据机制中的一个特别处理方式，如果缓存中没有则调用相关类创建
38.     [self.tableView registerClass:[SAWeiboCell class] forCellReuseIdentifier:[SAWeiboCell ID]];
39.     /*等同于以下代码
40.     if (cell == nil) {
41.         cell = [[SAWeiboCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:[SAWeiboCell ID]];
42.     }*/
43. }
45. #pragma mark - Table view data source
47. - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
48. {
49.     return _weiboFrames.count;
50. }
52. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
53. {
54.     // 缓存中取相关对象重复利用
55.     SAWeiboCell *cell = [tableView dequeueReusableCellWithIdentifier:[SAWeiboCell ID]];
56.    
57.     // 将数据视图框架模型(该模型中包含了数据模型)赋值给Cell，展示每条微博内容
58.     cell.weiboFrame = _weiboFrames[indexPath.row];
59.    
60.     return cell;
61. }
63. - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
64. {
65.     // 调用视图框架模型返回每条微博动态高度
66.     return [_weiboFrames[indexPath.row] cellHeight];
67. }
69. @end

复制代码

4、源代码下载

游客，本帖隐藏的内容需要积分高于 1 才可浏览，您当前积分为 0