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

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

看到有个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