首页 > 代码库 > iOS开发UI篇—以微博界面为例使用纯代码自定义cell程序编码全过程（一）
iOS开发UI篇—以微博界面为例使用纯代码自定义cell程序编码全过程（一）
iOS开发UI篇—以微博界面为例使用纯代码自定义cell程序编码全过程（一）
一、storyboard的处理
直接让控制器继承uitableview controller，然后在storyboard中把继承自uiviewcontroller的控制器干掉，重新拖一个tableview controller，和主控制器进行连线。
项目结构和plist文件
二、程序逻辑业务的处理
第一步，把配图和plist中拿到项目中，加载plist数据（非png的图片放到spooding files中）
第二步，字典转模型，完成plist中数据的加载。属性的注意点（number vip是bool类型，本质是整型的）kvc会智能的把nsnumber转换成bool型的。
第三步，懒加载。
第四步，有了数据之后直接实现数据源方法
（1）一共有几组（如果有一组的，那么可以不写，默认为一组）
（2）每组一共有多少行（数组有多少个元素，就有多少组）
（3）展示数据
1）到缓存中取cell
2）没有的话就创建
3）设置数据
4）返回cell
三、代码
视图部分
TXStatusCell.h文件
1 // 01-屌丝逆天之---微博 2 // 3 // Created by 鑫 on 14-10-12. 4 // Copyright (c) 2014年 梁镋鑫. All rights reserved. 5 // 6 7 #import <UIKit/UIKit.h> 8 @class TXStatus; 9 @interface TXStatusCell : UITableViewCell10 @property (nonatomic, strong) TXStatus *status;11 @end
TXStatusCell.m文件
1 // 2 // 昵称的字体 3 #define TXNameFont [UIFont systemFontOfSize:14] 4 // 正文的字体 5 #define TXTextFont [UIFont systemFontOfSize:15] 6 #import "TXStatusCell.h" 7 #import "TXStatus.h" 8 @interface TXStatusCell() 9 10 /** 11 * 头像 12 */ 13 @property (nonatomic, weak) UIImageView *iconView; 14 /** 15 * 昵称 16 */ 17 @property (nonatomic, weak) UILabel *nameView; 18 /** 19 * 会员图标 20 */ 21 @property (nonatomic, weak) UIImageView *vipView; 22 /** 23 * 正文 24 */ 25 @property (nonatomic, weak) UILabel *textView; 26 /** 27 * 配图 28 */ 29 @property (nonatomic, weak) UIImageView *pictureView; 30 31 32 @end 33 @implementation TXStatusCell 34 /** 35 * 构造方法(在初始化对象的时候会调用) 36 * 一般在这个方法中添加需要显示的子控件 37 */ 38 - (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier 39 { 40 self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]; 41 if (self) { 42 // 1.头像 43 UIImageView *iconView = [[UIImageView alloc] init]; 44 [self.contentView addSubview:iconView]; 45 self.iconView = iconView; 46 47 // 2.昵称 48 UILabel *nameView = [[UILabel alloc] init]; 49 // nameView.backgroundColor = [UIColor redColor]; 50 nameView.font = TXNameFont; 51 [self.contentView addSubview:nameView]; 52 self.nameView = nameView; 53 54 // 3.会员图标 55 UIImageView *vipView = [[UIImageView alloc] init]; 56 vipView.image = [UIImage imageNamed:@"vip"]; 57 [self.contentView addSubview:vipView]; 58 self.vipView = vipView; 59 60 // 4.正文 61 UILabel *textView = [[UILabel alloc] init]; 62 // textView.backgroundColor = [UIColor blueColor]; 63 textView.numberOfLines = 0; 64 textView.font = TXTextFont; 65 [self.contentView addSubview:textView]; 66 self.textView = textView; 67 68 // 5.配图 69 UIImageView *pictureView = [[UIImageView alloc] init]; 70 [self.contentView addSubview:pictureView]; 71 self.pictureView = pictureView; 72 } 73 return self; 74 } 75 /** 76 * 在这个方法中设置子控件的frame和显示数据 77 */ 78 - (void)setStatus:(TXStatus *)status 79 { 80 _status= status; 81 82 // 1.设置数据 83 [self settingData]; 84 85 // 2.设置frame 86 [self settingFrame]; 87 } 88 /** 89 * 设置数据 90 */ 91 - (void)settingData 92 { 93 // 1.头像 94 self.iconView.image = [UIImage imageNamed:self.status.icon]; 95 96 // 2.昵称 97 self.nameView.text = self.status.name; 98 99 // 3.会员图标100 if (self.status.vip) {101 self.vipView.hidden = NO;102 103 self.nameView.textColor = [UIColor redColor];104 } else {105 self.vipView.hidden = YES;106 107 self.nameView.textColor = [UIColor blackColor];108 }109 110 // 4.正文111 self.textView.text = self.status.text;112 113 // 5.配图114 if (self.status.picture) { // 有配图115 self.pictureView.hidden = NO;116 self.pictureView.image = [UIImage imageNamed:self.status.picture];117 } else { // 没有配图118 self.pictureView.hidden = YES;119 }120 }121 122 /**123 * 计算文字尺寸124 *125 * @param text 需要计算尺寸的文字126 * @param font 文字的字体127 * @param maxSize 文字的最大尺寸128 */129 - (CGSize)sizeWithText:(NSString *)text font:(UIFont *)font maxSize:(CGSize)maxSize130 {131 NSDictionary *attrs = @{NSFontAttributeName : font};132 return [text boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:attrs context:nil].size;133 }134 135 /**136 * 设置frame137 */138 - (void)settingFrame139 {140 // 子控件之间的间距141 CGFloat padding = 10;142 143 // 1.头像144 CGFloat iconX = padding;145 CGFloat iconY = padding;146 CGFloat iconW = 30;147 CGFloat iconH = 30;148 self.iconView.frame = CGRectMake(iconX, iconY, iconW, iconH);149 150 // 2.昵称151 // 文字的字体,计算文字的宽度由字体大小也数量决定152 CGSize nameSize = [self sizeWithText:self.status.name font:TXNameFont maxSize:CGSizeMake(MAXFLOAT, MAXFLOAT)];153 CGFloat nameX = CGRectGetMaxX(self.iconView.frame) + padding;154 CGFloat nameY = iconY + (iconH - nameSize.height) * 0.5;155 self.nameView.frame = CGRectMake(nameX, nameY, nameSize.width, nameSize.height);156 157 // 3.会员图标158 CGFloat vipX = CGRectGetMaxX(self.nameView.frame) + padding;159 CGFloat vipY = nameY;160 CGFloat vipW = 14;161 CGFloat vipH = 14;162 self.vipView.frame = CGRectMake(vipX, vipY, vipW, vipH);163 164 // 4.正文165 CGFloat textX = iconX;166 CGFloat textY = CGRectGetMaxY(self.iconView.frame) + padding;167 CGSize textSize = [self sizeWithText:self.status.text font:TXTextFont maxSize:CGSizeMake(300, MAXFLOAT)];168 self.textView.frame = CGRectMake(textX, textY, textSize.width, textSize.height);169 170 // 5.配图171 if (self.status.picture) {// 有配图172 CGFloat pictureX = textX;173 CGFloat pictureY = CGRectGetMaxY(self.textView.frame) + padding;174 CGFloat pictureW = 100;175 CGFloat pictureH = 100;176 self.pictureView.frame = CGRectMake(pictureX, pictureY, pictureW, pictureH);177 }178 }179 180 - (void)awakeFromNib181 {182 // Initialization code183 }184 185 - (void)setSelected:(BOOL)selected animated:(BOOL)animated186 {187 [super setSelected:selected animated:animated];188 189 // Configure the view for the selected state190 }191 192 @end
TXStatus.h文件
1 // 01-屌丝逆天之---微博 2 // 3 // Created by 鑫 on 14-10-12. 4 // Copyright (c) 2014年 梁镋鑫. All rights reserved. 5 // 6 7 #import <Foundation/Foundation.h> 8 9 @interface TXStatus : NSObject10 @property (nonatomic, copy) NSString *text; // 内容11 @property (nonatomic, copy) NSString *icon; // 头像12 @property (nonatomic, copy) NSString *name; // 昵称13 @property (nonatomic, copy) NSString *picture; // 配图14 @property (nonatomic, assign) BOOL vip;15 16 - (instancetype)initWithDict:(NSDictionary *)dict;17 + (instancetype)statusWithDict:(NSDictionary *)dict;18 19 @end
TXStatus.m文件
1 // 2 3 #import "TXStatus.h" 4 #import "TXStatus.h" 5 @implementation TXStatus 6 - (instancetype)initWithDict:(NSDictionary *)dict 7 { 8 if (self = [super init]) { 9 [self setValuesForKeysWithDictionary:dict];10 }11 return self;12 }13 14 + (instancetype)statusWithDict:(NSDictionary *)dict15 {16 return [[self alloc] initWithDict:dict];17 }18 19 @end
主控制器部分
TXViewControllerh文件
1 #import <UIKit/UIKit.h>2 3 @interface TXViewController : UITableViewController4 5 @end
TXViewController.m文件
1 #import "TXViewController.h" 2 #import "TXStatus.h" 3 #import "TXStatusCell.h" 4 @interface TXViewController () 5 @property (nonatomic, strong) NSArray *statuses; 6 7 8 @end 9 10 @implementation TXViewController11 - (void)viewDidLoad12 {13 [super viewDidLoad];14 // Do any additional setup after loading the view, typically from a nib.15 //行高16 self.tableView.rowHeight = 400;17 }18 19 - (NSArray *)statuses20 {21 if (_statuses == nil) {22 // 初始化23 // 1.获得plist的全路径24 NSString *path = [[NSBundle mainBundle] pathForResource:@"statuses.plist" ofType:nil];25 26 // 2.加载数组27 NSArray *dictArray = [NSArray arrayWithContentsOfFile:path];28 29 // 3.将dictArray里面的所有字典转成模型对象,放到新的数组中30 NSMutableArray *statusArray = [NSMutableArray array];31 for (NSDictionary *dict in dictArray) {32 // 3.1.创建模型对象33 TXStatus *status = [TXStatus statusWithDict:dict];34 35 // 3.2.添加模型对象到数组中36 [statusArray addObject:status];37 }38 39 // 4.赋值40 _statuses = statusArray;41 }42 return _statuses;43 }44 #pragma mark - 实现数据源方法45 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section46 {47 return self.statuses.count;48 }49 50 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath51 {52 static NSString *ID = @"status";53 TXStatusCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];54 if (cell == nil) {55 cell = [[TXStatusCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];56 }57 58 cell.status = self.statuses[indexPath.row];59 60 return cell;61 }62 63 - (BOOL)prefersStatusBarHidden64 {65 return YES;66 }67 68 69 70 @end
阶段性展示：
四、补充说明
1对于展示数据部分的补充说明：
设置数据的时候遇到新的问题：uitableviewcell默认只有一个imageview，一个tabletext和一个详细三个子控件可以用，但是这个微博至少有四个。系统提供的cell不能满足需求，那么我们就在系统提供的cell的基础上为它增加一些功能，新建一个类，自定义cell，让它继承自uitableviewcell。
不用系统的，用自己定义的cell,把自定义的cell头文件导入，还是先去缓存中找，如果找不到就创建一个自定义的cell。创建玩自定义cell后，就应该给cell设置数据，按照封装的思想，设置数据的时候，你把数据给我，我自己爱怎么设置就怎么设置。所以把当前的模型取出来，传递给我cell中得一个属性，我自己重写set方法完成赋值。在cell里面应该增加一个属性，用于接收传入的模型。
此时，应该赋值数据，并对系统原有的封装和操作进行分析。在以前创建的系统的cell一创建的时候默认就有三个子控件提供给我们使用。自定义的cell按照实际的需求（需要创建5个子控件），我们也应该以创建出一个cell来就能够提供五个子控件供我们使用。
在哪个地方可以以创建出来就拥有某些东西呢？当然是在initwith初始化方法中完成（构造方法让我们的对象一创建出来就拥有某些东西），为了让我自定义的cell一创建出来就有三个imageview两个label，应该重写构造。系统自动填好（你很有可能会用到）。在构造方法中，让自定义的cell和系统的cell一样，以创建出来就拥有一些子控件提供给我们使用。
2在自定义cell部分的说明：
A.创建控件，添加并赋值给属性。
1.创建头像
2.创建昵称
3.创建vip
4创建正文
5.创建配图
注意点：uiimageview iconview名称不能写成是imageview(他的父类叫imageview，那么不能在子类中定义一个imageview,不然到时候它怎么知道是要调用哪个？不能和系统自带的重名)。
创建好之后，添加到contentview中。可以进入到头文件中查看注释：如果你自定义一个cell，如果要添加view的时候，建议添加到contentview中。
当在外部创建一个cell的时候，调用他的初始化构造方法，首先就来到构造方法中，添加5个控件到cell中。为什么不设置数据（系统的也没有设置数据）添加数据，将来设置模型的时候再添加。
B.如何设置数据？
在传递模型给他的时候，重写它的set方法，拿到外界传递进来的数据，给它设置数据就完了。
重写set方法:在set方法中，应该做两件事情。
（1）设置子控件的数据
（2）设置子控件的frame，因为如果不设置frame的话，子控件根本显示不出来。（不能在init方法中设置控件的frame）
逻辑：因为子控件的frame高度等是依赖于数据的，需要根据数据来确定，所以只能在拿到数据的时候才能设置子控件的frame,在下面的set方法中要拿到上面添加的控件，怎么拿？是否应该把上面的子控件通过属性保存一下。控件一般用weak,但是用strong也可以。通过属性保存之后，下面才能进行赋值。
提示：设置数据和设置frame是两个功能，应该把他们封装到两个方法中去。
【self settingDate】 vip的图片是不用变的
【self settingFrame】
四、实现思路整理
设置frame时的思路和一些注意点:
（1）
一个控件没有frame肯定显示不出来
设置frame的过程中需要从哪里入手呢？以后遇到要为很多控件设置frmae的时候。建议先找控件之间的关系，先找准一个固定不变的点，然后再计算不确定的控件的frmae.总要有一个点，再来计算其他的东西。
在这个应用中找到规律，先设置头像的，再设置其他的。
在真实开发中间隙等是由美工提供的。计算x,y,w,h等得值。分别计算所有控件的frame,注意这是依赖于数据的。
（2）
获取控件的最大值CGRectMaxX（SELF.ICONvIEW.FRAME）或取头像最大的x值。
在ios7中计算文字的宽度和高度？
需要传递一个字体。影响文本的宽度和高度的因素：（1）字体的大小；（2）存放文本的最大的范围。在计算文本的宽高时，应该告诉这两个。
_weibo.name sizewithFont:nil ios7以前的方法
ios7以后要传4个参数
boundingRectWthSize:(cgsize).....将来能够显示文本的范围，宽和高。
nsdictionary *dict=@{NSfontattributename:宏}
在创建昵称的时候就要告诉它，将来以15号的字体显示。（注意不要忘了这一点，否则计算出来的不准确）
不限制其宽度和高度的大小：MAXFLOAT
计算文本的宽高，把这个功能封装。接受三个参数，字符串，字体，Maxsize.返回值为CGSIZE.
需要计算的文本
文本显示的字体
文本显示的范围
文本占用的真实宽高。
注意：有关字体的计算，在创建的时候就要指定其将要显示的字号是多大。
内容文本的宽高和昵称不一样，正文会换行，那么就限制一下其宽度，不限制高度就可以了。
cell的高度不够，需要在viewdioad中设置cell的高度（大失所望）
默认label只显示一行。当创建正文的时候，还要设置让其自定换行。设置为0
（3）
如果没有配图的话就不计算它的宽高，把计算的过程放到if大括号里边。
设置配图的问题：有的又配图，有的没有配图（cell滚动离开视野放到缓存池中）。问题在于，如果需要一个没有配图的，这时候去缓存中去取，取到的是一个有配图的那不是就冲突了么？
如何解决这个问题：
在设置数据的时候进行判断，如果有配图，那么就设置数据，.hidden=no；
如果没有配图的话那就不让它显示。hidden=YES.
注意点：在tableview中有一个复用的问题，有显示就要有隐藏。这是一个陷阱。一定要记住。
（4）
所有的vip图标都是同一个，可以在init初始化方法中对vip图标进行设置。
此时出现了一个新的问题。所有的宽高计算一次就可以了，但是这里每次滚动都会调用计算，没有必要。
五、重要说明
IOS7以后计算文本的宽度和高度：
//4.设置正文的frame
CGFloat textLabX=iconViewX;
CGFloat textLabY=CGRectGetMaxY(self.iconView.frame)+padding;
CGSize textSize=[self sizeWithString:_weibo.text font:YYTextFont maxSize:CGSizeMake(300,MAXFLOAT)];
self.textLab.frame=CGRectMake(textLabX, textLabY, textSize.width, textSize.height);
这里把计算过程封装在了下面的方法中：
1 /** 2 * 计算文本的宽高 3 * 4 * @param str 需要计算的文本 5 * @param font 文本显示的字体 6 * @param maxSize 文本显示的范围 7 * 8 * @return 文本占用的真实宽高 9 */10 - (CGSize)sizeWithString:(NSString *)str font:(UIFont *)font maxSize:(CGSize)maxSize11 {12 NSDictionary *dict = @{NSFontAttributeName : font};13 // 如果将来计算的文字的范围超出了指定的范围,返回的就是指定的范围14 // 如果将来计算的文字的范围小于指定的范围, 返回的就是真实的范围15 CGSize size = [str boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:dict context:nil].size;16 return size;17 }
iOS开发UI篇—以微博界面为例使用纯代码自定义cell程序编码全过程（一）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。