github:https://github.com/hellovoidworld/HVWWeibo
A.自定义微博cell基本结构
1.需求
创建自定义cell的雏形cell包含:内容、工具条内容包含:原创内容、转发内容
2.思路
使用分层控件,逐层实现分离model和viewmodel:数据模型、frame模型view:就是控件本身frame模型:包含数据模型和子控件frame根据数据模型来决定子控件是否显示(例如转发内容)
cell的view设计雏形:
控件的成员属性层次:
3.实现
(1)创建cell和基本的子控件view
(2)初始化cell,添加内容控件和工具条控件
1//2//HVWStatusCell.m3//HVWWeibo4//5//Created by hellovoidworld on 15/2/12.6//Copyright (c) 2015年 hellovoidworld. All rights reserved.7//89#import"HVWStatusCell.h"10#import"HVWStatusContentView.h"11#import"HVWStatusToolbar.h"1213@interfaceHVWStatusCell()1415/** 微博内容控件*/16@PRoperty(nonatomic, weak) HVWStatusContentView *statusContentView;1718/** 微博工具条控件*/19@property(nonatomic, weak) HVWStatusToolbar *toolbar;2021@end2223@implementationHVWStatusCell2425- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {26self =[super initWithStyle:style reuseIdentifier:reuseIdentifier];2728if(self) {//初始化子控件开始29//初始化微博内容控件30[self setupStatusContentView];3132//初始化工具条控件 */33[self setupToolbar];34}3536returnself;37}3839/** 初始化微博内容控件*/40- (void) setupStatusContentView {41HVWStatusContentView *statusContentView =[[HVWStatusContentView alloc] init];42self.statusContentView =statusContentView;43[self.contentView addSubview:statusContentView];44}4546/** 初始化工具条控件*/47- (void) setupToolbar {48HVWStatusToolbar *toolbar =[[HVWStatusToolbar alloc] init];49self.toolbar =toolbar;50[self.contentView addSubview:toolbar];51}5253@end
(3)初始化内容view
1//2//HVWStatusContentView.m3//HVWWeibo4//5//Created by hellovoidworld on 15/2/12.6//Copyright (c) 2015年 hellovoidworld. All rights reserved.7//89#import"HVWStatusContentView.h"10#import"HVWStatusOriginalView.h"11#import"HVWStatusRetweetedView.h"1213@interfaceHVWStatusContentView()1415/** 原创内容*/16@property(nonatomic, weak) HVWStatusOriginalView *originalView;1718/** 转发内容*/19@property(nonatomic, weak) HVWStatusRetweetedView *retweetedView;2021@end2223@implementationHVWStatusContentView2425-(instancetype)initWithFrame:(CGRect)frame {26self =[super initWithFrame:frame];2728if(self) {//初始化子控件开始29//初始化原创内容控件30[self setupOriginalView];3132//初始化转发内容控件33[self setupRetweetedView];34}3536returnself;37}3839/** 初始化原创内容控件*/40- (void) setupOriginalView {4142}4344/** 初始化转发内容控件*/45- (void) setupRetweetedView {4647}4849@end
B.cell内部子控件
1.需求
根据微博iOS版,分析一个cell里面有哪些子控件,并实现
2.思路
在每个view里面添加子控件
3.实现
(1)第1层 cell
1//2//HVWStatusCell.h3//HVWWeibo4//5//Created by hellovoidworld on 15/2/12.6//Copyright (c) 2015年 hellovoidworld. All rights reserved.7//89#import<UIKit/UIKit.h>1011@interfaceHVWStatusCell : UITableViewCell1213+ (instancetype) cellWithTableView:(UITableView *)tableView;1415@end
1//2//HVWStatusCell.m3//HVWWeibo4//5//Created by hellovoidworld on 15/2/12.6//Copyright (c) 2015年 hellovoidworld. All rights reserved.7//89#import"HVWStatusCell.h"10#import"HVWStatusContentView.h"11#import"HVWStatusToolbar.h"1213@interfaceHVWStatusCell()1415/** 微博内容控件*/16@property(nonatomic, weak) HVWStatusContentView *statusContentView;1718/** 微博工具条控件*/19@property(nonatomic, weak) HVWStatusToolbar *toolbar;2021@end2223@implementationHVWStatusCell2425/** 创建*/26+ (instancetype) cellWithTableView:(UITableView *)tableView {27staticNSString *ID =@"HVWStatusCell";28HVWStatusCell *cell =[tableView dequeueReusableCellWithIdentifier:ID];2930if(nil ==cell) {31cell =[[self alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:ID];32}3334returncell;35}3637/** 初始化*/38- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {39self =[super initWithStyle:style reuseIdentifier:reuseIdentifier];4041if(self) {//初始化子控件开始42//初始化微博内容控件43[self setupStatusContentView];4445//初始化工具条控件 */46[self setupToolbar];47}4849returnself;50}5152/** 初始化微博内容控件*/53- (void) setupStatusContentView {54HVWStatusContentView *statusContentView =[[HVWStatusContentView alloc] init];55self.statusContentView =statusContentView;56[self.contentView addSubview:statusContentView];57}5859/** 初始化工具条控件*/60- (void) setupToolbar {61HVWStatusToolbar *toolbar =[[HVWStatusToolbar alloc] init];62self.toolbar =toolbar;63[self.contentView addSubview:toolbar];64}6566@end
(2)第二层
a.微博内容
1//2//HVWStatusContentView.h3//HVWWeibo4//5//Created by hellovoidworld on 15/2/12.6//Copyright (c) 2015年 hellovoidworld. All rights reserved.7//89#import<UIKit/UIKit.h>1011@interfaceHVWStatusContentView : UIView1213@end
1//2//HVWStatusContentView.m3//HVWWeibo4//5//Created by hellovoidworld on 15/2/12.6//Copyright (c) 2015年 hellovoidworld. All rights reserved.7//89#import"HVWStatusContentView.h"10#import"HVWStatusOriginalView.h"11#import"HVWStatusRetweetedView.h"1213@interfaceHVWStatusContentView()1415/** 原创内容*/16@property(nonatomic, weak) HVWStatusOriginalView *originalView;1718/** 转发内容*/19@property(nonatomic, weak) HVWStatusRetweetedView *retweetedView;2021@end2223@implementationHVWStatusContentView2425-(instancetype)initWithFrame:(CGRect)frame {26self =[super initWithFrame:frame];2728if(self) {//初始化子控件开始29//初始化原创内容控件30[self setupOriginalView];3132//初始化转发内容控件33[self setupRetweetedView];34}3536returnself;37}3839/** 初始化原创内容控件*/40- (void) setupOriginalView {4142}4344/** 初始化转发内容控件*/45- (void) setupRetweetedView {4647}4849@end
b.工具条
1//2//HVWStatusToolbar.h3//HVWWeibo4//5//Created by hellovoidworld on 15/2/12.6//Copyright (c) 2015年 hellovoidworld. All rights reserved.7//89#import<UIKit/UIKit.h>1011@interfaceHVWStatusToolbar : UIView1213@end
1//2//HVWStatusToolbar.m3//HVWWeibo4//5//Created by hellovoidworld on 15/2/12.6//Copyright (c) 2015年 hellovoidworld. All rights reserved.7//89#import"HVWStatusToolbar.h"1011@implementationHVWStatusToolbar1213/** 代码自定义初始化方法*/14-(instancetype)initWithFrame:(CGRect)frame {15self =[super initWithFrame:frame];1617if(self) {18self.backgroundColor =[UIColor greenColor];19}2021returnself;22}2324@end
(3)第3层
a.原创微博
1//2//HVWStatusOriginalView.h3//HVWWeibo4//5//Created by hellovoidworld on 15/2/12.6//Copyright (c) 2015年 hellovoidworld. All rights reserved.7//89#import<UIKit/UIKit.h>1011@interfaceHVWStatusOriginalView : UIView1213@end
1//2//HVWStatusOriginalView.m3//HVWWeibo4//5//Created by hellovoidworld on 15/2/12.6//Copyright (c) 2015年 hellovoidworld. All rights reserved.7//89#import"HVWStatusOriginalView.h"1011@interfaceHVWStatusOriginalView()1213/** 昵称*/14@property(nonatomic, weak) UILabel *nameLabel;1516/** 头像*/17@property(nonatomic, weak) UIImageView *iconView;1819/** 微博发表时间*/20@property(nonatomic, weak) UILabel *timeLabel;2122/** 微博来源*/23@property(nonatomic, weak) UILabel *sourceLabel;2425/** 微博文本内容*/26@property(nonatomic, weak) UILabel *textLabel;2728@end2930@implementationHVWStatusOriginalView313233/** 代码初始化方法*/34-(instancetype)initWithFrame:(CGRect)frame {35self =[super initWithFrame:frame];3637if(self) {//初始化子控件开始38//昵称39UILabel *nameLabel =[[UILabel alloc] init];40nameLabel.font =HVWStatusOriginalNameFont;41self.nameLabel =nameLabel;42[self addSubview:nameLabel];4344//头像45UIImageView *iconView =[[UIImageView alloc] init];46self.iconView =iconView;47[self addSubview:iconView];4849//发表时间50UILabel *timeLabel =[[UILabel alloc] init];51self.timeLabel =timeLabel;52[self addSubview:timeLabel];5354//来源55UILabel *sourceLabel =[[UILabel alloc] init];56self.sourceLabel =sourceLabel;57[self addSubview:sourceLabel];5859//正文60UILabel *textLabel =[[UILabel alloc] init];61self.textLabel =textLabel;62[self addSubview:textLabel];63}6465returnself;66}6768@end
b.转发微博
1//2//HVWStatusRetweetedView.h3//HVWWeibo4//5//Created by hellovoidworld on 15/2/12.6//Copyright (c) 2015年 hellovoidworld. All rights reserved.7//89#import<UIKit/UIKit.h>1011@interfaceHVWStatusRetweetedView : UIView1213@end
1//2//HVWStatusRetweetedView.m3//HVWWeibo4//5//Created by hellovoidworld on 15/2/12.6//Copyright (c) 2015年 hellovoidworld. All rights reserved.7//89#import"HVWStatusRetweetedView.h"1011@interfaceHVWStatusRetweetedView()1213/** 昵称*/14@property(nonatomic, weak) UILabel *nameLabel;1516/** 微博文本内容*/17@property(nonatomic, weak) UILabel *textLabel;1819@end2021@implementationHVWStatusRetweetedView2223/** 代码初始化方法*/24-(instancetype)initWithFrame:(CGRect)frame {25self =[super initWithFrame:frame];2627if(self) {//初始化子控件开始28//昵称29UILabel *nameLabel =[[UILabel alloc] init];30nameLabel.font =HVWStatusOriginalNameFont;31self.nameLabel =nameLabel;32[self addSubview:nameLabel];3334//正文35UILabel *textLabel =[[UILabel alloc] init];36self.textLabel =textLabel;37[self addSubview:textLabel];38}3940returnself;41}4243@end