看看上面的图片,分析:
1.转发微博里面的内容,和原创微博是一样的,由文字+配图组成。这应该放在一个UIView里处理。
2.工具栏也当成一个整体UIView,里面放上三个按钮
通过分析,我们可以得到,一个单元cell,是由 原创微博、转发微博、工具栏三个部分组成,由于转发微博可能没有,配图也不确定,因为都需要对每个元素的Frame进行计算。
转发微博
转发微博和原创微博是一样的。定义好属性,计算好尺寸即可。
Status.h 增加转发微博属性
/** 被转发的原微博信息字段,当该微博为转发微博时返回 */
@property (nonatomic, strong) Status *retweeted_status;
StatusFrame.h 增加转发微博位置及尺寸
/** 转发微博整体 */
@property (nonatomic, assign) CGRect retweetViewF;
/** 转发微博正文 + 昵称 */
@property (nonatomic, assign) CGRect retweetContentLabelF;
/** 转发配图 */
@property (nonatomic, assign) CGRect retweetPhotosViewF;
StatusFrame.m 中,计算转发微博的尺寸
CGFloat toolbarY = 0;
/* 被转发微博 */
if (status.retweeted_status) {
Status *retweeted_status = status.retweeted_status;
User *retweeted_status_user = retweeted_status.user;
/** 被转发微博正文 */
CGFloat retweetContentX = StatusCellBorderW;
CGFloat retweetContentY = StatusCellBorderW;
NSString *retweetContent = [NSString stringWithFormat:@"@%@ : %@", retweeted_status_user.name, retweeted_status.text];
CGSize retweetContentSize = [retweetContent textSizeWithFont:StatusCellRetweetContentFont maxW:maxW];
self.retweetContentLabelF = (CGRect){{retweetContentX, retweetContentY}, retweetContentSize};
/** 被转发微博配图 */
CGFloat retweetH = 0;
if (retweeted_status.pic_urls.count) { // 转发微博有配图
CGFloat retweetPhotosX = retweetContentX;
CGFloat retweetPhotosY = CGRectGetMaxY(self.retweetContentLabelF) + StatusCellBorderW;
CGSize retweetPhotosSize = [StatusPhotosView sizeWithCount:retweeted_status.pic_urls.count];
self.retweetPhotosViewF = (CGRect){{retweetPhotosX, retweetPhotosY}, retweetPhotosSize};
retweetH = CGRectGetMaxY(self.retweetPhotosViewF) + StatusCellBorderW;
} else { // 转发微博没有配图
retweetH = CGRectGetMaxY(self.retweetContentLabelF) + StatusCellBorderW;
}
/** 被转发微博整体 */
CGFloat retweetX = 0;
CGFloat retweetY = CGRectGetMaxY(self.originalViewF);
CGFloat retweetW = cellW;
self.retweetViewF = CGRectMake(retweetX, retweetY, retweetW, retweetH);
toolbarY = CGRectGetMaxY(self.retweetViewF);
} else {
toolbarY = CGRectGetMaxY(self.originalViewF);
}
那么,在StatusCell里增加就很简单了,在initWithStyle 中增加相应的控件,并在 setStatusFrame 设置值
/**
* 初始化转发微博
*/
- (void)setupRetweet
{
/** 转发微博主体*/
UIView *retweetView = [[UIView alloc] init];
retweetView.backgroundColor = YSColor(247, 247, 247);
[self.contentView addSubview:retweetView];
self.retweetView = retweetView;
/** 转发微博正文 + 昵称 */
UILabel *retweetContentLabel = [[UILabel alloc] init];
retweetContentLabel.numberOfLines = 0;
retweetContentLabel.font = StatusCellRetweetContentFont;
[retweetView addSubview:retweetContentLabel];
self.retweetContentLabel = retweetContentLabel;
/** 转发配图 */
StatusPhotosView *retweetPhotosView = [[StatusPhotosView alloc] init];
[retweetView addSubview:retweetPhotosView];
self.retweetPhotosView = retweetPhotosView;
}
setStatusFrame设置值
// 被转发微博
if(status.retweeted_status){
Status *retweeted_status = status.retweeted_status;
User *retweeted_status_user = retweeted_status.user;
self.retweetView.hidden = NO;
self.retweetView.hidden = NO;
/** 被转发的微博整体 */
self.retweetView.frame = statusFrame.retweetViewF;
/** 被转发的微博正文 */
NSString *retweetContent = [NSString stringWithFormat:@"@%@ : %@", retweeted_status_user.name, retweeted_status.text];
self.retweetContentLabel.text = retweetContent;
self.retweetContentLabel.frame = statusFrame.retweetContentLabelF;
/** 被转发的微博配图 */
if (retweeted_status.pic_urls.count) {
self.retweetPhotosView.frame = statusFrame.retweetPhotosViewF;
self.retweetPhotosView.photos = retweeted_status.pic_urls;
self.retweetPhotosView.hidden = NO;
} else {
self.retweetPhotosView.hidden = YES;
}
} else{
self.retweetView.hidden = YES;
}
运行过,就可以看到结果。
工具栏
工具栏的增加和转发微博是一致的。相应的属性还是要增加的,只是,我们自定义一个UIView 为 StatusToolbar ,在StatusCell里,直接初始化这个View即可。
StatusToolbar.h
#import <UIKit/UIKit.h>
@class Status;
@interface StatusToolbar : UIView
+ (instancetype)toolbar;
@property(nonatomic,strong) Status *status;
@end
StatusToolbar.m
//
// StatusToolbar.m
// Weibo
//
// Created by Apple on 15/11/14.
// Copyright © 2015年 Jiangys. All rights reserved.
//
#import "StatusToolbar.h"
@interface StatusToolbar()
/** 存放所有的按钮 */
@property(nonatomic,strong) NSMutableArray *btns;
/** 分割线 */
@property(nonatomic,strong) NSMutableArray *dividers;
@property (nonatomic, weak) UIButton *repostBtn;
@property (nonatomic, weak) UIButton *commentBtn;
@property (nonatomic, weak) UIButton *attitudeBtn;
@end
@implementation StatusToolbar
- (NSMutableArray *)btns
{
if (!_btns) {
self.btns = [NSMutableArray array];
}
return _btns;
}
- (NSMutableArray *)dividers
{
if (!_dividers) {
self.dividers = [NSMutableArray array];
}
return _dividers;
}
+ (instancetype)toolbar
{
return [[self alloc]init];
}
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// 添加按钮
self.repostBtn = [self setupBtn:@"转发" icon:@"timeline_icon_retweet"];
self.commentBtn = [self setupBtn:@"评论" icon:@"timeline_icon_comment"];
self.attitudeBtn = [self setupBtn:@"赞" icon:@"timeline_icon_unlike"];
// 添加分割线
[self setupDivider];
[self setupDivider];
}
return self;
}
/**
* 在这个方法里设置尺寸
*/
- (void)layoutSubviews
{
[super layoutSubviews];
NSUInteger btnCount = self.btns.count;
CGFloat btnW = self.width / btnCount;
CGFloat btnH = self.height;
for (int i = 0; i < btnCount; i++) {
UIButton *btn = self.btns[i];
btn.y = 0;
btn.width = btnW;
btn.height = btnH;
btn.x = i * btnW;
}
NSUInteger dividerCount = self.dividers.count;
for (int i = 0; i < dividerCount; i++) {
UIImageView *divider = self.dividers[i];
divider.y = 0;
divider.x = (i + 1) *btnW;
divider.height = btnH;
divider.width = 1;
}
}
/**
* 初始化一个按钮
*
* @param title 按钮文字
* @param icon 按钮图标
*
* @return 返回按钮
*/
- (UIButton *)setupBtn:(NSString *)title icon:(NSString *)icon
{
UIButton *btn=[[UIButton alloc] init];
[btn setImage:[UIImage imageNamed:icon] forState:UIControlStateNormal];
btn.titleEdgeInsets = UIEdgeInsetsMake(0, 5, 0, 0);
[btn setTitle:title forState:UIControlStateNormal];
[btn setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
[btn setBackgroundImage:[UIImage imageNamed:@"timeline_card_bottom_background_highlighted"] forState:UIControlStateNormal];
btn.titleLabel.font = [UIFont systemFontOfSize:13];
[self addSubview:btn];
// 存放按钮
[self.btns addObject:btn];
return btn;
}
/**
* 初始化分割线
*/
- (void)setupDivider
{
UIImageView *divider = [[UIImageView alloc] init];
divider.image = [UIImage imageNamed:@"timeline_card_bottom_line"];
[self addSubview:divider];
[self.dividers addObject:divider];
}
-(void)setStatus:(Status *)status
{
}
@end
在StatusFrame里,直接设置尺寸
CGFloat toolbarX = 0;
CGFloat toolbarW = cellW;
CGFloat toolbarH = 35;
_toolbarViewF = CGRectMake(toolbarX, toolbarY, toolbarW, toolbarH);
StatusCell里,使用就很简单了
/**
* 初始化工具条
*/
- (void)setupToolbar
{
StatusToolbar *toolbar = [StatusToolbar toolbar];
[self.contentView addSubview:toolbar];
self.toolbar = toolbar;
}
间隔设置
效果:
思路:
- 给每个tableCell都增加10个内距,使整个Cell都往下移10个像素
- 设置TableViewController 的背景颜色为间隔颜色
- 在tableCell中,清除背景颜色
- 设置原创微博的背景为白色
1.在原创微博上,增加10个像素
/** 原创微博整体 */
CGFloat originalX = 0;
CGFloat originalY = StatusCellMargin;
CGFloat originalW = cellW;
_originalViewF = CGRectMake(originalX, originalY, originalW, originalH);
2.设置TableViewController 的背景颜色为间隔颜色
ViewDidLoad 中增加
self.tableView.backgroundColor = YSColor(211, 211, 211);
3.在tableCell中,清除背景颜色
StatusCell -->initWithStyle 中,增加
self.backgroundColor = [UIColor clearColor];
// 点击cell的时候不要变色
self.selectionStyle = UITableViewCellSelectionStyleNone;
4.设置原创微博的背景为白色
StatusCell -->setupOriginal
/** 原创微博整体 */
UIView *originalView = [[UIView alloc] init];
originalView.backgroundColor = [UIColor whiteColor];
[self.contentView addSubview:originalView];
self.originalView = originalView;
首页整体效果: