一、headerView方式
headerView方式.gif
这种方式是自定义一个背景视图作为tableView的头视图，在视图滚动的代理方法里面，得到tableView的偏移量，如果偏移量小于0，让背景视图的高度等于原高度加上偏移量的绝对值，通过现在的高度和初始高度，可以计算出背景视图的缩放比例，根据缩放比例把宽度等比例缩放，最后重新设置背景视图的frame就可以了。
//
// XYHeaderViewController.m
// ExpandUserBackground
//
// Created by 薛尧 on 16/12/1.
// Copyright © 2016年 薛尧. All rights reserved.
//
#import "XYHeaderViewController.h"
#define kwidth [UIScreen mainScreen].bounds.size.width
@interface XYHeaderViewController ()
@property(nonatomic, strong)UITableView *tableView;
@property(nonatomic, strong)UIImageView *headerBackView; // 头像背景图片
@property(nonatomic, strong)UIImageView *photoImageView; // 头像图片
@property(nonatomic, strong)UILabel *userNameLabel; // 用户名label
@property(nonatomic, strong)UILabel *introduceLabel; // 简介label
@property(nonatomic, strong)UIView *tableViewHeaderView; // tableView头部视图
@property(nonatomic, assign)NSInteger imageHeight; // 背景图片的高度
@end
@implementation XYHeaderViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.navigationController.navigationBar.hidden = YES;
self.view.backgroundColor = [UIColor whiteColor];
_imageHeight = 240;// 背景图片的高度
_tableView = [[UITableView alloc] initWithFrame:self.view.frame style:UITableViewStylePlain];
_tableView.dataSource = self;
_tableView.delegate = self;
[self.view addSubview:_tableView];
[self createTableViewHeaderView];
}
#pragma mark - 创建头视图
- (void)createTableViewHeaderView
{
_tableViewHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, kwidth, _imageHeight)];
// 背景图
_headerBackView = [[UIImageView alloc] init];
_headerBackView.frame = CGRectMake(0, 0, kwidth, _imageHeight);
_headerBackView.image = [UIImage imageNamed:@"bxjjq"];
[_tableViewHeaderView addSubview:_headerBackView];
// 头像
_photoImageView = [[UIImageView alloc] initWithFrame:CGRectMake((kwidth - 100) / 2, 50, 100, 100)];
[self.tableViewHeaderView addSubview:self.photoImageView];
_photoImageView.layer.cornerRadius = 50;
_photoImageView.layer.masksToBounds = YES;
_photoImageView.image = [UIImage imageNamed:@"young"];
// 用户名
_userNameLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(_photoImageView.frame) + 10, kwidth, 20)];
_userNameLabel.font = [UIFont systemFontOfSize:16];
_userNameLabel.text = @"JRS";
_userNameLabel.textAlignment = 1;
_userNameLabel.textColor = [UIColor whiteColor];
[_tableViewHeaderView addSubview:self.userNameLabel];
// 简介
_introduceLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(_userNameLabel.frame) + 10, kwidth, 20)];
_introduceLabel.alpha = 0.7;
_introduceLabel.text = @"他强任他强,我干我的羊";
_introduceLabel.textAlignment = 1;
_introduceLabel.font = [UIFont systemFontOfSize:12];
_introduceLabel.textColor = [UIColor whiteColor];
[_tableViewHeaderView addSubview:_introduceLabel];
self.tableView.tableHeaderView = _tableViewHeaderView;
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGFloat width = self.view.frame.size.width;// 图片的宽度
CGFloat yOffset = scrollView.contentOffset.y;// 偏移的y值
NSLog(@"%f",yOffset);
if (yOffset < 0) {
CGFloat totalOffset = _imageHeight + ABS(yOffset);
CGFloat f = totalOffset / _imageHeight;
self.headerBackView.frame = CGRectMake(- (width * f - width) / 2, yOffset, width * f, totalOffset);// 拉伸后的图片的frame应该是同比例缩放
}
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 30;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
if (!cell) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];
}
return cell;
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
二、通过tableView的contentInset属性
contentInset方式.gif
使用这种方式依赖于Masony，是把自定义背景视图放到控制器的view上，在添加tableView的时候设置contentInset属性让底下的背景视图显示出来，在视图滚动的方法里，如果tableView向下滑动，使用masonry更新背景视图的约束，背景视图的height会变大，因为背景视图的contentMode = UIViewContentModeScaleAspectFill，图片会跟着变大。
//
// XYContentInsetViewController.m
// ExpandUserBackground
//
// Created by 薛尧 on 16/12/1.
// Copyright © 2016年 薛尧. All rights reserved.
//
#import "XYContentInsetViewController.h"
#import
// 导航栏高度
#define kNavBarH 64.0f
// 头部图片的高度
#define kHeardH 260
@interface XYContentInsetViewController ()
@property (nonatomic, strong) UITableView *tableView;
@property (nonatomic, strong) UIImageView *scaleImageView;// 顶部图片
@property (nonatomic, assign) CGFloat lastOffsetY; // 记录上一次的位置
@end
@implementation XYContentInsetViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.navigationController.navigationBar.hidden = YES;
self.lastOffsetY = -kHeardH + 35;
[self.view addSubview:self.scaleImageView];
// 设置展示图片的约束
[_scaleImageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.view).offset(0);
make.left.equalTo(self.view.mas_left);
make.right.equalTo(self.view.mas_right);
make.height.mas_equalTo(kHeardH);
}];
[self.view addSubview:self.tableView];
self.tableView.backgroundColor = [UIColor clearColor];
}
#pragma mark - 懒加载
// 放大图片的懒加载
- (UIImageView *)scaleImageView
{
if (!_scaleImageView) {
_scaleImageView = [[UIImageView alloc] init];
_scaleImageView.contentMode = UIViewContentModeScaleAspectFill;
_scaleImageView.clipsToBounds = YES;
_scaleImageView.image = [UIImage imageNamed:@"bxjjq"];
}
return _scaleImageView;
}
// tableView的懒加载
- (UITableView *)tableView
{
if (!_tableView) {
_tableView = [[UITableView alloc] initWithFrame:[UIScreen mainScreen].bounds style:UITableViewStylePlain];
_tableView.contentInset = UIEdgeInsetsMake(kHeardH - 35, 0, 0, 0);
_tableView.delegate = self;
_tableView.dataSource = self;
_tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
}
return _tableView;
}
#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
// 计算当前偏移位置
CGFloat offsetY = scrollView.contentOffset.y;
CGFloat delta = offsetY - _lastOffsetY;
NSLog(@"delta=%f",delta);
NSLog(@"offsetY=%f",offsetY);
CGFloat height = kHeardH - delta;
if (height < kNavBarH) {
height = kNavBarH;
}
[_scaleImageView mas_updateConstraints:^(MASConstraintMaker *make) {
make.height.mas_equalTo(height);
}];
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 30;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
if (!cell) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];
}
return cell;
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
完整代码