IOS开发学习笔记031-代码实现微博界面

时间：2015-05-22 14:52:53 阅读：176 评论：0 收藏：0 [点我收藏+]

标签：

微博界面如下

技术分享

1、准备资源文件

2、更改父类，实现代理方法

3、新建一个类weiboCell，封装cell的实现，继承自UITableViewCell

4、新建一个类weibo，继承NSObject，封装对数据的操作

5、优化：新建一个WeiboFrame类重新计算每个cell的高度

1、准备资源文件

新建一个plist文件，添加条目，root类型是array，子类型是Dictionary

技术分享

2、更改父类，实现代理方法

接下来得实现过程如上一篇文章，改变父类为UITableViewController，在main.storyboard中更换主界面为UITableViewControl

 1 // 行数
 2 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
 3 {
 4     return 0;
 5 }
 6 // 设置行内容
 7 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
 8 {
 9     UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:nil];
10     return cell;
11 }

3、新建一个模型：weiboCell，封装cell的实现

添加内部子控件到contentView中

 1 - (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
 2 {
 3     self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
 4     if (self) {
 5         // Initialization code
 6         // 读取plist文件都程序
 7         
 8         // 头像
 9         UIImageView *icon = [[UIImageView alloc] init];
10         [self.contentView addSubview:icon];
11         // 标题
12         UILabel *title = [[UILabel alloc] init];
13         [self.contentView addSubview:title];
14         // 作者
15         UILabel *author = [[UILabel alloc] init];
16         [self.contentView addSubview:author];
17         // vip
18         UILabel *vip = [[UILabel alloc] init];
19         [self.contentView addSubview:vip];
20         // 时间
21         UILabel *time = [[UILabel alloc] init];
22         [self.contentView addSubview:time];
23         // 来源
24         UILabel *source = [[UILabel alloc] init];
25         [self.contentView addSubview:source];
26         // 正文
27         UILabel *content = [[UILabel alloc] init];
28         [self.contentView addSubview:content];
29         // 配图
30         UIImageView *image = [[UIImageView alloc] init];
31         [self.contentView addSubview:image];
32 
33     }
34     return self;
35 }

4、新建一个类weibo，封装对数据的操作

　　1、添加与字典中对应的属性

 1 #import <UIKit/UIKit.h>
 2 
 3 @interface weibo : UITableViewCell
 4 @property (nonatomic,copy) NSString *icon; // 头像
 5 @property (nonatomic,copy) NSString *title; // 标题
 6 @property (nonatomic,copy) NSString *author; // 作者
 7 @property (nonatomic,assign) BOOL vip; // vip
 8 @property (nonatomic,copy) NSString *time; // 时间
 9 @property (nonatomic,copy) NSString *source; // 来源
10 @property (nonatomic,copy) NSString *content; // 正文
11 @property (nonatomic,copy) NSString *image; // 配图
12 
13 
14 - (id)initWithDict:(NSDictionary *)dict;
15 + (id)weiboWithDict:(NSDictionary *)dict;
16 
17 @end

　　2、自定义构造方法

 1 - (id)initWithDict:(NSDictionary *)dict
 2 {
 3     if (self = [self init])
 4     {
 5         self.icon = dict[@"icon"];
 6         self.title = dict[@"title"];
 7         self.author = dict[@"author"];
 8         self.vip = [dict[@"vip"] boolValue];
 9         self.time = dict[@"time"];
10         self.source = dict[@"source"];
11         self.content = dict[@"content"];
12         self.image = dict[@"image"];
13     }
14     return self;
15 }
16 
17 + (id)weiboWithDict:(NSDictionary *)dict
18 {
19     return [[weibo alloc] initWithDict:dict];
20 }

　　3、通过类扩展的方式增加子控件为私有属性

 1 // 类扩展,增加私有属性
 2 @interface WeiboCell()
 3 {
 4     // 头像
 5     UIImageView *_icon;
 6     // 标题
 7     UILabel *_title;
 8     // 作者
 9     UILabel *_author;
10     // vip
11     UILabel *_vip;
12     // 时间
13     UILabel *_time;
14     // 来源
15     UILabel *_source;
16     // 正文
17     UILabel *_content;
18     // 配图
19     UIImageView *_image;
20 
21 }
22 @end

　　4、重写set方法

1 // 重写set方法
2 - (void)setWeibo:(Weibo *)weibo
3 {
4     _weibo = weibo;
5     // 1、设置微博数据
6     [self settingData];
7     // 2、设置微博子控件的frame
8     [self settingFrame];
9 }

　　5、设置微博数据

 1 // 设置微博数据
 2 - (void)settingData
 3 {
 4       // 头像
 5     _icon.image = [UIImage imageNamed:_weibo.icon];
 6     // 标题
 7     _title.text = _weibo.title;
 8     // 作者
 9     _author.text = _weibo.author;
10     // vip，是否显示vip
11     _vip.hidden = !_weibo.vip;
12     // _vip.text = [NSString stringWithFormat:@"vip%d",weibo.vip];
13     // 时间
14     _time.text = _weibo.time;
15     // 来源
16     _source.text =_weibo.source;
17     // 正文
18     _content.text = _weibo.content;
19     // 配图
20     if (_image.image)
21     {
22     _image.hidden = NO;
23        _image.image = [UIImage imageNamed:_weibo.image];;
24     }
25     else // 没有配图
26     {
27         _image.hidden = YES;
28     }
29 }

　　6、设置每个子控件的位置、尺寸

 1 // 设置微博子控件的frame
 2 - (void)settingFrame
 3 {   
 4  // 头像
 5     CGFloat iconX = kBorder;
 6     CGFloat iconY = kBorder;
 7     CGRect iconF = CGRectMake(iconX, iconY, kIconWH, kIconWH);
 8     _icon.frame = iconF;
 9     // 标题
10     CGFloat titleX = CGRectGetMaxX(iconF) + kBorder; // 获取头像的最大x值并加上间隔kBorder
11     CGFloat titleY = iconY;
12     CGRect titleF = CGRectMake(titleX, titleY, kTitleW, kTitleH);
13     _title.frame = titleF;
14     // 作者
15     CGFloat authorX = CGRectGetMaxX(titleF) + kBorder;
16     CGFloat authorY = kBorder;
17     CGRect authorF = CGRectMake(authorX, authorY, kAuthorW, kAuthorH);
18     _author.frame = authorF;
19     // vip
20     CGFloat vipX = CGRectGetMaxX(authorF) + kBorder;
21     CGFloat vipY = kBorder;
22     CGRect vipF = CGRectMake(vipX, vipY, kVipW,authorF.size.height);
23     _vip.frame = vipF;
24     // 时间
25     CGFloat timeX = CGRectGetMinX(titleF);
26     CGFloat timeY = CGRectGetMaxY(titleF) + kBorder;
27     CGRect timeF = CGRectMake(timeX, timeY,60 ,20);
28     _time.frame = timeF;
29     // 来源
30     CGFloat sourceX = CGRectGetMaxX(timeF) + kBorder;
31     CGFloat sourceY = CGRectGetMinY(timeF);
32     CGRect sourceF = CGRectMake(sourceX, sourceY,320 ,20);
33     _source.frame = sourceF;
34     
35     // 正文
36     CGFloat contentX = kBorder; // 获取头像的最大x值并加上间隔kBorder
37     CGFloat contentY = MAX(CGRectGetMaxY(iconF), CGRectGetMaxY(timeF)) + kBorder;
38     CGSize contentSize = [_content.text sizeWithAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:60]}];
39     CGRect contentF = CGRectMake(contentX, contentY,320 - 2 * kBorder , contentSize.height );
40     _content.frame = contentF;
41     // 配图\计算cell高度, 虽然这里计算了，但是现在这个高度无法传出去
42     CGFloat cellHeight = 0;
43     if(_image)
44     {
45         CGFloat imageX = contentX;
46         CGFloat imageY = CGRectGetMaxY(contentF) + kBorder;
47         CGRect imageF = CGRectMake(imageX, imageY,kImageWH , kImageWH );
48         _image.frame = imageF;
49         cellHeight = CGRectGetMaxY(imageF) + kBorder;
50     }else
51     {
52         cellHeight = CGRectGetMaxY(contentF) + kBorder;
53     }
54     //   NSLog(@"%@",_image);
55 }

