顶部图片随UITableView或UIScrollerView滑动缩放效果实现

Posted 2020-06-22 Jk_Chan

UITableView示范例子：
#import "ProfileViewController.h"

static CGFloat ImageHeight = 150.0;
static CGFloat ImageWidth = 320.0;

@interface ProfileViewController ()

@end

@implementation ProfileViewController

- (void)updateImg {
CGFloat yOffset = _tableView.contentOffset.y;
if (yOffset < 0) {
CGFloat factor = ((ABS(yOffset)+ImageHeight)*ImageWidth)/ImageHeight;
CGRect f = CGRectMake(-(factor-ImageWidth)/2, 64, factor, ImageHeight+ABS(yOffset));
self.imgProfile.frame = f;
} else {
CGRect f = self.imgProfile.frame;
f.origin.y = -yOffset+64;
self.imgProfile.frame = f;
}
}

#pragma mark - Table View Delegate

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
[self updateImg];
}

#pragma mark - Table View Datasource

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return 2;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
if (section == 0)
return 1;
else
return 12;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
if (indexPath.section == 0)
return ImageHeight;
else
return 44.0;

}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
NSString *cellReuseIdentifier = @"SectionTwoCell";
NSString *windowReuseIdentifier = @"SectionOneCell";
UITableViewCell *cell = nil;
if (indexPath.section == 0) {
cell = [tableView dequeueReusableCellWithIdentifier:windowReuseIdentifier];
if (!cell) {

cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:windowReuseIdentifier];
cell.backgroundColor=[UIColor clearColor];
}
} else {
cell = [tableView dequeueReusableCellWithIdentifier:cellReuseIdentifier];
if (!cell) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellReuseIdentifier];
cell.contentView.backgroundColor = [UIColor lightGrayColor];


}
cell.textLabel.text = [ NSString stringWithFormat:@"cell %li",(long)indexPath.row];
}
cell.selectionStyle = UITableViewCellSelectionStyleNone;
return cell;
}

- (id)init
{
self = [super init];
if (self) {
// Custom initialization
UIImage *image = [UIImage imageNamed:@"bg.png"];
self.imgProfile = [[UIImageView alloc] initWithImage:image];
self.imgProfile.frame = CGRectMake(0, 64, ImageWidth, ImageHeight);

CGRect bounds = self.view.bounds;
self.tableView = [[UITableView alloc] init];
self.tableView.dataSource = self;
self.tableView.delegate = self;
self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
self.tableView.backgroundColor = [UIColor clearColor];
self.tableView.frame = CGRectMake(0, 64, bounds.size.width, bounds.size.height-64);;

[self.view addSubview:self.imgProfile];
[self.view addSubview:self.tableView];

self.title = @"with UITableView";
}
return self;
}
#pragma mark - notes
/*
原理：
其实是利用了图层叠交层次，与设置UITableView背景透明，不同sections中或只有一个section下的cell选择性设置不透明，
再在scrollview的滚动代理方法中计算对图片缩放
init中：
初始化一个UIImageView并设置相应属性
初始化一个UITableView并设置相应属性重点设置该tableview的backgroundColor为clearColor
viewController中的view添加UIImageView和UITableView（注意：UIImageView是添加到viewController的view上而不是UITableView中的cell）

scrollView滚动的时候：
CGFloat yOffset = _tableView.contentOffset.y;
if (yOffset < 0) {
CGFloat factor = ((ABS(yOffset)+ImageHeight)*ImageWidth)/ImageHeight;
CGRect f = CGRectMake(-(factor-ImageWidth)/2, 64, factor, ImageHeight+ABS(yOffset));
self.imgProfile.frame = f;
} else {
CGRect f = self.imgProfile.frame;
f.origin.y = -yOffset+64;
self.imgProfile.frame = f;
}
tableView设置两个sections（可选，如果想默认显示一部分或全部图片，可把第一个section的cell设置背景透明）
第一个section设置一个cell用于设置cell透明显示背面的图片
第二个section开始正常显示数据
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath：
方法设置cell的高度：
控制显示背后的图片多高
其它数据cell正常设置
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath ：
方法设置cell信息：
生成两个表视图单元可复用字符串标识符
一个用于正常数据cell
一个用于显示背后图片表视图单元
根据section生成对应cell返回
*/
@end

 

 

 

 

UIScrollView示范例子：
#import "ProfileScrollViewController.h"

static CGFloat ImageHeight = 150.0;
static CGFloat ImageWidth = 320.0;

@interface ProfileScrollViewController ()

@end

@implementation ProfileScrollViewController

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
CGFloat yOffset = self.scrollView.contentOffset.y;

if (yOffset < 0) {
CGFloat factor = ((ABS(yOffset)+ImageHeight)*ImageWidth)/ImageHeight;
CGRect f = CGRectMake(-(factor-ImageWidth)/2, 64, factor, ImageHeight+ABS(yOffset));
self.imgProfile.frame = f;
} else {
CGRect f = self.imgProfile.frame;
f.origin.y = -yOffset+64;
self.imgProfile.frame = f;
}
}

#pragma mark - View lifecycle

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
UIImage *image = [UIImage imageNamed:@"bg.png"];
self.imgProfile = [[UIImageView alloc] initWithImage:image];
self.imgProfile.frame = CGRectMake(0, 64, ImageWidth, ImageHeight);

UIView *contentView=[[UIView alloc]initWithFrame:CGRectMake(0, ImageHeight+64, self.view.frame.size.width, 600)];
contentView.backgroundColor=[UIColor groupTableViewBackgroundColor];

CGRect bounds = self.view.bounds;
self.scrollView = [[UIScrollView alloc] init];
self.scrollView.delegate = self;
self.scrollView.backgroundColor = [UIColor clearColor];//重点
self.scrollView.contentSize = CGSizeMake(320, contentView.frame.size.height+ImageHeight+64);
[self.scrollView addSubview:contentView];
self.scrollView.frame = bounds;
[self.view addSubview:self.imgProfile];
[self.view addSubview:self.scrollView];

self.title = @"with UIScrollView";

}
return self;
}
#pragma mark - notes
/*
原理：
其实是利用了图层叠交层次，与设置UIScrollView背景透明，再在UIScrollView上添加不透明的内容View，该内容View的Y坐标在图片的下面
再在scrollview的滚动代理方法中计算对图片缩放
init中：
初始化一个UIImageView并设置相应属性
初始化一个UIScrollView并设置相应属性重点设置该UIScrollView的backgroundColor为clearColor，并且添加一个不透明的内容view在图片下部
viewController中的view添加UIImageView和UIScrollView（注意：UIImageView是添加到viewController的view上而不是UIScrollView中）
scrollView滚动的时候：
CGFloat yOffset = _tableView.contentOffset.y;
if (yOffset < 0) {
CGFloat factor = ((ABS(yOffset)+ImageHeight)*ImageWidth)/ImageHeight;
CGRect f = CGRectMake(-(factor-ImageWidth)/2, 64, factor, ImageHeight+ABS(yOffset));
self.imgProfile.frame = f;
} else {
CGRect f = self.imgProfile.frame;
f.origin.y = -yOffset+64;
self.imgProfile.frame = f;
}
*/
@end