仿「简书」导航头像缩放

96
Manba_小洛
2016.12.20 22:42* 字数 660

前言:对于每天逛【简书】的伙伴应该会发现,简书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不同于UIButtonUIButton继承自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(@"点击图片处理");
    }
iOS | Demos