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

微博界面如下

1、准备资源文件

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

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

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

 // 行数
 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
 {
     return ;
 }
 // 设置行内容
 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
 {
     UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:nil];
     return cell;
 }

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

　　3.1 添加内部子控件到contentView中

 - (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
 {
     self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
     if (self) {
         // Initialization code
         // 读取plist文件都程序

         // 头像
         UIImageView *icon = [[UIImageView alloc] init];
         [self.contentView addSubview:icon];
         // 标题
         UILabel *title = [[UILabel alloc] init];
         [self.contentView addSubview:title];
         // 作者
         UILabel *author = [[UILabel alloc] init];
         [self.contentView addSubview:author];
         // vip
         UILabel *vip = [[UILabel alloc] init];
         [self.contentView addSubview:vip];
         // 时间
         UILabel *time = [[UILabel alloc] init];
         [self.contentView addSubview:time];
         // 来源
         UILabel *source = [[UILabel alloc] init];
         [self.contentView addSubview:source];
         // 正文
         UILabel *content = [[UILabel alloc] init];
         [self.contentView addSubview:content];
         // 配图
         UIImageView *image = [[UIImageView alloc] init];
         [self.contentView addSubview:image];

     }
     return self;
 }

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

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

 #import <UIKit/UIKit.h>

 @interface weibo : UITableViewCell
 @property (nonatomic,copy) NSString *icon; // 头像
 @property (nonatomic,copy) NSString *title; // 标题
 @property (nonatomic,copy) NSString *author; // 作者
 @property (nonatomic,assign) BOOL vip; // vip
 @property (nonatomic,copy) NSString *time; // 时间
 @property (nonatomic,copy) NSString *source; // 来源
 @property (nonatomic,copy) NSString *content; // 正文
 @property (nonatomic,copy) NSString *image; // 配图

 - (id)initWithDict:(NSDictionary *)dict;
 + (id)weiboWithDict:(NSDictionary *)dict;

 @end

　　4.2、自定义构造方法

 - (id)initWithDict:(NSDictionary *)dict
 {
     if (self = [self init])
     {
         self.icon = dict[@"icon"];
         self.title = dict[@"title"];
         self.author = dict[@"author"];
         self.vip = [dict[@"vip"] boolValue];
         self.time = dict[@"time"];
         self.source = dict[@"source"];
         self.content = dict[@"content"];
         self.image = dict[@"image"];
     }
     return self;
 }

 + (id)weiboWithDict:(NSDictionary *)dict
 {
     return [[weibo alloc] initWithDict:dict];
 }

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

 // 类扩展,增加私有属性
 @interface WeiboCell()
 {
     // 头像
     UIImageView *_icon;
     // 标题
     UILabel *_title;
     // 作者
     UILabel *_author;
     // vip
     UILabel *_vip;
     // 时间
     UILabel *_time;
     // 来源
     UILabel *_source;
     // 正文
     UILabel *_content;
     // 配图
     UIImageView *_image;

 }
 @end

　　4.4、重写set方法

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

　　4.5、设置微博数据

 // 设置微博数据
 - (void)settingData
 {
       // 头像
     _icon.image = [UIImage imageNamed:_weibo.icon];
     // 标题
     _title.text = _weibo.title;
     // 作者
     _author.text = _weibo.author;
     // vip，是否显示vip
     _vip.hidden = !_weibo.vip;
     // _vip.text = [NSString stringWithFormat:@"vip%d",weibo.vip];
     // 时间
     _time.text = _weibo.time;
     // 来源
     _source.text =_weibo.source;
     // 正文
     _content.text = _weibo.content;
     // 配图
     if (_image.image)
     {
     _image.hidden = NO;
        _image.image = [UIImage imageNamed:_weibo.image];;
     }
     else // 没有配图
     {
         _image.hidden = YES;
     }
 }

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

 // 设置微博子控件的frame
 - (void)settingFrame
 {
  // 头像
     CGFloat iconX = kBorder;
     CGFloat iconY = kBorder;
     CGRect iconF = CGRectMake(iconX, iconY, kIconWH, kIconWH);
     _icon.frame = iconF;
     // 标题
     CGFloat titleX = CGRectGetMaxX(iconF) + kBorder; // 获取头像的最大x值并加上间隔kBorder
     CGFloat titleY = iconY;
     CGRect titleF = CGRectMake(titleX, titleY, kTitleW, kTitleH);
     _title.frame = titleF;
     // 作者
     CGFloat authorX = CGRectGetMaxX(titleF) + kBorder;
     CGFloat authorY = kBorder;
     CGRect authorF = CGRectMake(authorX, authorY, kAuthorW, kAuthorH);
     _author.frame = authorF;
     // vip
     CGFloat vipX = CGRectGetMaxX(authorF) + kBorder;
     CGFloat vipY = kBorder;
     CGRect vipF = CGRectMake(vipX, vipY, kVipW,authorF.size.height);
     _vip.frame = vipF;
     // 时间
     CGFloat timeX = CGRectGetMinX(titleF);
     CGFloat timeY = CGRectGetMaxY(titleF) + kBorder;
     CGRect timeF = CGRectMake(timeX, timeY, ,);
     _time.frame = timeF;
     // 来源
     CGFloat sourceX = CGRectGetMaxX(timeF) + kBorder;
     CGFloat sourceY = CGRectGetMinY(timeF);
     CGRect sourceF = CGRectMake(sourceX, sourceY, ,);
     _source.frame = sourceF;

     // 正文
     CGFloat contentX = kBorder; // 获取头像的最大x值并加上间隔kBorder
     CGFloat contentY = MAX(CGRectGetMaxY(iconF), CGRectGetMaxY(timeF)) + kBorder;
     CGSize contentSize = [_content.text sizeWithAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:]}];
     CGRect contentF = CGRectMake(contentX, contentY, -  * kBorder , contentSize.height );
     _content.frame = contentF;
     // 配图\计算cell高度, 虽然这里计算了，但是现在这个高度无法传出去
     CGFloat cellHeight = ;
     if(_image)
     {
         CGFloat imageX = contentX;
         CGFloat imageY = CGRectGetMaxY(contentF) + kBorder;
         CGRect imageF = CGRectMake(imageX, imageY,kImageWH , kImageWH );
         _image.frame = imageF;
         cellHeight = CGRectGetMaxY(imageF) + kBorder;
     }else
     {
         cellHeight = CGRectGetMaxY(contentF) + kBorder;
     }
     //   NSLog(@"%@",_image);
 }

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

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

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

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

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

 #import <Foundation/Foundation.h>
 @class Weibo;
 @interface WeiboFrame : NSObject
 @property (nonatomic,assign,readonly) CGRect iconF; // 头像frame
 @property (nonatomic,assign,readonly) CGRect titleF; // 标题frame
 @property (nonatomic,assign,readonly) CGRect authorF; // 作者frame
 @property (nonatomic,assign,readonly) CGRect vipF; // vip frame
 @property (nonatomic,assign,readonly) CGRect timeF; // 时间frame
 @property (nonatomic,assign,readonly) CGRect sourceF; // 来源frame
 @property (nonatomic,assign,readonly) CGRect contentF; // 正文frame
 @property (nonatomic,assign,readonly) CGRect imageF; // 配图frame

 @property (nonatomic,assign) CGFloat cellHeight; // cell高度

 @property (nonatomic,strong) Weibo *weibo; // weibo对象

 @end

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

 //
 //  WeiboFrame.m
 //  UITableView-自定义cell
 //
 //  Created by Christian on 15/5/22.
 //  Copyright (c) 2015年 slq. All rights reserved.
 //

 // 边框
 #define kBorder 10
 // 头像宽高
 #define kIconWH 40
 // 标题宽度
 #define kTitleW 100
 // 标题高度
 #define kTitleH 20

 // 作者宽度高度
 #define kAuthorW 80
 #define kAuthorH 20
 // vip 宽度和高度
 #define kVipW 20
 // 时间高度和宽度
 #define kTimeW 60
 #define kTimeH 20
 // 配图宽高
 #define kImageWH 100
 // 视图宽度
 #define kViewWidth 320

 #import "WeiboFrame.h"
 #import "Weibo.h"

 @implementation WeiboFrame
 // 重写setWeibo方法
 - (void)setWeibo:(Weibo *)weibo
 {
     _weibo = weibo;

     // 头像
     CGFloat iconX = kBorder;
     CGFloat iconY = kBorder;
     _iconF = CGRectMake(iconX, iconY, kIconWH, kIconWH);

     // 标题
     CGFloat titleX = CGRectGetMaxX(_iconF) + kBorder; // 获取头像的最大x值并加上间隔kBorder
     CGFloat titleY = iconY;
     _titleF = CGRectMake(titleX, titleY, kTitleW, kTitleH);

     // 作者
     CGFloat authorX = CGRectGetMaxX(_titleF) + kBorder;
     CGFloat authorY = kBorder;
     _authorF = CGRectMake(authorX, authorY, kAuthorW, kAuthorH);

     // vip
     CGFloat vipX = CGRectGetMaxX(_authorF) + kBorder;
     CGFloat vipY = kBorder;
     _vipF = CGRectMake(vipX, vipY, kVipW,_authorF.size.height);

     // 时间
     CGFloat timeX = CGRectGetMinX(_titleF);
     CGFloat timeY = CGRectGetMaxY(_titleF) + kBorder;
     _timeF = CGRectMake(timeX, timeY,kTimeW ,kTimeH);

     // 来源
     CGFloat sourceX = CGRectGetMaxX(_timeF) + kBorder;
     CGFloat sourceY = CGRectGetMinY(_timeF);
     _sourceF = CGRectMake(sourceX, sourceY,kViewWidth ,kTimeH);

     // 正文
     CGFloat contentX = kBorder; //
     CGFloat contentY = MAX(CGRectGetMaxY(_iconF), CGRectGetMaxY(_timeF)) + kBorder;
     CGSize contentSize = [_weibo.content sizeWithAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:]}];
     _contentF = CGRectMake(contentX, contentY,kViewWidth -  * kBorder , contentSize.height );
     // 配图\计算cell高度

     if(_weibo.image)
     {
         CGFloat imageX = contentX;
         CGFloat imageY = CGRectGetMaxY(_contentF) + kBorder;
         _imageF = CGRectMake(imageX, imageY,kImageWH , kImageWH );
         _cellHeight = CGRectGetMaxY(_imageF) + kBorder;
     }else
     {
         _cellHeight = CGRectGetMaxY(_contentF) + kBorder;
     }
 }

 @end

