UI基础--UITableView实现仿微博页面

需求:类似于微博内容页面的展示,内容包括有头像、呢称、会员标志、微博内容、微博图片(可有可没有)。具体效果图：



分析：
1、看界面，明显可以使用UITableView来实现显示微博数据；
2、但是，UITableView系统自定的cell无法满足需要，因为内容包括有头像、呢称、会员标志、微博内容、微博图片等等，所以这时就需要考虑自定义cell了；
3、在自定义cell时，可以考虑把各控件的frame抽出来封装成一个类，计算frame以及行高；
实例的文件结构：



实现的具体步骤：

1、自定义数据模型类，并测试数据是否能正常加载；

2、设置storyBoard，把UIViewController改为UITableViewController,，并更改controller文件为继承自UITableViewController的自定义文件，设置关联;



3、自定义cell，由于每行数据的高度都是不规则的，所以考虑先自定义好frame再来写自定义cell。属性包括frame模型以及生成可重用cell的方法，要注意的是需要重写initWithStytle方法，写给cell各子控件赋值以及生成frame的方法;

4、自定义frame，属性包括模型数据和行高以及cell中各个子控件的frame;

5、在控制器中写UITableView的 数据显示的方法;

具体的代码：

Category:

//
//  NSString+Ext.m
//  12-24-MicroBlog
//
//  Created by xiaomoge on 14/12/24.
//  Copyright (c) 2014年 xiaomoge. All rights reserved.
//

#import "NSString+Ext.h"

@implementation NSString (Ext)
//取得字体的大小
- (CGSize)setTextSize:(CGSize)maxSize andFontSize:(CGFloat)fontSize {
return [self boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:fontSize]} context:nil].size;
}
@end

Model:

//
//  JWMicroBlog.h
//  12-24-MicroBlog
//
//  Created by xiaomoge on 14/12/24.
//  Copyright (c) 2014年 xiaomoge. All rights reserved.
//

#import <Foundation/Foundation.h>

@interface JWMicroBlog : NSObject
@property (nonatomic,copy) NSString *text;
@property (nonatomic,copy) NSString *icon;
@property (nonatomic,copy) NSString *name;
@property (nonatomic,copy) NSString *picture;
@property (nonatomic,assign,getter=isVip) BOOL vip;
- (instancetype)initWithDic:(NSDictionary *)dic;
+ (instancetype)microBlogWithDic:(NSDictionary *)dic;
+ (NSArray *)microBlogList;
@end

//
//  JWMicroBlog.m
//  12-24-MicroBlog
//
//  Created by xiaomoge on 14/12/24.
//  Copyright (c) 2014年 xiaomoge. All rights reserved.
//

#import "JWMicroBlog.h"

@implementation JWMicroBlog
- (instancetype)initWithDic:(NSDictionary *)dic {
if (self = [super init]) {
[self setValuesForKeysWithDictionary:dic];
}
return self;
}
+ (instancetype)microBlogWithDic:(NSDictionary *)dic {
return [[self alloc] initWithDic:dic];
}
+ (NSArray *)microBlogList {
NSArray *datas = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"microblog" ofType:@"plist"]];
NSMutableArray *temp = [NSMutableArray array];

for (NSDictionary *dic in datas) {
JWMicroBlog *blog = [JWMicroBlog microBlogWithDic:dic];
[temp addObject:blog];
}
return temp;
}
@end

//
//  JWMicroBlogFrame.h
//  12-24-MicroBlog
//
//  Created by xiaomoge on 14/12/24.
//  Copyright (c) 2014年 xiaomoge. All rights reserved.
//
#define NAMEFONT 13
#define TEXTFONT 14
#import <UIKit/UIKit.h>
#import "JWMicroBlog.h"
@interface JWMicroBlogFrame : NSObject
/*
数据模型
*/
@property (nonatomic,strong) JWMicroBlog *microBlog;
/*
头像frame
*/
@property (nonatomic,assign,readonly) CGRect iconFrame;
/*
昵称frame
*/
@property (nonatomic,assign,readonly) CGRect nameFrame;
/*
vipframe
*/
@property (nonatomic,assign,readonly) CGRect vipFrame;
/*
内容frame
*/
@property (nonatomic,assign,readonly) CGRect textFrame;
/*
图片frame
*/
@property (nonatomic,assign,readonly) CGRect pictureFrame;
/*
行高
*/
@property (nonatomic,assign,readonly) CGFloat rowHeight;
/*
获取数据的方法
*/
+ (NSArray *)microBlogFrameList;
@end

