iOS仿keep5.3.0版本运动能力界面实现UITableView图片下拉放大效果

事情缘于上个月有一次在健身房硬拉冲记录，然而记性不好的我和教练我俩同时都记不住自己的硬拉最大记录是多少了，虽然说如果要找的话翻一翻朋友圈还是能翻得出来。。。。so，还是自己动手写一个吧，碰巧在这之前keep改版无意间看见了这个界面，顿时觉得和自己的需求还挺靠近的，于是决定，就是你了！

一共写过两个版本，分别是scrollView与tableView的结合版以及纯粹的tableView实现版本。经过对比，还是纯tableView版本能够更好的还原出来这种效果，所以此篇文章也是利用这种方式来进行相应的实现的。



如上图所示，界面一共分为3个部分，用不同颜色矩形边框区分，其中1和2为add在tableView上的imageView，3为tableViewCell部分。1内的文字提示和按钮又分别add在1的图片上（这里图片没有做处理，遮罩效果为imageView上add了一个View方式实现）。

第一步，self.view需要add一个tableView，作为一切控件依托的基本控件，这里tableView就是普通的一个tableView，没有任何特殊实现的地方。

第二步，将需要拉伸的底图add在tableView上，这里需要注意设置两个地方：

backImageView.layer.masksToBounds = YES;

backImageView.contentMode = UIViewContentModeScaleAspectFill;

同时，将tableView的contentInset设置为同backImageView同样的高度，即

_infoTableView.contentInset = UIEdgeInsetsMake(backImageViewOriginHeight, 0, 0, 0);

第三步，进行底图拉伸，这里要实现tableView的代理方法

- (void)scrollViewDidScroll:(UIScrollView *)scrollView，首先获取滑动的y坐标，即CGFloat y = scrollView.contentOffset.y;当y<负的图片高度时，放大图片（因为向下滑动y为负数）。

实现如动图所示完整的界面效果代码如下（业务代码已删除）：

#import "UserViewController.h"
#import "Content.h"

@interface UserViewController ()<UITableViewDataSource,UITableViewDelegate>
@property (weak, nonatomic) UITableView *infoTableView;
@end

@implementation UserViewController
{
UILabel *tipsLabel;//记录提示
UIButton *addBtn;//新建记录按钮
UIImageView *backView;//底图
UIView *view;//遮罩
float originHeight;//底图原始高度
UIImageView *infoBackView;//记录底图
float sizeY;//记录底图原始y坐标
float tipsLabelY;//记录提示原始y坐标
float tipsBtnY;//记录新建记录按钮的原始y坐标
}
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
self.title = @"我";

