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"
  3.在viewDidLoad中
  self.navigationItem.titleView = [[ZYScaleTitleView shareScaleTitleView]
                                  initWithTitleViewImageName:@"114"];
  4.在ViewDidScroll:中调去
  - (void)scrollViewDidScroll:(UIScrollView *)scrollView
  {
       [[ZYScaleTitleView shareScaleTitleView] ScaleTitleView:scrollView];
  }

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