现在设置行高度位200，可以看到效果：cell高度还不能自适应

技术分享

5、新建一个WeiboFrame类计算每个cell的高度

　　　上面的方法可以计算但是获取高度却比较麻烦，因为heightForRowAtIndexPath方法的调用在cellForRowAtIndexPath方法之前，但是计算高度的过程却在cellForRowAtIndexPath中。

所以新建一个类用来保存所有子控件的frame属性。

　　1、每个控件对应一个属性，然后声明一个cell高度属性和一个weibo对象

 1 #import <Foundation/Foundation.h>
 2 @class Weibo;
 3 @interface WeiboFrame : NSObject
 4 @property (nonatomic,assign,readonly) CGRect iconF; // 头像frame
 5 @property (nonatomic,assign,readonly) CGRect titleF; // 标题frame
 6 @property (nonatomic,assign,readonly) CGRect authorF; // 作者frame
 7 @property (nonatomic,assign,readonly) CGRect vipF; // vip frame
 8 @property (nonatomic,assign,readonly) CGRect timeF; // 时间frame
 9 @property (nonatomic,assign,readonly) CGRect sourceF; // 来源frame
10 @property (nonatomic,assign,readonly) CGRect contentF; // 正文frame
11 @property (nonatomic,assign,readonly) CGRect imageF; // 配图frame
12 
13 
14 @property (nonatomic,assign) CGFloat cellHeight; // cell高度
15 
16 @property (nonatomic,strong) Weibo *weibo; // weibo对象
17 
18 
19 
20 @end