[self uiInitNew];
}
//控件初始化
-(void)uiInitNew{
originHeight = MAXHeight/5*2;
//记录列表
UITableView * infoTableView=[[UITableView alloc] initWithFrame:CGRectMake(0, 0, MAXWidth, MAXHeight) style:UITableViewStyleGrouped];
_infoTableView = infoTableView;
[_infoTableView setBackgroundColor:[UIColor clearColor]];
_infoTableView.contentInset = UIEdgeInsetsMake(originHeight, 0, 0, 0);
[_infoTableView setEditing:NO];
_infoTableView.delegate = self;
_infoTableView.dataSource=self;
[self.view addSubview:_infoTableView];

//底图
backView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, MAXWidth, originHeight)];
[backView setImage:[UIImage imageNamed:@"user_back"]];
backView.userInteractionEnabled = YES;
backView.layer.masksToBounds = YES;
backView.contentMode = UIViewContentModeScaleAspectFill;
[_infoTableView addSubview:backView];
//遮罩
view = [[UIView alloc] initWithFrame:CGRectMake(0 ,0 ,MAXWidth ,originHeight+[[UIApplication sharedApplication] statusBarFrame].size.height)];
[view setBackgroundColor:[UIColor colorWithRed:0/255.0 green:0/255.0 blue:0/255.0 alpha:0.5]];
view.userInteractionEnabled = YES;
[backView addSubview:view];
//记录提示
tipsLabelY = backView.frame.size.height/2-60;
tipsLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, tipsLabelY, backView.frame.size.width, 60)];
[tipsLabel setTextColor:[UIColor whiteColor]];
[tipsLabel setText:[NSString stringWithFormat:@"距离上次打破记录%ld天",1]];
tipsLabel.textAlignment = NSTextAlignmentCenter;
tipsLabel.numberOfLines = 0;
[tipsLabel setFont:[UIFont fontWithName:@"Helvetica-Bold" size:22]];
[view addSubview:tipsLabel];
//新建记录按钮
tipsBtnY = backView.frame.size.height/2+10;
addBtn = [[UIButton alloc] initWithFrame:CGRectMake(60*Zoomx, tipsBtnY, backView.frame.size.width-120*Zoomx, 60)];
[addBtn setTitle:@"添加新记录" forState:(UIControlState)UIControlStateNormal];
[addBtn.layer setMasksToBounds:YES];
[addBtn.layer setCornerRadius:30.0]; //设置矩形四个圆角半径
[addBtn.layer setBorderWidth:2.0];
[addBtn setBackgroundColor:[UIColor colorWithRed:0/255.0 green:0/255.0 blue:0/255.0 alpha:0.5]];
addBtn.layer.borderColor=[UIColor whiteColor].CGColor;
[addBtn addTarget:self action:@selector(addBtnClick:) forControlEvents:(UIControlEvents)UIControlEventTouchUpInside];
[view addSubview:addBtn];

//记录底图
sizeY = -10;
infoBackView = [[UIImageView alloc] initWithFrame:CGRectMake(0,sizeY, MAXWidth, 45)];
[infoBackView setImage:[UIImage imageNamed:@"user_info_back"]];
[_infoTableView addSubview:infoBackView];
//提示
UILabel *infoTipsLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 10, infoBackView.frame.size.width, 30)];
[infoTipsLabel setText:@"各项记录"];
[infoTipsLabel setTextColor:[UIColor grayColor]];
[infoTipsLabel setBackgroundColor:[UIColor clearColor]];
[infoTipsLabel setFont:[UIFont systemFontOfSize:14]];
infoTipsLabel.textAlignment = NSTextAlignmentCenter;
[infoBackView addSubview:infoTipsLabel];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
}
-(void)viewWillDisappear:(BOOL)animated{
self.navigationController.navigationBar.alpha = 1;
}
-(void)viewWillAppear:(BOOL)animated{
self.navigationController.navigationBar.alpha = 0;
}
#pragma mark tableviewdatasource
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return 3;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
static NSString * cellIdentifier = @"cellIdentifier";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
if (!cell) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellIdentifier];
cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
}
//这里做一些cell显示的设置
return cell;
}
//点击跳转到详细信息
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
[tableView deselectRowAtIndexPath:indexPath animated:NO];
//跳转
}
#pragma mark tableviewdelegate
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
return 1;
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
CGFloat y = scrollView.contentOffset.y;
self.navigationController.navigationBar.alpha = -(-y-originHeight-[[UIApplication sharedApplication] statusBarFrame].size.height)/50;
//实际上只是把图片的高度放大了
if (y < -originHeight) {
CGRect backViewFrame = backView.frame;
backViewFrame.origin.y = y;
backViewFrame.size.height =  -y;
backView.frame = backViewFrame;

CGRect viewFrame = view.frame;
viewFrame.size.height = -y;
view.frame = viewFrame;

CGRect tipsLabelFrame = tipsLabel.frame;
tipsLabelFrame.origin.y = -y/2-60;
tipsLabel.frame = tipsLabelFrame;

CGRect addBtnFrame = addBtn.frame;
addBtnFrame.origin.y = -y/2+10;
addBtn.frame = addBtnFrame;
}
}
@end