标签:
iOS开发UI篇—以微博界面为例使用纯代码自定义cell程序编码全过程(三·完结)
一、需要改进的地方
还需改进的地方:cell的高度需要根据每条微博的数据进行动态设置。
设置cell的高度可以有两种方式,一种是通过rowheight属性来进行设置,一种是通过代理来进行设置。通过属性设置适用于每行的高度一致,使用代理适用于每行的高度不一致的情况。
在这个应用中,每个cell的高度是根据内容来确定的,所以在这里我们通过代理来设置cell的高度。
获取到图片最大的Y值或者是文字最大的Y值,在cell中设置一个新的变量。
判断一下,如果有配图,则高度等于配图的高度+间隙的高度,如果没有配图那么高度等于文字的高度+间隙的高度。
在自定义cell的setting frame方法中计算出行高,而要在主控制器中进行使用,怎么办才能拿到数据?
计算行高的方法最终是由cellforrow(setweibo->settingframe->计算行高)调用的,如果要拿到行高的话,需要先调用cellforrow这个方法。
查看cellforrow和heughtforrow这两个方法是谁先调用,结果显示是heiforrow先调用。
拿不到计算的行高?怎么办?
让它在计算heightforrow之前就计算出行高。计算行高,依赖于其他控件中的位置,位置依赖于模型中的数据。
拿到模型数据,就可以计算出高度。
那么在哪里可以拿到数据模型呢?
在懒加载中创建模型,就可以拿到模型,计算所有控件的frame,在懒加载中就可以获得行高。
拿到模型后可以计算出5个frame,那么就使用一个模型,把着5个frame保存起来,将来一个自定义的cell就对应一个frame模型。
新建一个类,继承自nsobject,这个类专门用来保存每一行数据的frame。在类中创建5个对应的frame属性,(CGRECT)以及一个行高。添加一个模型数据,当别人给我一个模型数据的时候,我就可以通过重写set方法,设置模型数据的frame.
把之前的frame计算方法拷贝过去。(为什么?)
在懒加载方法中,根据模型数据创建frame模型,往数组里面添加的时候添加frame模型,此时该数组中既有所有的数据模型,又拥有对应的frame。
在代理方法中,获取到当前索引对应的frame。
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
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
15 @property(nonatomic,strong)YYweiboModel *weibo;
16 @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 #define YYNameFont [UIFont systemFontOfSize:15]
13 #define YYTextFont [UIFont systemFontOfSize:16]
14
15 @interface YYweiboCell()
16 /**
17 * 头像
18 */
19 @property(nonatomic,weak)UIImageView *iconView;
20 /**
21 * vip图标
22 */
23 @property(nonatomic,weak)UIImageView *vipView;
24 /**
25 * 微博昵称
26 */
27 @property(nonatomic,weak)UILabel *nameLabel;
28 /**
29 * 配图
30 */
31 @property(nonatomic,weak)UIImageView *pictureView;
32 /**
33 * 正文
34 */
35 @property(nonatomic,weak)UILabel *textLab;
36
37 @end
38
39 @implementation YYweiboCell
40
41 //重写构造方法,让自定义的cell一创建出来就有五个子控件
42 - (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
43 {
44 self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
45 if (self) {
46 //1.添加头像
47 UIImageView *img=[[UIImageView alloc]init];
48 [self.contentView addSubview:img];
49 self.iconView=img;
50
51 //2.添加昵称
52 UILabel *namelab=[[UILabel alloc]init];
53 //在创建昵称的时候就要告诉它,将来要用15号字体显示
54 namelab.font=YYNameFont;
55 [self.contentView addSubview:namelab];
56 self.nameLabel=namelab;
57
58 //3.vip
59 UIImageView *vipview=[[UIImageView alloc]init];
60 vipview.image=[UIImage imageNamed:@"vip"];
61 [self.contentView addSubview:vipview];
62 self.vipView=vipview;
63
64 //4.正文
65 UILabel *textlab=[[UILabel alloc]init];
66 //在创建正文的时候就要告诉它,将来要用16号字体显示
67 textlab.font=YYTextFont;
68 //设置正文在进行显示的时候进行换行
69 textlab.numberOfLines=0;
70 [self.contentView addSubview:textlab];
71 self.textLab=textlab;
72
73 //5.图片
74 UIImageView *picture=[[UIImageView alloc]init];
75 [self.contentView addSubview:picture];
76 self.pictureView=picture;
77 }
78 return self;
79 }
80
81 /**
82 * 重写set方法
83 *
84 * @param weibo 微博
85 */
86 -(void)setWeibo:(YYweiboModel *)weibo
87 {
88 //不要忘了,记录传递进来的模型
89 _weibo=weibo;
90 //给子控件赋值数据
91 [self settingData];
92 //设置子控件的frame
93 [self settingFrame];
94 }
95
96 /**
97 * 对子控件的数据进行设置
98 */
99 -(void)settingData
100 {
101 //1.设置头像的数据
102 self.iconView.image=[UIImage imageNamed:_weibo.icon];
103
104 //2.设置vip图标的数据
105 //判断是否是vip,如果是那么就显示图标,并把字体设置为红色
106 //注意这里的判断
107 if (_weibo.vip) {
108 self.vipView.hidden=NO;
109 // [self.textLab setTintColor:[UIColor redColor]];
110 self.nameLabel.textColor=[UIColor redColor];
111 }else
112 {
113 self.vipView.hidden=YES;
114 self.nameLabel.textColor=[UIColor blackColor];
115 }
116
117
118 //所以的vip图标都是一样的,没有必要每次都设置,只需要在构造方法中设置一次就可以了。
119 // self.vipView.image=[UIImage imageNamed:@"vip"];
120
121 //3.设置正文内容的数据
122 self.textLab.text=_weibo.text;
123
124 //4.设置配图的数据
125 self.pictureView.image=[UIImage imageNamed:_weibo.picture];
126
127 //5.设置微博昵称数据
128 self.nameLabel.text=_weibo.name;
129 }
130
131
132 /**
133 * 设置子控件的Frame
134 */
135 -(void)settingFrame
136 {
137 //1.设置头像的frame
138 CGFloat padding=10;
139 CGFloat iconViewX=padding;
140 CGFloat iconViewY=padding;
141 CGFloat iconViewW=30;
142 CGFloat iconViewH=30;
143
144 self.iconView.frame=CGRectMake(iconViewX, iconViewY, iconViewW, iconViewH);
145
146 //2.设置微博昵称的frame
147 //昵称的X值=头像的最大的x值+padding
148 CGFloat nameLabelX=CGRectGetMaxX(self.iconView.frame)+padding;
149 CGSize nameSize=[self sizeWithString:_weibo.name font:YYNameFont maxSize:CGSizeMake(MAXFLOAT,MAXFLOAT)];
150 //昵称的Y值=(头像高度-整个文本字体的高度)*0.5+头像的Y值
151 CGFloat nameLableY=(iconViewH-nameSize.height)*0.5+iconViewY;
152 self.nameLabel.frame=CGRectMake(nameLabelX, nameLableY, nameSize.width, nameSize.height);
153
154 //3.设置vip图标的frame