首页 > 代码库 > 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
三、代码
视图部分
YYweiboCell.h文件
1 // 2 // YYweiboCell.h 3 // 微博基本信息展示 4 // 5 // Created by 孔医己 on 14-6-2. 6 // Copyright (c) 2014年 itcast. All rights reserved. 7 // 8 9 #import <UIKit/UIKit.h> 10 11 @class YYweiboModel; 12 @interface YYweiboCell : UITableViewCell 13 14 @property(nonatomic,strong)YYweiboModel *weibo; 15 @end
YYweiboCell.m文件
1 // 2 // YYweiboCell.m 3 // 微博基本信息展示 4 // 5 // Created by 孔医己 on 14-6-2. 6 // Copyright (c) 2014年 itcast. All rights reserved. 7 // 8 9 #import "YYweiboCell.h" 10 #import "YYweiboModel.h" 11 12 @interface YYweiboCell() 13 /** 14 * 头像 15 */ 16 @property(nonatomic,weak)UIImageView *iconView; 17 /** 18 * vip图标 19 */ 20 @property(nonatomic,weak)UIImageView *vipView; 21 /** 22 * 微博昵称 23 */ 24 @property(nonatomic,weak)UILabel *nameLabel; 25 /** 26 * 配图 27 */ 28 @property(nonatomic,weak)UIImageView *pictureView; 29 /** 30 * 正文 31 */ 32 @property(nonatomic,weak)UILabel *textLab; 33 34 @end 35 36 @implementation YYweiboCell 37 38 //重写构造方法，让自定义的cell一创建出来就有五个子控件 39 - (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier 40 { 41 self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]; 42 if (self) { 43 //1.添加头像 44 UIImageView *img=[[UIImageView alloc]init]; 45 [self.contentView addSubview:img]; 46 self.iconView=img; 47 48 //2.添加昵称 49 UILabel *namelab=[[UILabel alloc]init]; 50 [self.contentView addSubview:namelab]; 51 self.nameLabel=namelab; 52 53 //3.vip 54 UIImageView *vipview=[[UIImageView alloc]init]; 55 [self.contentView addSubview:vipview]; 56 self.vipView=vipview; 57 58 //4.正文 59 UILabel *textlab=[[UILabel alloc]init]; 60 [self.contentView addSubview:textlab]; 61 self.textLab=textlab; 62 63 //5.图片 64 UIImageView *picture=[[UIImageView alloc]init]; 65 [self.contentView addSubview:picture]; 66 self.pictureView=picture; 67 } 68 return self; 69 } 70 71 /** 72 * 重写set方法 73 * 74 * @param weibo 微博 75 */ 76 -(void)setWeibo:(YYweiboModel *)weibo 77 { 78 //不要忘了，记录传递进来的模型 79 _weibo=weibo; 80 //给子控件赋值数据 81 [self settingData]; 82 //设置子控件的frame 83 [self settingFrame]; 84 } 85 86 /** 87 * 对子控件的数据进行设置 88 */ 89 -(void)settingData 90 { 91 //1.设置头像的数据 92 self.iconView.image=[UIImage imageNamed:_weibo.icon]; 93 94 //2.设置vip图标的数据 95 self.vipView.image=[UIImage imageNamed:@"vip"]; 96 97 //3.设置正文内容的数据 98 self.textLab.text=_weibo.text; 99 100 //4.设置配图的数据 101 self.pictureView.image=[UIImage imageNamed:_weibo.picture]; 102 103 //5.设置微博昵称数据 104 self.nameLabel.text=_weibo.name; 105 } 106 107 108 /** 109 * 设置子控件的Frame 110 */ 111 -(void)settingFrame 112 { 113 //1.设置头像的frame 114 CGFloat padding=10; 115 CGFloat iconViewX=padding; 116 CGFloat iconViewY=padding; 117 CGFloat iconViewW=30; 118 CGFloat iconViewH=30; 119 120 self.iconView.frame=CGRectMake(iconViewX, iconViewY, iconViewW, iconViewH); 121 122 123 #warning 未完成 124 } 125 @end
数据模型部分
YYweiboModel.h文件
1 // 2 // YYweiboModel.h 3 // 微博基本信息展示 4 // 5 // Created by 孔医己 on 14-6-2. 6 // Copyright (c) 2014年 itcast. All rights reserved. 7 // 8 9 #import <Foundation/Foundation.h> 10 11 @interface YYweiboModel : NSObject 12 /** 13 * 昵称 14 */ 15 @property(nonatomic,copy)NSString *name; 16 /** 17 * 正文 18 */ 19 @property(nonatomic,copy)NSString *text; 20 /** 21 * 头像 22 */ 23 @property(nonatomic,copy)NSString *icon; 24 /** 25 * 配图 26 */ 27 @property(nonatomic,copy)NSString *picture; 28 /** 29 * 是否是vip 30 */ 31 @property(nonatomic,assign)BOOL vip; 32 33 //接口 34 -(instancetype)initWithDict:(NSDictionary *)dict; 35 +(instancetype)weiboModelWithDict:(NSDictionary *)dict; 36 @end
YYweiboModel.m文件
1 // 2 // YYweiboModel.m 3 // 微博基本信息展示 4 // 5 // Created by 孔医己 on 14-6-2. 6 // Copyright (c) 2014年 itcast. All rights reserved. 7 // 8 9 #import "YYweiboModel.h" 10 11 @implementation YYweiboModel 12 13 -(instancetype)initWithDict:(NSDictionary *)dict 14 { 15 if (self = [super init]) { 16 //使用KVC 17 [self setValuesForKeysWithDictionary:dict]; 18 } 19 return self; 20 } 21 22 /** 23 * 工厂方法 24 * 25 * @param dict 字典 26 * 27 * @return 模型 28 */ 29 +(instancetype)weiboModelWithDict:(NSDictionary *)dict 30 { 31 return [[self alloc]initWithDict:dict]; 32 } 33 @end
主控制器部分
YYViewController.h文件
#import <UIKit/UIKit.h> @interface YYViewController : UITableViewController @end
YYViewController.m文件
1 // 2 // YYViewController.m 3 // 微博基本信息展示 4 // 5 // Created by 孔医己 on 14-6-2. 6 // Copyright (c) 2014年 itcast. All rights reserved. 7 // 8 9 #import "YYViewController.h" 10 #import "YYweiboModel.h" 11 #import "YYweiboCell.h" 12 13 @interface YYViewController () 14 @property(nonatomic,strong)NSArray *weibos; 15 16 @end 17 18 @implementation YYViewController 19 20 - (void)viewDidLoad 21 { 22 [super viewDidLoad]; 23 } 24 25 #pragma mark -懒加载 26 -(NSArray *)weibos 27 { 28 if (_weibos==Nil) { 29 NSString *fullpath=[[NSBundle mainBundle]pathForResource:@"statuses.plist" ofType:nil]; 30 NSArray *arrayM=[NSArray arrayWithContentsOfFile:fullpath]; 31 32 NSMutableArray *models=[NSMutableArray arrayWithCapacity:arrayM.count]; 33 for (NSDictionary *dict in arrayM) { 34 YYweiboModel *weibomodel=[YYweiboModel weiboModelWithDict:dict]; 35 [models addObject:weibomodel]; 36 } 37 _weibos=[models copy]; 38 } 39 return _weibos; 40 } 41 42 #pragma mark- 数据源方法 43 //返回多少组 44 //这里可以不写，默认返回一组 45 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView 46 { 47 return 1; 48 } 49 //每组多少行 50 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section 51 { 52 return self.weibos.count; 53 } 54 //每组每行的数据-设置cell 55 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 56 { 57 //1.到缓存中去取cell 58 static NSString *ID=@"ID"; 59 //2.没有则创建cell 60 YYweiboCell *cell=[tableView dequeueReusableCellWithIdentifier:ID]; 61 if (cell==nil) { 62 cell=[[YYweiboCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID]; 63 } 64 65 //3.设置cell的数据 66 cell.weibo=self.weibos[indexPath.row]; 67 //4.返回cell 68 return cell; 69 70 } 71 72 #pragma mark- 隐藏状态栏 73 -(BOOL)prefersStatusBarHidden 74 { 75 return YES; 76 } 77 @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】
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。