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

看看上面的图片,分析:

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

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

  1. iOS 新浪微博-5.0 首页微博列表

    首页显示微博列表,是微博的核心部分,这一章节,我们主要是显示出微博的列表. 导入第三方类库 pod 'SDWebImage', '~> 3.7.3' pod 'MJRefresh', '~> ...

  2. android仿微博头像_仿微博点击头像加载动画

    预览图 原理 整个效果分成两部分.一部分为弧度动画,一部分为点点动画 弧度动画就是画弧线,动画改变弧度就可以了 点点动画比较复杂.总共分为两步,1.计算非弧线的地方可以容纳的点点个数,然后画出来:2. ...

  3. uuid设置长度_转发 微博 Qzone 微信 分布式系统ID的生成方法之UUID、数据库、算法、Redis、Leaf方案...

    点击上方「蓝字」关注我们 前言 一般单机或者单数据库的项目可能规模比较小,适应的场景也比较有限,平台的访问量和业务量都较小,业务ID的生成方式比较原始但是够用,它并没有给这样的系统带来问题和瓶颈,所以 ...

  4. iOS新浪微博客户端开发(4)——自定义微博Cell的实现

    首先看一下效果图(不带转发微博和带转发微博):   一.微博Cell布局分析 微博Cell的详细布局如下图所示,其主要控件有:头像.昵称.微博时间.来源.微博正文.如果有被转发微博,还包括被转发微博的 ...

  5. JS实现仿新浪微博大厅和腾讯微博首页滚动效果_前端开发

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  6. 新浪微博客户端开发之授权登录+获取微博列表

    新浪微博客户端开发之授权登录+获取微博列表 闲篇: 最近实在是乱得不行,至于怎么乱我也不知该怎么说,那么久没发博客就证明了这点,一般如果小巫有做详尽的计划,并把时间投入到上面的话,我是可以用最短的时间 ...

  7. java怎么实现同步到微博功能_新浪微博信息站外同步的完整实现

    最近遇到一个项目,其中需要将用户的微博信息与自己的网站项目上同步,好在新浪微博是提供了API的,大概查阅了一下,信息同步需要调用的是 在关于授权机制说明中,新浪微博的API一共有两种验证机制,分别是: ...

  8. python爬取微博内容_请问该如何通过python调用新浪微博的API来爬取数据?

    1:安装python(这个不多说啦) 2:下载新浪微博SDK的python包,解压为weibopy目录 3:申请AppKey, 流程: 1:通过oAuth认证 按我的理解简化如下: 用户在新浪微博给的 ...

  9. scrapy 爬取新浪微博 的微博列表及微博内容

    代码地址:GitHub 参考:博客 通过scrapy框架爬取指定账号的信息和微博 截止到目前(2019年01月15日)的微博账号粉丝排名: 爬取方法:提取网页版的微博接口 1.重写start_requ ...

最新文章

  1. Lua中使用Sleep函数
  2. CentOS下用yum命令安装jdk
  3. JavaUtils - 文件操作
  4. char数组转string_String类和其它数据类型的相互转换
  5. ArcGIS 10——地理数据库管理GIS数据
  6. LeetCode--3. 无重复字符的最长子串(双指针)
  7. golang使用pprof检查goroutine泄露
  8. PostgreSQL高级扩展之IP4R
  9. 在线Cron表达生成器(定时任务时间控制)
  10. 4.jvm入门到精通
  11. 苹果台式机忘记开机密码怎么办
  12. Galaxy 平台下 LEfSe 安装与使用教程
  13. 动词ing基本用法_动词ing形式的用法
  14. WebAPIs-第01天笔记
  15. 抖音如何进行广告的投放
  16. CSS实现鼠标放上图片放大
  17. 详细说明如何实现简易轮播效果
  18. 关于游戏中仓库类的设计
  19. Xcelsius启动出现Problem Accessing Excel: Exiting问题的解决
  20. HTTPS Explained

热门文章

  1. Spring配置JDBC连接Orcale、MySql、sqlserver
  2. 数字签名、数字证书、对称加密算法、非对称加密算法、单向加密(散列算法)...
  3. UICollectionView自定义布局(二)
  4. 从0实现一个tinyredux
  5. POJ 3126 Prime Path(筛法,双向搜索)
  6. RDS for MySQL 5.7 备份恢复为本地实例
  7. 浅谈Django的中间件与Python的装饰器
  8. Flexbox Guide
  9. webpack源码分析之三:loader
  10. iptables小案例,nat表应用