[iOS微博项目 - 4.0] - 自定义微博cell

github: https://github.com/hellovoidworld/HVWWeibo

A.自定义微博cell基本结构

1.需求

• 创建自定义cell的雏形
• cell包含：内容、工具条
• 内容包含：原创内容、转发内容

 

 

2.思路

• 使用分层控件，逐层实现
• 分离model和view
• model：数据模型、frame模型
• view：就是控件本身
• frame模型：包含数据模型和子控件frame
• 根据数据模型来决定子控件是否显示（例如转发内容）

 

cell的view设计雏形:

 

控件的成员属性层次:

 

3.实现

（1）创建cell和基本的子控件view

 

 

（2）初始化cell，添加内容控件和工具条控件

 //
 //  HVWStatusCell.m
 //  HVWWeibo
 //
 //  Created by hellovoidworld on 15/2/12.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import "HVWStatusCell.h"
 #import "HVWStatusContentView.h"
 #import "HVWStatusToolbar.h"

 @interface HVWStatusCell()

 /** 微博内容控件 */
 @property(nonatomic, weak) HVWStatusContentView *statusContentView;

 /** 微博工具条控件 */
 @property(nonatomic, weak) HVWStatusToolbar *toolbar;

 @end

 @implementation HVWStatusCell

 - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
     self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];

     if (self) { // 初始化子控件开始
         // 初始化微博内容控件
         [self setupStatusContentView];

         // 初始化工具条控件 */
         [self setupToolbar];
     }

     return self;
 }

 /** 初始化微博内容控件 */
 - (void) setupStatusContentView {
     HVWStatusContentView *statusContentView = [[HVWStatusContentView alloc] init];
     self.statusContentView = statusContentView;
     [self.contentView addSubview:statusContentView];
 }

 /** 初始化工具条控件 */
 - (void) setupToolbar {
     HVWStatusToolbar *toolbar = [[HVWStatusToolbar alloc] init];
     self.toolbar = toolbar;
     [self.contentView addSubview:toolbar];
 }

 @end

 

（3）初始化内容view

 //
 //  HVWStatusContentView.m
 //  HVWWeibo
 //
 //  Created by hellovoidworld on 15/2/12.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import "HVWStatusContentView.h"
 #import "HVWStatusOriginalView.h"
 #import "HVWStatusRetweetedView.h"

 @interface HVWStatusContentView()

 /** 原创内容 */
 @property(nonatomic, weak) HVWStatusOriginalView *originalView;

 /** 转发内容 */
 @property(nonatomic, weak) HVWStatusRetweetedView *retweetedView;

 @end

 @implementation HVWStatusContentView

 - (instancetype)initWithFrame:(CGRect)frame {
     self = [super initWithFrame:frame];

     if (self) { // 初始化子控件开始
         // 初始化原创内容控件
         [self setupOriginalView];

         // 初始化转发内容控件
         [self setupRetweetedView];
     }

     return self;
 }

 /** 初始化原创内容控件 */
 - (void) setupOriginalView {

 }

 /** 初始化转发内容控件 */
 - (void) setupRetweetedView {

 }

 @end

 

B.cell内部子控件

1.需求

根据微博iOS版，分析一个cell里面有哪些子控件，并实现

 

2.思路

在每个view里面添加子控件

 

3.实现

（1）第1层 cell

 //
 //  HVWStatusCell.h
 //  HVWWeibo
 //
 //  Created by hellovoidworld on 15/2/12.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import <UIKit/UIKit.h>

 @interface HVWStatusCell : UITableViewCell

 + (instancetype) cellWithTableView:(UITableView *)tableView;

 @end

 

 //
 //  HVWStatusCell.m
 //  HVWWeibo
 //
 //  Created by hellovoidworld on 15/2/12.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import "HVWStatusCell.h"
 #import "HVWStatusContentView.h"
 #import "HVWStatusToolbar.h"

 @interface HVWStatusCell()

 /** 微博内容控件 */
 @property(nonatomic, weak) HVWStatusContentView *statusContentView;

 /** 微博工具条控件 */
 @property(nonatomic, weak) HVWStatusToolbar *toolbar;

 @end

 @implementation HVWStatusCell

 /** 创建 */
 + (instancetype) cellWithTableView:(UITableView *)tableView {
     static NSString *ID = @"HVWStatusCell";
     HVWStatusCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];

     if (nil == cell) {
         cell = [[self alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:ID];
     }

     return cell;
 }

 /** 初始化 */
 - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
     self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];

     if (self) { // 初始化子控件开始
         // 初始化微博内容控件
         [self setupStatusContentView];

         // 初始化工具条控件 */
         [self setupToolbar];
     }

     return self;
 }

 /** 初始化微博内容控件 */
 - (void) setupStatusContentView {
     HVWStatusContentView *statusContentView = [[HVWStatusContentView alloc] init];
     self.statusContentView = statusContentView;
     [self.contentView addSubview:statusContentView];
 }

 /** 初始化工具条控件 */
 - (void) setupToolbar {
     HVWStatusToolbar *toolbar = [[HVWStatusToolbar alloc] init];
     self.toolbar = toolbar;
     [self.contentView addSubview:toolbar];
 }

 @end

 

（2）第二层

