iOS开发UI篇—以微博界面为例使用纯代码自定义cell程序编码全过程（三·完结）

 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

  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
155     //vip图标的x值=昵称的最大x值+间隙
156     CGFloat vipX=CGRectGetMaxX(self.nameLabel.frame)+padding;
157     CGFloat vipY=nameLableY;
158     CGFloat vipW=14;
159     CGFloat vipH=14;
160     self.vipView.frame=CGRectMake(vipX, vipY, vipW, vipH);
161     
162     //4.设置正文的frame
163     CGFloat textLabX=iconViewX;
164     CGFloat textLabY=CGRectGetMaxY(self.iconView.frame)+padding;
165     CGSize textSize=[self sizeWithString:_weibo.text font:YYTextFont maxSize:CGSizeMake(300,MAXFLOAT)];
166     self.textLab.frame=CGRectMake(textLabX, textLabY, textSize.width, textSize.height);
167     
168     //5.设置配图的frame
169     //添加一个变量，来计算行高
170     CGFloat cellHight=0;
171     //如果有配图，则行高=配图最大的Y值+padding
172     //如果没有配图，则行高=文本最大的Y值+padding
173     if (_weibo.picture) {
174         CGFloat pictureX=iconViewX;
175         CGFloat pictureY=CGRectGetMaxY(self.textLab.frame)+padding;
176         CGFloat pictureW=100;
177         CGFloat pictureH=100;
178         self.pictureView.frame=CGRectMake(pictureX, pictureY, pictureW, pictureH);
179         cellHight=CGRectGetMaxY(self.pictureView.frame)+padding;
180     }else
181         cellHight=CGRectGetMaxY(self.textLab.frame)+padding;
182 }
183 
184 
185 /**
186  *  计算文本的宽高
187  *
188  *  @param str     需要计算的文本
189  *  @param font    文本显示的字体
190  *  @param maxSize 文本显示的范围
191  *
192  *  @return 文本占用的真实宽高
193  */
194 - (CGSize)sizeWithString:(NSString *)str font:(UIFont *)font maxSize:(CGSize)maxSize
195 {
196     NSDictionary *dict = @{NSFontAttributeName : font};
197     // 如果将来计算的文字的范围超出了指定的范围,返回的就是指定的范围
198     // 如果将来计算的文字的范围小于指定的范围, 返回的就是真实的范围
199     CGSize size =  [str boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:dict context:nil].size;
200     return size;
201 }
202 @end

 1 //
 2 //  YYweiboFrame.h
 3 //  微博基本信息展示
 4 //
 5 //  Created by 孔医己 on 14-6-5.
 6 //  Copyright (c) 2014年 itcast. All rights reserved.
 7 //
 8 
 9 #import <Foundation/Foundation.h>
10 #import "YYweiboModel.h"
11 
12 @interface YYweiboFrame : NSObject
13 /**
14  *  头像的frame
15  */
16 @property(nonatomic,assign)CGRect iconF;
17 /**
18  *  vip图标的frame
19  */
20 @property(nonatomic,assign)CGRect vipF;
21 /**
22  *  微博昵称的frame
23  */
24 @property(nonatomic,assign)CGRect nameF;
25 /**
26  *  配图的frame
27  */
28 @property(nonatomic,assign)CGRect pictureF;
29 /**
30  *  正文的frame
31  */
32 @property(nonatomic,assign)CGRect textF;
33 /**
34  *  行高
35  */
36 @property(nonatomic,assign)CGFloat cellHight;
37 
38 /**
39  *  设置一个YYweiboModel型的属性，用来接收模型
40  */
41 
42 @property(nonatomic,strong)YYweiboModel *weibo;
43 
44 @end

 1 //
 2 //  YYweiboFrame.m
 3 //  微博基本信息展示
 4 //
 5 //  Created by 孔医己 on 14-6-5.
 6 //  Copyright (c) 2014年 itcast. All rights reserved.
 7 //
 8 
 9 #import "YYweiboFrame.h"