　　2、重写setWeibo方法，在赋值时计算cell高度和子控件位置尺寸

 1 //
 2 //  WeiboFrame.m
 3 //  UITableView-自定义cell
 4 //
 5 //  Created by Christian on 15/5/22.
 6 //  Copyright (c) 2015年 slq. All rights reserved.
 7 //
 8 
 9 // 边框
10 #define kBorder 10
11 // 头像宽高
12 #define kIconWH 40
13 // 标题宽度
14 #define kTitleW 100
15 // 标题高度
16 #define kTitleH 20
17 
18 // 作者宽度高度
19 #define kAuthorW 80
20 #define kAuthorH 20
21 // vip 宽度和高度
22 #define kVipW 20
23 // 时间高度和宽度
24 #define kTimeW 60
25 #define kTimeH 20
26 // 配图宽高
27 #define kImageWH 100
28 // 视图宽度
29 #define kViewWidth 320
30 
31 #import "WeiboFrame.h"
32 #import "Weibo.h"
33 
34 @implementation WeiboFrame
35 // 重写setWeibo方法
36 - (void)setWeibo:(Weibo *)weibo
37 {
38     _weibo = weibo;
39    
40     // 头像
41     CGFloat iconX = kBorder;
42     CGFloat iconY = kBorder;
43     _iconF = CGRectMake(iconX, iconY, kIconWH, kIconWH);
44   
45     // 标题
46     CGFloat titleX = CGRectGetMaxX(_iconF) + kBorder; // 获取头像的最大x值并加上间隔kBorder
47     CGFloat titleY = iconY;
48     _titleF = CGRectMake(titleX, titleY, kTitleW, kTitleH);
49 
50     // 作者
51     CGFloat authorX = CGRectGetMaxX(_titleF) + kBorder;
52     CGFloat authorY = kBorder;
53     _authorF = CGRectMake(authorX, authorY, kAuthorW, kAuthorH);
54     
55     // vip
56     CGFloat vipX = CGRectGetMaxX(_authorF) + kBorder;
57     CGFloat vipY = kBorder;
58     _vipF = CGRectMake(vipX, vipY, kVipW,_authorF.size.height);
59 
60     // 时间
61     CGFloat timeX = CGRectGetMinX(_titleF);
62     CGFloat timeY = CGRectGetMaxY(_titleF) + kBorder;
63     _timeF = CGRectMake(timeX, timeY,kTimeW ,kTimeH);
64 
65     // 来源
66     CGFloat sourceX = CGRectGetMaxX(_timeF) + kBorder;
67     CGFloat sourceY = CGRectGetMinY(_timeF);
68     _sourceF = CGRectMake(sourceX, sourceY,kViewWidth ,kTimeH);
69 
70     // 正文
71     CGFloat contentX = kBorder; //
72     CGFloat contentY = MAX(CGRectGetMaxY(_iconF), CGRectGetMaxY(_timeF)) + kBorder;
73     CGSize contentSize = [_weibo.content sizeWithAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:30]}];
74     _contentF = CGRectMake(contentX, contentY,kViewWidth - 2 * kBorder , contentSize.height );
75     // 配图\计算cell高度
76     
77     if(_weibo.image)
78     {
79         CGFloat imageX = contentX;
80         CGFloat imageY = CGRectGetMaxY(_contentF) + kBorder;
81         _imageF = CGRectMake(imageX, imageY,kImageWH , kImageWH );
82         _cellHeight = CGRectGetMaxY(_imageF) + kBorder;
83     }else
84     {
85         _cellHeight = CGRectGetMaxY(_contentF) + kBorder;
86     }
87 }
88 
89 
90 @end