a.微博内容

 //
 //  HVWStatusContentView.h
 //  HVWWeibo
 //
 //  Created by hellovoidworld on 15/2/12.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import <UIKit/UIKit.h>

 @interface HVWStatusContentView : UIView

 @end

 

 //
 //  HVWStatusContentView.m
 //  HVWWeibo
 //
 //  Created by hellovoidworld on 15/2/12.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import "HVWStatusContentView.h"
 #import "HVWStatusOriginalView.h"
 #import "HVWStatusRetweetedView.h"

 @interface HVWStatusContentView()

 /** 原创内容 */
 @property(nonatomic, weak) HVWStatusOriginalView *originalView;

 /** 转发内容 */
 @property(nonatomic, weak) HVWStatusRetweetedView *retweetedView;

 @end

 @implementation HVWStatusContentView

 - (instancetype)initWithFrame:(CGRect)frame {
     self = [super initWithFrame:frame];

     if (self) { // 初始化子控件开始
         // 初始化原创内容控件
         [self setupOriginalView];

         // 初始化转发内容控件
         [self setupRetweetedView];
     }

     return self;
 }

 /** 初始化原创内容控件 */
 - (void) setupOriginalView {

 }

 /** 初始化转发内容控件 */
 - (void) setupRetweetedView {

 }

 @end

 

b.工具条

 //
 //  HVWStatusToolbar.h
 //  HVWWeibo
 //
 //  Created by hellovoidworld on 15/2/12.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import <UIKit/UIKit.h>

 @interface HVWStatusToolbar : UIView

 @end

 

 //
 //  HVWStatusToolbar.m
 //  HVWWeibo
 //
 //  Created by hellovoidworld on 15/2/12.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import "HVWStatusToolbar.h"

 @implementation HVWStatusToolbar

 /** 代码自定义初始化方法 */
 - (instancetype)initWithFrame:(CGRect)frame {
     self = [super initWithFrame:frame];

     if (self) {
         self.backgroundColor = [UIColor greenColor];
     }

     return self;
 }

 @end

 

（3）第3层

a.原创微博

 //
 //  HVWStatusOriginalView.h
 //  HVWWeibo
 //
 //  Created by hellovoidworld on 15/2/12.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import <UIKit/UIKit.h>

 @interface HVWStatusOriginalView : UIView

 @end

 

 //
 //  HVWStatusOriginalView.m
 //  HVWWeibo
 //
 //  Created by hellovoidworld on 15/2/12.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import "HVWStatusOriginalView.h"

 @interface HVWStatusOriginalView()

 /** 昵称 */
 @property(nonatomic, weak) UILabel *nameLabel;

 /** 头像 */
 @property(nonatomic, weak) UIImageView *iconView;

 /** 微博发表时间 */
 @property(nonatomic, weak) UILabel *timeLabel;

 /** 微博来源 */
 @property(nonatomic, weak) UILabel *sourceLabel;

 /** 微博文本内容 */
 @property(nonatomic, weak) UILabel *textLabel;

 @end

 @implementation HVWStatusOriginalView

 /** 代码初始化方法 */
 - (instancetype)initWithFrame:(CGRect)frame {
     self = [super initWithFrame:frame];

     if (self) { // 初始化子控件开始
         // 昵称
         UILabel *nameLabel = [[UILabel alloc] init];
         nameLabel.font = HVWStatusOriginalNameFont;
         self.nameLabel = nameLabel;
         [self addSubview:nameLabel];

         // 头像
         UIImageView *iconView = [[UIImageView alloc] init];
         self.iconView = iconView;
         [self addSubview:iconView];

         // 发表时间
         UILabel *timeLabel = [[UILabel alloc] init];
         self.timeLabel = timeLabel;
         [self addSubview:timeLabel];

         // 来源
         UILabel *sourceLabel = [[UILabel alloc] init];
         self.sourceLabel = sourceLabel;
         [self addSubview:sourceLabel];

         // 正文
         UILabel *textLabel = [[UILabel alloc] init];
         self.textLabel = textLabel;
         [self addSubview:textLabel];
     }

     return self;
 }

 @end

 

b.转发微博

 //
 //  HVWStatusRetweetedView.h
 //  HVWWeibo
 //
 //  Created by hellovoidworld on 15/2/12.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import <UIKit/UIKit.h>

 @interface HVWStatusRetweetedView : UIView

 @end

 

 //
 //  HVWStatusRetweetedView.m
 //  HVWWeibo
 //
 //  Created by hellovoidworld on 15/2/12.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import "HVWStatusRetweetedView.h"

 @interface HVWStatusRetweetedView()

 /** 昵称 */
 @property(nonatomic, weak) UILabel *nameLabel;

 /** 微博文本内容 */
 @property(nonatomic, weak) UILabel *textLabel;

 @end

 @implementation HVWStatusRetweetedView

 /** 代码初始化方法 */
 - (instancetype)initWithFrame:(CGRect)frame {
     self = [super initWithFrame:frame];

     if (self) { // 初始化子控件开始
         // 昵称
         UILabel *nameLabel = [[UILabel alloc] init];
         nameLabel.font = HVWStatusOriginalNameFont;
         self.nameLabel = nameLabel;
         [self addSubview:nameLabel];

         // 正文
         UILabel *textLabel = [[UILabel alloc] init];
         self.textLabel = textLabel;
         [self addSubview:textLabel];
     }

     return self;
 }

 @end