//
//  JWMicroBlogFrame.m
//  12-24-MicroBlog
//
//  Created by xiaomoge on 14/12/24.
//  Copyright (c) 2014年 xiaomoge. All rights reserved.
//

#import "JWMicroBlogFrame.h"
#import "NSString+Ext.h"
@implementation JWMicroBlogFrame
/*
重写set方法
*/
- (void)setMicroBlog:(JWMicroBlog *)microBlog {

_microBlog = microBlog;
//间距
CGFloat margin = 10;
//头像
CGFloat iconW = 40;
CGFloat iconH = 40;
CGFloat iconX = margin;
CGFloat iconY = margin;
_iconFrame = CGRectMake(iconX, iconY, iconW, iconH);

//昵称
CGSize nameSize = [microBlog.name setTextSize:CGSizeMake(MAXFLOAT, MAXFLOAT) andFontSize:NAMEFONT];//取得昵称文字的大小,调用了分类的一个方法
CGFloat nameX = CGRectGetMaxX(_iconFrame) + margin;//X值是头像的最大X值加上间距
CGFloat nameY = (iconH + margin) * 0.5;//Y值是头像的高度加上间距的一半，这里用 * 比用 / 好，速度更快
_nameFrame = CGRectMake(nameX, nameY, nameSize.width, nameSize.height);

//vip
CGFloat vipW = 14;
CGFloat vipH = 14;
CGFloat vipX = CGRectGetMaxX(_nameFrame);//X值是昵称的最大X值
CGFloat vipY = nameY;
if (microBlog.isVip) {//如果模型数据中有vip的数据，才需要定义vip图片的frame
_vipFrame = CGRectMake(vipX, vipY, vipW, vipH);
}

//内容
CGSize textSize = [microBlog.text setTextSize:CGSizeMake(355, MAXFLOAT) andFontSize:TEXTFONT];
CGFloat textX = margin;
CGFloat textY = CGRectGetMaxY(_iconFrame) + margin;//Y值是头像的最大Y值加上间距
_textFrame = CGRectMake(textX, textY, textSize.width, textSize.height);

//图片
CGFloat pictureW = 100;
CGFloat pictureH = 100;
CGFloat pictureX = margin;
CGFloat pictureY = CGRectGetMaxY(_textFrame) + margin;//Y值是内容的最大Y值加上间距
if (microBlog.picture) {//如果模型数据中有微博图片的数据，才需要定义frame
_pictureFrame = CGRectMake(pictureX, pictureY, pictureW, pictureH);
}

//行高
CGFloat textMax = CGRectGetMaxY(_textFrame);//定义一个内容的最大Y值
CGFloat pictureMax = CGRectGetMaxY(_pictureFrame);//定义一个微博图片的最大Y值
_rowHeight = MAX(textMax, pictureMax) + margin;//行高是根据是否有微博图片来决定的。这里的MAX函数其实就是返回一个最大值
}
+ (NSArray *)microBlogFrameList {
NSArray *microBlog = [JWMicroBlog microBlogList];

NSMutableArray *tem = [NSMutableArray array];

for (JWMicroBlog *blog in microBlog) {
JWMicroBlogFrame *frame = [[JWMicroBlogFrame alloc] init];
frame.microBlog = blog;
[tem addObject:frame];
}
return tem;
}
@end

View:

//
//  JWMicroBlogCell.h
//  12-24-MicroBlog
//
//  Created by xiaomoge on 14/12/24.
//  Copyright (c) 2014年 xiaomoge. All rights reserved.
//

#import <UIKit/UIKit.h>
@class JWMicroBlogFrame;
@interface JWMicroBlogCell : UITableViewCell
@property (nonatomic,strong) JWMicroBlogFrame *microBlogFrame;
+ (JWMicroBlogCell *)cellWithTableView:(UITableView *)tableView;
@end

//
//  JWMicroBlogCell.m
//  12-24-MicroBlog
//
//  Created by xiaomoge on 14/12/24.
//  Copyright (c) 2014年 xiaomoge. All rights reserved.
//

