前言：对于每天逛【简书】的伙伴应该会发现，简书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(@"点击图片处理");
}
