网易新闻顶部效果
来源:互联网 发布:mac office 2016 卸载 编辑:程序博客网 时间:2024/05/21 10:27
没想到有一天我竟然真的进入了我梦寐以求的网易,虽然只是个实习生~
也没想到第一个正式的任务就是做个网易新闻顶部的效果。因为之前有好多面试官都问过我类似的问题,要么就是问网易新闻顶部的这个效果,要么就是问知乎日报顶部的那个效果,没想到现在我还真要做这个了
说了半天废话,到底是啥效果?(下个iOS版的网易新闻不就知道了。。。)(和安卓版的不一样)
我做的效果如下图:
刚开始感觉好难。几乎没什么思路。后来冷静思考了下,先是想修改下边那个tableView的contentOffset,后来又想改tableView的contentSize,还想过把上面的view和下面的tableView拼接到一起,还想过修改上面的view的contentOffset。。。。。。
但是后来我发现这些想法都是错误的。。。(天,这就是我冷静思考后的结果么。。。)
最后想到,其实只要修改上面的view的frame和下面的tableView的frame就可以了。
那么怎么做呢?
利用KVO监听。
static NSString *const kContentOffset = @"contentOffset";- (void)viewWillAppear:(BOOL)animated { [super viewWillAppear:animated]; [self.tableView addObserver:self forKeyPath:kContentOffset options:0 context:nil];}- (void)viewWillDisappear:(BOOL)animated { [super viewWillDisappear:animated]; [self.tableView removeObserver:self forKeyPath:kContentOffset];}
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context { if ([keyPath isEqualToString:kContentOffset]) { // 监听的是contentOffset的变化 [self.tableView removeObserver:self forKeyPath:kContentOffset]; // 这里需要先移除监听,否则会导致死循环 CGFloat newY = self.tableView.contentOffset.y; // 获取划动的contentOffset的y值 CGFloat topY = CGRectGetHeight(self.topView.frame); // topView的高度 if (newY <= 0) { // topView在底部,此时只有tableView动 self.tableView.frame = CGRectMake(0, topY, ScreenWidth, ScreenHeight-topY); } else if (newY > 0 && newY < topY-64) { // topView在中间,两者都动 self.tableView.frame = CGRectMake(0, topY-newY, ScreenWidth, ScreenHeight-(topY-newY)); self.topView.frame = CGRectMake(0, -newY, ScreenWidth, topY); } else if (newY >= topY-64) { // topView在顶部,此时只有tableView动 self.tableView.frame = CGRectMake(0, 64, ScreenWidth, ScreenHeight-64); } [self.tableView addObserver:self forKeyPath:kContentOffset options:0 context:nil]; // 结束后再添加监听 }}
其实只需要分成三种情况来考虑就可以了。即:topView在顶部、topView在中间、topView在底部。
注意:一开始的时候需要先移除监听,否则会导致死循环,之后再添加监听即可。
然后是关于topView的部分。怎么让topView中的控件逐渐变透明,并且在划动到一定程度后消失,同时产生一个新的名字label呢?
刚开始的时候我的想法是通过layoutSubviews方法来修改。但是通过这个栗子我发现原来并不是frame变了就会调用layoutSubviews,而是frame的size变了才会调用它。在这个栗子中,我们修改的是frame.origin.y,并没有修改frame的size,topView的宽和高始终没有发生过变化,只不过它的y值在动态的改变而已。所以通过layoutSubviews 的方法不可行。
那怎么做呢?
还是监听。只不过刚才我们监听的是tableView的contentOffset,而现在我们需要监听的是topView的frame。
static NSString *const kFrame = @"frame";[self addObserver:self forKeyPath:kFrame options:0 context:nil];在topView中自己监听自己的frame的变化,然后动态修改自己的控件的alpha属性。
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context { if ([keyPath isEqualToString:kFrame]) { CGFloat originY = -self.frame.origin.y; CGFloat alpha = originY / ((CGRectGetHeight(self.frame)-64)/2); self.avatar.alpha = 1 - alpha; if (alpha >= 1.0) { // 原本的控件逐渐变透明 self.nameLabel.center = CGPointMake(ScreenWidth/2, CGRectGetHeight(self.frame)-CGRectGetHeight(self.nameLabel.frame)/2-10); self.nameLabel.alpha = alpha - 1; } else { // 原本的控件已经完全透明了,产生一个新的(其实用的还是旧的控件,只不过把frame改了) self.nameLabel.center = CGPointMake(ScreenWidth/2, CGRectGetMaxY(self.avatar.frame)+20); self.nameLabel.alpha = 1 - alpha; } }}
- 网易新闻顶部效果
- 仿网易新闻顶部滑动条效果
- 高仿网易新闻顶部滑动条效果
- 高仿网易新闻顶部滑动条效果
- Android高仿网易新闻顶部滑动条效果
- 高仿网易新闻顶部滑动条效果 (源码)
- 高仿网易新闻顶部滑动条效果
- 仿网易新闻顶部 图片的indicator
- Android仿网易新闻顶部滚动菜单
- 仿网易新闻的顶部导航指示器
- 顶部滚动菜单类似网易新闻首页
- 仿网易新闻页面效果
- 控制器切换(网易新闻效果)
- 防网易新闻频道右侧新闻滚动效果
- 模仿网易新闻图片点击放大效果
- tabhost模仿网易新闻奥运版效果
- 仿网易新闻效果源码分析
- (转)仿网易新闻效果源码分析
- AOP切面编程 的切面类
- jquery中attr和prop的区别
- 使用Jquery的Ajax异步提交有二进制数据的表单实现方案
- Android实现简单的计算器
- windows下利用sniffer进行抓包改包,以arp攻击
- 网易新闻顶部效果
- Signal ()函数详细介绍 Linux函数
- Django配置有邮件发送错误信息
- 学习《Statistical Learning》笔记
- CSS样式表的基本形式
- wcm集成<一>
- Lucene 源码分析之Field
- Android Studio项目整合PullToRefresh的问题记录
- 编译语言、解释语言与脚本语言之间的区别