简书导航栏头像实现

今天看了一下简书的用户界面的导航栏上的头像，于是想了一下其实现过程。

大家可以到简书客户端上看一下个人界面，可以看到以下几点：
向上移动头像会缩小，但是有下限
向下移动头像会放大，但是有上限
头像的起点y始终不变

代码实现

首先，我们给导航条添加一个titleView：

UIView *titleView = [[UIView alloc] init];
self.navigationItem.titleView = titleView;
self.headerImageView = [[UIImageView alloc] init];
self.headerImageView.layer.cornerRadius = 30;
self.headerImageView.layer.masksToBounds = YES;
self.headerImageView.frame = CGRectMake(0, 0, 60, 60);
self.headerImageView.backgroundColor = [UIColor redColor];
// 保证用户头像水平居中
self.headerImageView.center = CGPointMake(titleView.center.x, 0);
[titleView addSubview:self.headerImageView];

接下来最关键的代码就是在滚动时处理缩放用户头像的了：
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGFloat offsetY = scrollView.contentOffset.y + scrollView.contentInset.top;
CGFloat scale = 1.0;
// 放大
if (offsetY < 0) {
scale = MIN(1.5, 1 - offsetY / 300);
} else if (offsetY > 0) {
// 缩小
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;
}

哈，就是如此简单，大家可以自己动手去试一下