引言：一直觉得简书的导航栏头像的缩放效果很好玩，于是找了一些资料，实现了一下，感谢MJ大神和标哥的无私分享。经验和脑洞大开才是开发人员该有的......
效果如下：
下拉放大.gif
导航头像缩放.gif
一、图片的下拉放大
- 1.分析
如果将图片放到UITableView的HeadView中，效果并不好，下拉的时候，会随着UITableView的滑动而滑动，需要实时改变HeadView的大小，显然这不是我们要费心思的事情。 - 2.结论
将图片添加到UITableView上，然后设置UITableView的contentInset的值，使UITableView初始的时候就向下移动一定距离，以便显示图片。
代码很简单，实现如下：
#import "ZBPulllistViewController.h"
#define k_imageViewHeight [UIScreen mainScreen].bounds.size.width
const CGFloat NavHeight = 64;
@interface ZBPulllistViewController (){
UIImageView *_headImgeView;
}
@end
@implementation ZBPulllistViewController
- (void)viewDidLoad {
[super viewDidLoad];
//设置tableView的内边距
self.tableView.contentInset = UIEdgeInsetsMake(k_imageViewHeight * 0.5 - NavHeight, 0, 0, 0);
//初始化顶部图片
if (_headImgeView == nil) {
_headImgeView = [[UIImageView alloc] initWithFrame:CGRectMake(0, - k_imageViewHeight, k_imageViewHeight, k_imageViewHeight)];
_headImgeView.image = [UIImage imageNamed:@"神同步.JPG"];
//设置图片的填充方式
_headImgeView.contentMode = UIViewContentModeScaleAspectFill;
//添加图片到tableView顶部(直接addSubView，当下拉的时候会覆盖cell)
[self.tableView insertSubview:_headImgeView atIndex:0];
}
}
#pragma mark - Table view data source
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return 10;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"listCell"];
return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
return 50;
}
#pragma mark - UIScrollView代理方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
//计算往下拖拽的高度
CGFloat down = -(k_imageViewHeight * 0.5) - scrollView.contentOffset.y;
//小于0直接返回
if(down < 0) return;
CGRect frame = _headImgeView.frame;
frame.size.height = k_imageViewHeight + down * 1;
_headImgeView.frame = frame;
}
@end
需要注意的是：
1、[self.tableView insertSubview:_headImgeView atIndex:0];将图片插入到TableView的后面，不然在下拉的时候cell会被遮挡。
2、当下拉的时候ScrollView的contentOffset y值为负数。
二、类似简书导航栏头像的缩放
- 1.分析
需要将图片添加到导航栏上，可以自定义图片View，也可以利用导航栏的TitleView。 - 2.结论
由于个人比较喜欢自定义，所以......(纯属瞎搞...)
和图片的下拉放大效果实现几乎一样，唯一不同的是这里需要用到CGAffineTransformMakeScale去缩放图片。
代码实现如下：
#import "ZBScaleIconViewController.h"
#define k_iconHeight 88
@interface ZBScaleIconViewController (){
UIImageView *_iconImageView;
}
@end
@implementation ZBScaleIconViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.navigationController.title = nil;
if (_iconImageView == nil) {
_iconImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, k_iconHeight, k_iconHeight)];
_iconImageView.center = CGPointMake([UIScreen mainScreen].bounds.size.width * 0.5, self.navigationController.navigationBar.frame.size.height);
_iconImageView.image = [UIImage imageNamed:@"神同步.JPG"];
CGFloat corner = 5;
_iconImageView.layer.cornerRadius = corner;
_iconImageView.layer.masksToBounds = YES;
self.tableView.contentInset = UIEdgeInsetsMake(k_iconHeight, 0, 0, 0);
[self.navigationController.navigationBar addSubview:_iconImageView];
}
}
#pragma mark - Table view data source
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return 20;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"iconList"];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"iconList"];
}
return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
return 50;
}
#pragma mark - UIScrollView代理方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
//计算往下拖拽的高度
CGFloat down = scrollView.contentOffset.y + scrollView.contentInset.top;
CGFloat scale = 1.0;
// 放大
if (down < 0) {
scale = MIN(1.0, 1 - down / k_iconHeight);
} else if (down > 0) { // 缩小
scale = MAX(0.45, 1 - down / k_iconHeight);
}
_iconImageView.transform = CGAffineTransformMakeScale(scale, scale);
// 保证缩放后y坐标不变
CGRect frame = _iconImageView.frame;
frame.origin.y = -_iconImageView.layer.cornerRadius / 2;
_iconImageView.frame = frame;
}
@end
需要注意的是：
1、自定义图片缩放的最大与最小缩放系数（根据自己的需求定义),也就是放大的限值和缩小的限值。这里我根据简书的效果，定义的初始值就是图片原大小，最大限值也是图片原大小，缩小的限值为试验出来的结果，由于没有审美细胞，就依个人喜好设置了。
2、首次实现过程中，我还是利用了改变图片宽高的方法，并在改变的过程中，平移图片，虽然能够实现目的，但是代码繁琐并且存在bug，当scrollView滚动过快的时候，图片不是平滑缩放，而是出现卡顿的现象，这和scrollView滚动的数值有关，过快的时候数值并不是连续的，而是跳跃的。
再次感谢MJ大神以及标哥，标哥的博客介绍的很详细，我就不多啰嗦了，注意点同学们注意一下就好了。
查看标哥博客请点击“偶”