　　3、在weiboCell类中做如下修改

1 #import <UIKit/UIKit.h>
2 @class WeiboFrame;
3 
4 @interface WeiboCell : UITableViewCell
5 
6 @property (nonatomic,strong) WeiboFrame *weiboFrame;
7 
8 @end

　　主要修改和属性 weiboFrame相关的方法

 1 // 重写set方法
 2 - (void)setWeiboFrame:(WeiboFrame *)weiboFrame
 3 {
 4     _weiboFrame = weiboFrame;
 5     // 设置微博数据
 6     [self settingData];
 7     // 设置微博子控件的frame
 8     [self settingFrame];
 9 }
10 // 设置微博数据
11 - (void)settingData
12 {
13     Weibo *weibo = _weiboFrame.weibo;
14       // 头像
15     _icon.image = [UIImage imageNamed:weibo.icon];
16     // 标题
17     _title.text = weibo.title;
18     _title.numberOfLines = 0;
19     // 作者
20     if (weibo.vip)
21     {
22         _author.textColor = [UIColor redColor];
23     }
24     else
25         _author.textColor = [UIColor blackColor];
26     _author.text = weibo.author;
27     // vip，是否显示vip
28     // _vip.hidden = !_weibo.vip;
29      _vip.text = weibo.vip ? @"vip":@"";
30     // 时间
31     _time.text = weibo.time;
32     // 来源
33     _source.text =weibo.source;
34     // 正文
35     _content.text = weibo.content;
36     _content.numberOfLines = 0;
37     // 配图
38     if (_image )
39     {
40         _image.hidden = NO;
41        _image.image = [UIImage imageNamed:weibo.image];;
42     }
43     else // 没有配图
44     {
45         _image.hidden = YES;
46     }
47 }
48 // 设置微博子控件的frame
49 - (void)settingFrame
50 {
51     // 头像
52     _icon.frame = _weiboFrame.iconF;
53     // 标题
54     _title.frame = _weiboFrame.titleF;
55     _title.font = [UIFont systemFontOfSize:13];
56     // 作者
57     _author.frame = _weiboFrame.authorF;
58     _author.font = [UIFont systemFontOfSize:13];
59     // vip
60     _vip.frame = _weiboFrame.vipF;
61     _vip.font = [UIFont systemFontOfSize:13];
62     _vip.textColor = [UIColor redColor];
63     // 时间
64     _time.frame = _weiboFrame.timeF;
65     _time.font = [UIFont systemFontOfSize:13];
66     // 来源
67     _source.frame = _weiboFrame.sourceF;
68     _source.font = [UIFont systemFontOfSize:13];
69 
70     // 正文
71     _content.frame = _weiboFrame.contentF;
72     _content.font = [UIFont systemFontOfSize:15];
73     // 配图\计算cell高度
74     if (_weiboFrame.weibo.image) {
75         _image.frame = _weiboFrame.imageF;
76     }
77 
78 }

　　4、在控制器中做如下修改

　　主要修改 WeiboFrame相关的方法

 1 // 设置行内容
 2 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
 3 {
 4     // 1、去缓存池中去cell
 5     static NSString *ID = @"weibo";
 6     WeiboCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
 7     // 2、没有cell就创建
 8     if (cell == nil)
 9     {
10         cell = [[WeiboCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
11     }
12     // 3、传递模型数据
13     WeiboFrame *f = [[WeiboFrame alloc] init];
14     f.weibo = _weibo[indexPath.row];
15     cell.weiboFrame = f;
16     return cell;
17 }
18 
19 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
20 {
21     // 根据模型获取cell高度
22     WeiboFrame *fam = [[WeiboFrame alloc] init];
23     fam.weibo = _weibo[indexPath.row];
24     return fam.cellHeight;
25     //return 200;
26 }

现在来看效果：有图片的显示图片，么有的不显示，并且把高度自动缩小。vip显示红色

技术分享

源代码：http://pan.baidu.com/s/1ntCBukh

总算搞出来了，再接再厉啊

IOS开发学习笔记031-代码实现微博界面

标签：

原文地址：http://www.cnblogs.com/songliquan/p/4522263.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行