简单的代码实现的炫酷navigationbar
动图
技术原理:
当你下拉scrollview的时候,会监听scrollview的contentOffset来调整头部背景图片的位置,通过CGAffineTransformMakeTranslation和CGAffineTransformScale实现头像的缩小。
具体代码实现:
-(void)willMoveToSuperview:(UIView *)newSuperview
{
[self.scrollView addObserver:self forKeyPath:@"contentOffset" options:(NSKeyValueObservingOptionNew) context:Nil];
self.scrollView.contentInset = UIEdgeInsetsMake(self.frame.size.height, ,, );
self.scrollView.scrollIndicatorInsets = self.scrollView.contentInset;
} -(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
{
CGPoint newOffset = [change[@"new"] CGPointValue];
[self updateSubViewsWithScrollOffset:newOffset];
} -(void)updateSubViewsWithScrollOffset:(CGPoint)newOffset
{ float destinaOffset = -;
float startChangeOffset = -self.scrollView.contentInset.top;
newOffset = CGPointMake(newOffset.x, newOffset.y<startChangeOffset?startChangeOffset:(newOffset.y>destinaOffset?destinaOffset:newOffset.y)); float subviewOffset = self.frame.size.height-;
float newY = -newOffset.y-self.scrollView.contentInset.top;
float d = destinaOffset-startChangeOffset;
float alpha = -(newOffset.y-startChangeOffset)/d;
float imageReduce = -(newOffset.y-startChangeOffset)/(d*);
self.subTitleLabel.alpha = alpha;
self.titleLabel.alpha = alpha;
self.frame = CGRectMake(, newY, self.frame.size.width, self.frame.size.height);
self.backImageView.frame = CGRectMake(, -0.5*self.frame.size.height+(1.5*self.frame.size.height-)*(-alpha), self.backImageView.frame.size.width, self.backImageView.frame.size.height); CGAffineTransform t = CGAffineTransformMakeTranslation(,(subviewOffset-0.35*self.frame.size.height)*(-alpha));
_headerImageView.transform = CGAffineTransformScale(t,
imageReduce, imageReduce); self.titleLabel.frame = CGRectMake(, 0.6*self.frame.size.height+(subviewOffset-0.45*self.frame.size.height)*(-alpha), self.frame.size.width, self.frame.size.height*0.2);
self.subTitleLabel.frame = CGRectMake(, 0.75*self.frame.size.height+(subviewOffset-0.45*self.frame.size.height)*(-alpha), self.frame.size.width, self.frame.size.height*0.1);
}
Demo分享:
GitHub:https://github.com/ianisme/CoolNavi
简单的代码实现的炫酷navigationbar的更多相关文章
- 【Android珍藏】推荐10个炫酷的开源库【转】
感谢大佬:https://www.jianshu.com/p/d608f0228fd4 前言 技术群里面经常有人问到一些炫酷的UI效果实现方法,有时候我都是给一个相同或者相似效果的Github链接,有 ...
- 简单CSS3实现炫酷读者墙
如题,给大家介绍和讲解几个常用的CSS3属性,并用到实处. 先看demo(请使用Chrome或者Firefox浏览,IE的靠边): 点此查看实例 觉得爽的可以继续阅读下面的知识点,感觉不爽的可绕行. ...
- 炫酷:一句代码实现标题栏、导航栏滑动隐藏。ByeBurger库的使用和实现
本文已授权微信公众号:鸿洋(hongyangAndroid)原创首发. 其实上周五的时候已经发过一篇文章.基本实现了底部导航栏隐藏的效果.但是使用起来可能不是很实用.因为之前我实现的方式是继承了系统的 ...
- Android高级控件(四)——VideoView 实现引导页播放视频欢迎效果,超级简单却十分的炫酷
Android高级控件(四)--VideoView 实现引导页播放视频欢迎效果,超级简单却十分的炫酷 是不是感觉QQ空间什么的每次新版本更新那炫炫的引导页就特别的激动,哈哈,其实他实现起来真的很简单很 ...
- 一款超级炫酷的编辑代码的插件 Power Mode
今天偶尔发现了一款比较炫酷的插件,想让你们看看效果 打代码的时候会有非常炫酷的效果哟 因为我用的编辑器是VScode,所以我也只搞了搞VSCode中使用Power Mode的方法,如果你用的是别的编辑 ...
- iOS任何界面全屏炫酷倒计时,一句代码就够了
概述 iOS全屏炫酷倒计时,任何界面只需要调用一句代码就能实现,支持定制倒计时数字.倒计时结束时显示的文本.支持倒计时播放图片.开始倒计时和结束倒计时的block和delegate回调.支持定制文本颜 ...
- WebGIS简单实现一个区域炫酷的3D立体地图效果
1.别人的效果 作为一个GIS专业的,做一个高大上的GIS系统一直是我的梦想,虽然至今为止还没有做出一个理想中的系统,但是偶尔看看别人做的,学习下别人的技术还是很有必要的.眼睛是最容易误导我们的,有时 ...
- 炫酷实用的CSS3代码垂直手风琴菜单
今天在微博上看到别人分享的代码,自己拿来自己保存着. 代码效果如下: 下面是源码: index.html <!DOCTYPE html> <html > <head> ...
- Sublime Text2 新建文件快速生成Html头部信息和炫酷的代码补全
预备:安装emmet插件(previously known as Zen Coding) 方法一 package control法: 上一篇博客已经介绍了如何安装package control.打开 ...
随机推荐
- 编程思想—控制反转(IOC)及依赖注入(DI)
1.什么是依赖注入 在面向对象的编程语言中,一个对象的行为方法往往需要外界的对象的行为协助才能完成. 例如:小李去ATM机取钱,那小李的取钱的整个行为的完成需要ATM实例取款行为的协助才能完成. pu ...
- 常见排序算法(JS版)
常见排序算法(JS版)包括: 内置排序,冒泡排序,选择排序,插入排序,希尔排序,快速排序(递归 & 堆栈),归并排序,堆排序,以及分析每种排序算法的执行时间. index.html <! ...
- matlab常用小函数(一)
(第1维为对每一列操作,第2维维对每一行操作) sum 求和操作 max 求最大值操作 sum:求和操作 sum(A):矩阵A按列向求和(每一列求和),结果为一个行向量 sum(A,2):矩阵A按行向 ...
- jQuery.Deferred对象
一.前言 jQuery1.5之前,如果需要多次Ajax操作,我们一般会使用下面的两种方式: 1).串行调用Ajax $.ajax({ success: function() { $.ajax({ su ...
- AndroidStudio 更新gradle Error:Failed to complete Gradle execution. Cause: Connection reset
Android Studio 报错:Error:Failed to complete Gradle execution. Cause: Connection reset.把最新可以运行的项目中g ...
- hdu 1576 A/B 拓展欧几里得算法
A/B Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- [BZOJ 2186] [Sdoi2008] 沙拉公主的困惑 【欧拉函数】
题目链接:BZOJ - 2186 题目分析 题目要求出 [1, n!] 中有多少数与 m! 互质.(m <= n) 那么在 [1, m!] 中有 phi(m!) 个数与 m! 互质,如果一个数 ...
- Unity3D 命令行参数
Unity3D 命令行参数 @by 广州小龙 unity ios开发群:63438968 Typically, ...
- eclipse设置字体大小
eclipse是我们常用的开发工具.eclipse中的默认字体往往并不满足我们的需要,我经常要调节一下它的大小或者换一下风格.eclipse中的字体大小怎么改变呢? 工具/原料 eclipse 方法/ ...
- bzoj1334
..] of boolean; a:..] of longint; i,n,s,j,ans:longint; procedure sort(l,r: longint); var i ...