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

微博界面如下

1、准备资源文件

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

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

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

// 行数
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 0;
}
// 设置行内容
- (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,60 ,20);
    _time.frame = timeF;
    // 来源
    CGFloat sourceX = CGRectGetMaxX(timeF) + kBorder;
    CGFloat sourceY = CGRectGetMinY(timeF);
    CGRect sourceF = CGRectMake(sourceX, sourceY,320 ,20);
    _source.frame = sourceF;
    
    // 正文
    CGFloat contentX = kBorder; // 获取头像的最大x值并加上间隔kBorder
    CGFloat contentY = MAX(CGRectGetMaxY(iconF), CGRectGetMaxY(timeF)) + kBorder;
    CGSize contentSize = [_content.text sizeWithAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:60]}];
    CGRect contentF = CGRectMake(contentX, contentY,320 - 2 * kBorder , contentSize.height );
    _content.frame = contentF;
    // 配图计算cell高度, 虽然这里计算了，但是现在这个高度无法传出去
    CGFloat cellHeight = 0;
    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:30]}];
    _contentF = CGRectMake(contentX, contentY,kViewWidth - 2 * 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 = 0;
    // 作者
    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 = 0;
    // 配图
    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:13];
    // 作者
    _author.frame = _weiboFrame.authorF;
    _author.font = [UIFont systemFontOfSize:13];
    // vip
    _vip.frame = _weiboFrame.vipF;
    _vip.font = [UIFont systemFontOfSize:13];
    _vip.textColor = [UIColor redColor];
    // 时间
    _time.frame = _weiboFrame.timeF;
    _time.font = [UIFont systemFontOfSize:13];
    // 来源
    _source.frame = _weiboFrame.sourceF;
    _source.font = [UIFont systemFontOfSize:13];

    // 正文
    _content.frame = _weiboFrame.contentF;
    _content.font = [UIFont systemFontOfSize:15];
    // 配图计算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

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