　　5.3、在weiboCell类中做如下修改

 #import <UIKit/UIKit.h>
 @class WeiboFrame;

 @interface WeiboCell : UITableViewCell

 @property (nonatomic,strong) WeiboFrame *weiboFrame;

 @end

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

 // 重写set方法
 - (void)setWeiboFrame:(WeiboFrame *)weiboFrame
 {
     _weiboFrame = weiboFrame;
     // 设置微博数据
     [self settingData];
     // 设置微博子控件的frame
     [self settingFrame];
 }
 // 设置微博数据
 - (void)settingData
 {
     Weibo *weibo = _weiboFrame.weibo;
       // 头像
     _icon.image = [UIImage imageNamed:weibo.icon];
     // 标题
     _title.text = weibo.title;
     _title.numberOfLines = ;
     // 作者
     if (weibo.vip)
     {
         _author.textColor = [UIColor redColor];
     }
     else
         _author.textColor = [UIColor blackColor];
     _author.text = weibo.author;
     // vip，是否显示vip
     // _vip.hidden = !_weibo.vip;
      _vip.text = weibo.vip ? @"vip":@"";
     // 时间
     _time.text = weibo.time;
     // 来源
     _source.text =weibo.source;
     // 正文
     _content.text = weibo.content;
     _content.numberOfLines = ;
     // 配图
     if (_image )
     {
         _image.hidden = NO;
        _image.image = [UIImage imageNamed:weibo.image];;
     }
     else // 没有配图
     {
         _image.hidden = YES;
     }
 }
 // 设置微博子控件的frame
 - (void)settingFrame
 {
     // 头像
     _icon.frame = _weiboFrame.iconF;
     // 标题
     _title.frame = _weiboFrame.titleF;
     _title.font = [UIFont systemFontOfSize:];
     // 作者
     _author.frame = _weiboFrame.authorF;
     _author.font = [UIFont systemFontOfSize:];
     // vip
     _vip.frame = _weiboFrame.vipF;
     _vip.font = [UIFont systemFontOfSize:];
     _vip.textColor = [UIColor redColor];
     // 时间
     _time.frame = _weiboFrame.timeF;
     _time.font = [UIFont systemFontOfSize:];
     // 来源
     _source.frame = _weiboFrame.sourceF;
     _source.font = [UIFont systemFontOfSize:];

     // 正文
     _content.frame = _weiboFrame.contentF;
     _content.font = [UIFont systemFontOfSize:];
     // 配图\计算cell高度
     if (_weiboFrame.weibo.image) {
         _image.frame = _weiboFrame.imageF;
     }

 }

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

　　主要修改 WeiboFrame相关的方法

 // 设置行内容
 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
 {
     // 1、去缓存池中去cell
     static NSString *ID = @"weibo";
     WeiboCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
     // 2、没有cell就创建
     if (cell == nil)
     {
         cell = [[WeiboCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
     }
     // 3、传递模型数据
     WeiboFrame *f = [[WeiboFrame alloc] init];
     f.weibo = _weibo[indexPath.row];
     cell.weiboFrame = f;
     return cell;
 }

 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
 {
     // 根据模型获取cell高度
     WeiboFrame *fam = [[WeiboFrame alloc] init];
     fam.weibo = _weibo[indexPath.row];
     return fam.cellHeight;
     //return 200;
 }

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

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

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