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文件

1 #import <UIKit/UIKit.h>
2 
3 @interface YYViewController : UITableViewController
4 
5 @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】

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。