朋友圈 个人信息 界面 下拉 头部图片视图跟随缩放变化

第一次写文章，有不足之处请见谅，谢谢

。

看到有个App个人信息界面或是朋友圈界面 往往顶部有一个背景图片，下滑的时候还能随滑动拉伸，效果如下图：



于是自己想了想，写了如下几句代码实现：

【这里就直接用代码了，代码中有解释，代码不难，相信有基础的都能看懂

】:

#import "ViewController.h"
#import "UIView+Category.h"

/** 顶部图片视图 初始化高度 即正常的高度 */
#define HeadImgInitHeight 200

@interface ViewController () <UIScrollViewDelegate>
/** 这样的页面 最外层显示的是一个ScrollView */
@property (nonatomic, strong) UIScrollView * scrollView;
/** 顶部的图片 */
@property (nonatomic, strong) UIImageView * headIMG;

@end

@implementation ViewController

#pragma mark - 懒加载
- (UIScrollView *)scrollView {
if (!_scrollView) {
/** 充满整个屏幕 */
_scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
/** 设置其内容高度 这里之所以+1，
*  是因为 ScrollView的内容高度 小于等于 其自身高度的时候是不可以滑动的
*  连弹簧效果也不会有，自然也就不可能有这个Demo所要达到的效果了
*/
[_scrollView setContentSize:CGSizeMake(0, self.view.height+1)];
_scrollView.delegate = self;
//  添加图片
[_scrollView addSubview:self.headIMG];
}
return _scrollView;
}

- (UIImageView *)headIMG {
if (!_headIMG) {
_headIMG = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.view.width, HeadImgInitHeight)];
[_headIMG setImage:[UIImage imageNamed:@"yanfei"]];
/** 设置图片的填充方式，根据实际需要设置，可以自己设置 尝试效果 */
[_headIMG setContentMode:UIViewContentModeScaleAspectFill];
}
return _headIMG;
}

- (void)viewDidLoad {
[super viewDidLoad];
/** 将ScrollView 加载显示 */
[self.view addSubview:self.scrollView];
}

#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
float offset_Y = scrollView.contentOffset.y;
if (offset_Y < 0) {
//  当滑动到顶部 还在乡下滑动的时候
/** 设置图片的 y 坐标为超出的y值
*  并增加图片的高度
*  填充掉下拉时弹簧效果多余的空白区域
*  OK 这样就达到效果了
*/
_headIMG.y = offset_Y;
_headIMG.height = HeadImgInitHeight - offset_Y;
}
}

@end