---

前言：对于每天逛【简书】的伙伴应该会发现，简书App的UI比较清爽、舒服。个人比较喜欢，这也是本人从CSDN的入门到现在的放弃(虽然自我感觉仍然在入门~)的原因。在看到【简书】个人中心板块的资料界面有头像的缩放功能，之前在其他App上也看到这样的效果。处于好奇想自己动手实现一下（Demo地址, swift版本后提交），自我学习_^-^

---

效果展示~其余请忽视

---

实现思路

• 自定义控件内部添加UIImageView控件
• 检测外部控件滚动试图的偏移量contentOffset进行缩放比例计算并控制
• 设置图片事件代理, 处理点击事件
• 将创建的视图添加到navigationBar上面（当然也可以添加到titleView， titleView的位置是由导航栏决定的，所以不能完全把控）,这里考虑到可以自定义其他位置，所以添加到navigationBar
• 封装控件提供自定义参数

---

1. 实现UIScrollViewDelegate代理的scrollViewDidScroll方法将scrollView视图传递给自定义视图的zoomWithScroll方法获取偏移量contentOffset

// 传递scrollView
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    [_zoomView zoomWithScrollView:scrollView];
}

2. 通过contentOffset偏移量计算缩放比例scale

/**
 根据偏移量计算缩放比例

 @param scrollView 滚动视图
 */
- (void)zoomWithScrollView:(UIScrollView *)scrollView {
    // 获取偏移量
    CGFloat offsetY = scrollView.contentOffset.y + scrollView.contentInset.top;
    // 缩放比例
    CGFloat scale = 1.0;
    // 变化基数
    CGFloat changeHeight = _scaleRate * self.frame.size.height;
    if(offsetY > 0) {   // 偏移量为正, 上拉缩小
        scale = MAX(_minScale, 1-offsetY/changeHeight);
    }else {  // 偏移量为负, 下拉放大
        scale = MIN(_maxScale, 1-offsetY/changeHeight);
    }
    // 形变变化
    _imageView.transform = CGAffineTransformMakeScale(scale, scale);
    // 固定顶部坐标, 保持不变
    CGRect frame = _imageView.frame;
    frame.origin.y = _imageTopMargin;
    _imageView.frame = frame;
}

ps: 其中用到的有些成员变量参数都设置有默认值,方便根据需求设置, 具体含义后面统一说明~

3.定义协议MRScrollZoomViewDelegate处理头像点击事件监听，这里需要在创建UIImageView的时候开启用户响应以及添加点击手势，因为UIImageView不同于UIButton，UIButton继承自UIControl默认具有事件响应功能，而UIImageView继承自UIView不具有，所以需要我们添加手势响应事件

@protocol MRScrollZoomViewDelegate <NSObject>
@optional
- (void)zoomViewDidClick:(MRScrollZoomView *)zoomView;
@end

imageV.userInteractionEnabled = YES;  // 开启响应用户能力
// 创建并添加点击手势
UITapGestureRecognizer *panGes = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(imageViewClick:)];
[_imageView addGestureRecognizer:panGes];

/**
 点击事件处理
 */
- (void)imageViewClick:(UIImageView *)imageView {
    if([self.delegate respondsToSelector:@selector(zoomViewDidClick:)]) {
        [self.delegate zoomViewDidClick:self];
    }
}

3.计算缩放比例 （重点）

/**
 根据偏移量计算缩放比例

 @param scrollView 滚动视图
 */
- (void)zoomWithScrollView:(UIScrollView *)scrollView {
    // 获取偏移量
    CGFloat offsetY = scrollView.contentOffset.y + scrollView.contentInset.top;
    // 缩放比例
    CGFloat scale = 1.0;
    // 变化基数
    CGFloat changeHeight = _scaleRate * self.frame.size.height;
    if(offsetY > 0) {   // 偏移量为正, 上拉缩小
        scale = MAX(_minScale, 1-offsetY/changeHeight);
    }else {  // 偏移量为负, 下拉放大
        scale = MIN(_maxScale, 1-offsetY/changeHeight);
    }
    // 形变变化
    _imageView.transform = CGAffineTransformMakeScale(scale, scale);
    // 固定顶部坐标, 保持不变
    CGRect frame = _imageView.frame;
    frame.origin.y = _imageTopMargin;
    _imageView.frame = frame;
}

其中的MAX(_minScale, 1-offsetY/changeHeight);和MIN(_maxScale, 1-offsetY/changeHeight)是用于根据偏移量控制最大、最小的缩放程度。_minScale是默认的最小缩放比例为1.f，_maxScale是默认的最大缩放比例为1.f， 都是默认不缩放。

---

提供的可修改属性说明

/**
 最大缩放比例 --- 默认值1.0(保持初始比例)
 */
@property (nonatomic, assign) CGFloat maxScale;
/**
 最小缩放比例 --- 默认值1.0(保持初始比例)
 */
@property (nonatomic, assign) CGFloat minScale;
/**
 头像顶部固定间距 --- 默认值0
 */
@property (nonatomic, assign) CGFloat imageTopMargin;
/**
 变化速率 --- 默认为3.0(偏移量/高度*速率), 越小越快
 */
@property (nonatomic, assign) CGFloat scaleRate;

---

实现效果

---

Demo使用示例

• 拷贝文件夹MRScrollZoomView到工程中
• 引入MRScrollZoomView.h
• 创建视图MRScrollZoomView并设置相关属性

MRScrollZoomView *zoomView = [[MRScrollZoomView alloc] init];
zoomView.frame = CGRectMake(0, 0, 70, 70);
zoomView.center = CGPointMake([UIScreen mainScreen].bounds.size.width/2, 30);
zoomView.minScale = 0.5;
zoomView.maxScale = 1.35;
zoomView.imageTopMargin = 10;
zoomView.scaleRate = 3.0;
zoomView.delegate = self;
zoomView.imageView.image = [UIImage imageNamed:@"headIcon"];
[self.navigationController.navigationBar addSubview:zoomView];
```

• 实现代理方法zoomViewScrollView:可选

pragma mark - MRScrollZoomViewDelegate

• (void)zoomViewDidClick:(MRScrollZoomView *)zoomView {
  NSLog(@"点击图片处理");
  }