#import "JWMicroBlogCell.h"
#import "JWMicroBlogFrame.h"
@interface JWMicroBlogCell ()
@property (nonatomic,weak) UIImageView *iconView;//头像view
@property (nonatomic,weak) UILabel *nameLabel;//昵称view
@property (nonatomic,weak) UIImageView *vipView;//vip图片view
@property (nonatomic,weak) UILabel *textView;//内容view
@property (nonatomic,weak) UIImageView *pictureView;//微博图片view
@end
@implementation JWMicroBlogCell
/*
快速构造一个可重用的cell
*/
+ (JWMicroBlogCell *)cellWithTableView:(UITableView *)tableView {
static NSString *resue = @"bolg";//缓存池标识
JWMicroBlogCell *cell = [tableView dequeueReusableCellWithIdentifier:resue];
if (!cell) {
cell = [[self alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:resue];
}
return cell;
}
/*
重写init方法,添加各控件
*/
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
//头像子控件
UIImageView *icon = [[UIImageView alloc] init];
[self.contentView addSubview:icon];
self.iconView = icon;

//昵称子控件
UILabel *name = [[UILabel alloc] init];
[self.contentView addSubview:name];
self.nameLabel = name;
name.font = [UIFont systemFontOfSize:NAMEFONT];

//vip子控件
UIImageView *vip = [[UIImageView alloc] init];
[self.contentView addSubview:vip];
self.vipView = vip;

//内容子控件
UILabel *text = [[UILabel alloc] init];
[self.contentView addSubview:text];
self.textView = text;
text.numberOfLines = 0;
text.font = [UIFont systemFontOfSize:TEXTFONT];

//图片子控件
UIImageView *picture = [[UIImageView alloc] init];
[self.contentView addSubview:picture];
self.pictureView = picture;
}
return self;
}
/*
重写set方法，设置cell中各控件的内容和frame
*/
- (void)setMicroBlogFrame:(JWMicroBlogFrame *)microBlogFrame {
_microBlogFrame = microBlogFrame;
[self setSubviewsContent];//设置cell中各控件显示的内容
[self setSubviewsFrame];//设置cell中各控件的frame
}
/*
设置cell中各控件显示的内容
*/
- (void)setSubviewsContent {
JWMicroBlog *msg = self.microBlogFrame.microBlog;
self.iconView.image = [UIImage imageNamed:msg.icon];
self.nameLabel.text = msg.name;
if (msg.isVip) {//如果是vip，则昵称颜色设置为红色，否则为黑色
self.vipView.image = [UIImage imageNamed:@"vip"];
self.nameLabel.textColor = [UIColor redColor];
}else {
self.nameLabel.textColor = [UIColor blackColor];
}
self.textView.text = msg.text;
self.pictureView.image = [UIImage imageNamed:msg.picture];
}
/*
设置cell中各控件的frame
*/
- (void)setSubviewsFrame {
self.iconView.frame = self.microBlogFrame.iconFrame;
self.nameLabel.frame = self.microBlogFrame.nameFrame;
self.vipView.frame = self.microBlogFrame.vipFrame;
self.textView.frame = self.microBlogFrame.textFrame;
self.pictureView.frame = self.microBlogFrame.pictureFrame;
}
@end

Controller:

//
//  JWController.m
//  12-24-MicroBlog
//
//  Created by xiaomoge on 14/12/24.
//  Copyright (c) 2014年 xiaomoge. All rights reserved.
//

#import "JWController.h"
#import "JWMicroBlog.h"
#import "JWMicroBlogCell.h"
#import "JWMicroBlogFrame.h"
@interface JWController ()<UITableViewDataSource>
//frame模型数组
@property (nonatomic,strong) NSArray *microBlogFrame;
@end
@implementation JWController
#pragma mark - 懒加载
- (NSArray *)microBlogFrame {
if (!_microBlogFrame) {//如果为空
_microBlogFrame = [JWMicroBlogFrame microBlogFrameList];
}
return _microBlogFrame;
}
#pragma mark - 隐藏状态栏
- (BOOL)prefersStatusBarHidden {
return YES;
}
- (void)viewDidLoad {
[super viewDidLoad];
}
#pragma mark - UITableViewDataSource方法
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return self.microBlogFrame.count;//返回每组行的多少
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
JWMicroBlogCell *cell = [JWMicroBlogCell cellWithTableView:tableView];
cell.microBlogFrame = self.microBlogFrame[indexPath.row];//取得对应行的数据
return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
return [self.microBlogFrame[indexPath.row] rowHeight];//返回每行数据的行高
}
@end