iOS 新浪微博-5.2 首页微博列表_转发微博/工具栏

继续于上一篇，还是做首页的功能，这一篇把剩下的首页继续完善。

看看上面的图片，分析：

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;
}

间隔设置

效果：

思路：

1. 给每个tableCell都增加10个内距，使整个Cell都往下移10个像素
2. 设置TableViewController 的背景颜色为间隔颜色
3. 在tableCell中，清除背景颜色
4. 设置原创微博的背景为白色 

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;

首页整体效果：

章节源代码下载：http://pan.baidu.com/s/1gdqEKkr

新浪微博Github：https://github.com/jiangys/Weibo