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; }
间隔设置
效果:
思路:
- 给每个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;
首页整体效果:
章节源代码下载:http://pan.baidu.com/s/1gdqEKkr
新浪微博Github:https://github.com/jiangys/Weibo
iOS 新浪微博-5.2 首页微博列表_转发微博/工具栏相关推荐
- iOS 新浪微博-5.0 首页微博列表
首页显示微博列表,是微博的核心部分,这一章节,我们主要是显示出微博的列表. 导入第三方类库 pod 'SDWebImage', '~> 3.7.3' pod 'MJRefresh', '~> ...
- android仿微博头像_仿微博点击头像加载动画
预览图 原理 整个效果分成两部分.一部分为弧度动画,一部分为点点动画 弧度动画就是画弧线,动画改变弧度就可以了 点点动画比较复杂.总共分为两步,1.计算非弧线的地方可以容纳的点点个数,然后画出来:2. ...
- uuid设置长度_转发 微博 Qzone 微信 分布式系统ID的生成方法之UUID、数据库、算法、Redis、Leaf方案...
点击上方「蓝字」关注我们 前言 一般单机或者单数据库的项目可能规模比较小,适应的场景也比较有限,平台的访问量和业务量都较小,业务ID的生成方式比较原始但是够用,它并没有给这样的系统带来问题和瓶颈,所以 ...
- iOS新浪微博客户端开发(4)——自定义微博Cell的实现
首先看一下效果图(不带转发微博和带转发微博): 一.微博Cell布局分析 微博Cell的详细布局如下图所示,其主要控件有:头像.昵称.微博时间.来源.微博正文.如果有被转发微博,还包括被转发微博的 ...
- JS实现仿新浪微博大厅和腾讯微博首页滚动效果_前端开发
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 新浪微博客户端开发之授权登录+获取微博列表
新浪微博客户端开发之授权登录+获取微博列表 闲篇: 最近实在是乱得不行,至于怎么乱我也不知该怎么说,那么久没发博客就证明了这点,一般如果小巫有做详尽的计划,并把时间投入到上面的话,我是可以用最短的时间 ...
- java怎么实现同步到微博功能_新浪微博信息站外同步的完整实现
最近遇到一个项目,其中需要将用户的微博信息与自己的网站项目上同步,好在新浪微博是提供了API的,大概查阅了一下,信息同步需要调用的是 在关于授权机制说明中,新浪微博的API一共有两种验证机制,分别是: ...
- python爬取微博内容_请问该如何通过python调用新浪微博的API来爬取数据?
1:安装python(这个不多说啦) 2:下载新浪微博SDK的python包,解压为weibopy目录 3:申请AppKey, 流程: 1:通过oAuth认证 按我的理解简化如下: 用户在新浪微博给的 ...
- scrapy 爬取新浪微博 的微博列表及微博内容
代码地址:GitHub 参考:博客 通过scrapy框架爬取指定账号的信息和微博 截止到目前(2019年01月15日)的微博账号粉丝排名: 爬取方法:提取网页版的微博接口 1.重写start_requ ...
最新文章
- Lua中使用Sleep函数
- CentOS下用yum命令安装jdk
- JavaUtils - 文件操作
- char数组转string_String类和其它数据类型的相互转换
- ArcGIS 10——地理数据库管理GIS数据
- LeetCode--3. 无重复字符的最长子串(双指针)
- golang使用pprof检查goroutine泄露
- PostgreSQL高级扩展之IP4R
- 在线Cron表达生成器(定时任务时间控制)
- 4.jvm入门到精通
- 苹果台式机忘记开机密码怎么办
- Galaxy 平台下 LEfSe 安装与使用教程
- 动词ing基本用法_动词ing形式的用法
- WebAPIs-第01天笔记
- 抖音如何进行广告的投放
- CSS实现鼠标放上图片放大
- 详细说明如何实现简易轮播效果
- 关于游戏中仓库类的设计
- Xcelsius启动出现Problem Accessing Excel: Exiting问题的解决
- HTTPS Explained