10 #import "YYweiboModel.h"
11 
12 #define YYNameFont [UIFont systemFontOfSize:15]
13 #define YYTextFont [UIFont systemFontOfSize:16]
14 
15 
16 @implementation YYweiboFrame
17 
18 /**
19  *  重写weibo的set方法，设置模型数据的frame属性
20  */
21 -(void)setWeibo:(YYweiboModel *)weibo
22 {
23     _weibo=weibo;
24     
25         //1.设置头像的frame
26     CGFloat padding=10;
27     CGFloat iconViewX=padding;
28     CGFloat iconViewY=padding;
29     CGFloat iconViewW=30;
30     CGFloat iconViewH=30;
31     
32     self.iconF=CGRectMake(iconViewX, iconViewY, iconViewW, iconViewH);
33     
34     //2.设置微博昵称的frame
35     //昵称的X值=头像的最大的x值+padding
36     CGFloat nameLabelX=CGRectGetMaxX(self.iconF)+padding;
37     CGSize nameSize=[self sizeWithString:_weibo.name font:YYNameFont maxSize:CGSizeMake(MAXFLOAT,MAXFLOAT)];
38     //昵称的Y值=（头像高度-整个文本字体的高度）*0.5+头像的Y值
39     CGFloat nameLableY=(iconViewH-nameSize.height)*0.5+iconViewY;
40     self.nameF=CGRectMake(nameLabelX, nameLableY, nameSize.width, nameSize.height);
41     
42     //3.设置vip图标的frame
43     //vip图标的x值=昵称的最大x值+间隙
44     CGFloat vipX=CGRectGetMaxX(self.nameF)+padding;
45     CGFloat vipY=nameLableY;
46     CGFloat vipW=14;
47     CGFloat vipH=14;
48     self.vipF=CGRectMake(vipX, vipY, vipW, vipH);
49     
50     //4.设置正文的frame
51     CGFloat textLabX=iconViewX;
52     CGFloat textLabY=CGRectGetMaxY(self.iconF)+padding;
53     CGSize textSize=[self sizeWithString:_weibo.text font:YYTextFont maxSize:CGSizeMake(300,MAXFLOAT)];
54     self.textF=CGRectMake(textLabX, textLabY, textSize.width, textSize.height);
55     
56     //5.设置配图的frame
57     //添加一个变量，来计算行高
58     //CGFloat cellHight=0;
59     //如果有配图，则行高=配图最大的Y值+padding
60     //如果没有配图，则行高=文本最大的Y值+padding
61     if (_weibo.picture) {
62         CGFloat pictureX=iconViewX;
63         CGFloat pictureY=CGRectGetMaxY(self.textF)+padding;
64         CGFloat pictureW=100;
65         CGFloat pictureH=100;
66         self.pictureF=CGRectMake(pictureX, pictureY, pictureW, pictureH);
67         self.cellHight=CGRectGetMaxY(self.pictureF)+padding;
68     }else
69         self.cellHight=CGRectGetMaxY(self.textF)+padding;
70 }
71 
72 
73 /**
74  *  计算文本的宽高
75  *
76  *  @param str     需要计算的文本
77  *  @param font    文本显示的字体
78  *  @param maxSize 文本显示的范围
79  *
80  *  @return 文本占用的真实宽高
81  */
82 - (CGSize)sizeWithString:(NSString *)str font:(UIFont *)font maxSize:(CGSize)maxSize
83 {
84     NSDictionary *dict = @{NSFontAttributeName : font};
85     // 如果将来计算的文字的范围超出了指定的范围,返回的就是指定的范围
86     // 如果将来计算的文字的范围小于指定的范围, 返回的就是真实的范围
87     CGSize size =  [str boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:dict context:nil].size;
88     return size;
89 }
90 @end