iOS-跟着标哥微博&学习导航头像缩放

引言:今天就花半个小时的时间,学习一下标哥的导航头像缩放,小总结一下,若是侵了标哥的权,请见怪,及时提醒,本篇仅供学习。

就如标哥,微博所说,在很多App中,经常存在一种需求就是,界面上下滚动时用户头像也跟着变化,而用户头像是放在系统的导航条上的。也有很多人,尝试自定义View,但是标哥,说了,没有必要,直接用系统的便可。(虽然,我不太认识标哥,哈哈)。

  • 要学到的知识点:
    - 如何分析实现原理
    - 如何实现缩放效果
    - 如何将计算缩放系数
  • 跟着效果图一探究竟
    如图所示,要明白两点:
    一、是当往下滚动时,在一定范围内,会放大头像,但是不会放得过大;
    二、在往上滚动时,在一定范围内,会缩小头像,但是不会缩小得过小:
titleView放大缩小.gif

这说明了什么呢?头像的缩放和放大都是有上、下限的,而且,头像的起点y值始终不变。

  • 在啰嗦一下实现原理
    从效果图可以看出以下几点:
    1.向上移动头像会缩小,但是有下限
    2.向下移动头像会放大,但是有上限
    3.头像的起点y始终不变
    问题:
    1.如何缩放控件--->使用transform来实现。
    2.怎样做到每次都需要更新头像的y坐标,以保证y值不变。
    3.有上限、下限,应设置,最小缩放系数及最大缩放系数。
    解决:
    1.要设置最小/最大缩放系数,我们就需要计算出来,但是如何计算呢?其实挺简单的,我们只需要设置下拉或者上拉需要处理缩放的最大距离,就可以计算出来了。
    计算放大系数: MIN(1.5, 1 – offsetY / 300);
    计算缩小系数: MAX(0.45, 1 – offsetY / 300);
    [解析]:假设正常状态下用户头像的大小为70,当放大到最大时,不得超过105;当缩小到最小时,不得小于31.5.则这个最大倍数1.5就是我们期望用户头像可放大的最大值除以正常状态下的值,即105/70.0=1.5。同样,最小倍数0.45计算公式为:31.5 / 70.0 = 0.45.
    2.为了保证在缩放过程中,y坐标不变,那么就需要动态地更新y坐标,也就是在缩放时,将y坐标固定。

代码实现

  • 首先,我们给导航栏添加一个titlteView:
    UIView *titleView = [[UIView alloc] init];
    self.navigationItem.titleView = titleView;
    self.headerImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"head.jpg"]];
    self.headerImageView.layer.cornerRadius = 35;
    self.headerImageView.layer.masksToBounds = YES;
    self.headerImageView.frame = CGRectMake(0, 0, 70, 70);
    // 这一句话非常重要,保证用户头像水平居中
    self.headerImageView.center = CGPointMake(titleView.center.x, 0);
    [titleView addSubview:self.headerImageView];
  • [疑惑]:
    这里为什么不直接将headerImageView作为titleView呢?因为titleView会自动被系统给设置大小了,而我们的头像是固定大小的,可以可自由调整的,因此我们只能作为一个单独的控件放在titleView上。

接下来最关键的代码就是在滚动时处理缩放用户头像的了:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGFloat offsetY = scrollView.contentOffset.y + scrollView.contentInset.top;
CGFloat scale = 1.0;
// 放大
if (offsetY < 0) {
// 允许下拉放大的最大距离为300
// 1.5是放大的最大倍数,当达到最大时,大小为:1.5 * 70 = 105
// 这个值可以自由调整
scale = MIN(1.5, 1 - offsetY / 300);
} else if (offsetY > 0) { // 缩小
// 允许向上超过导航条缩小的最大距离为300
// 为了防止缩小过度,给一个最小值为0.45,其中0.45 = 31.5 / 70.0,表示
// 头像最小是31.5像素
scale = MAX(0.45, 1 - offsetY / 300);
}
self.headerImageView.transform = CGAffineTransformMakeScale(scale, scale);

   // 保证缩放后y坐标不变
   CGRect frame = self.headerImageView.frame;
   frame.origin.y = -self.headerImageView.layer.cornerRadius / 2;
  self.headerImageView.frame = frame;
  }

知识点扩展:

1.用Content Insets对窗口稍作调整
contentInset属性可以改变content offset的最大和最小值,这样便可以滚动出可滚动区域。它的类型为UIEdgeInsets,包含四个值:{top,left,bottom,right}。当你引进一个inset时,你改变了content offset的范围。比如,设置content inset顶部值为10,则允许content offset的y值达到10。

2.contentInset是scrollview的contentview的顶点相对于scrollview的位置,例如你的contentInset = (0 ,100),那么你的contentview就是从scrollview的(0 ,100)开始显示.

3.CGRectZero 是一个(0,0,0,0)的矩形常量。需要创建边框但还不确定边框大小和位置时,可以使用此常量。

结束语

终于,这个demo终于敲完了一遍,感谢标哥,最后自己简单的封装了一下,以后直接用就可以。

  • 用法:
    1.导入类 ZYScaleTitleView 到您的工程中
    2.在所需界面中,导入头文件 #import "ZYScaleTitleView.h"
    @property(strong,nonatomic)ZYScaleTitleView *ZYtitleView;
    3.在viewDidLoad中
    self.ZYtitleView = [[ZYScaleTitleView alloc]initWithTitleViewImageName:@"114"];
    self.navigationItem.titleView = self.ZYtitleView;
    4.在ViewDidScroll:中调去
    - (void)scrollViewDidScroll:(UIScrollView *)scrollView
    {
    [self.ZYtitleView ScaleTitleView:scrollView];
    }
  • 已于2016于8月3日更新一次

Demo地址:https://github.com/RenZhengYang/ZYScaleNavTitleView
如有不足,请指点,虚心学习,互相交流。欢迎点星,鼓励!!!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容