iOS仿keep5.3.0版本运动能力界面实现UITableView图片下拉放大效果
来源:互联网 发布:装修风格 知乎 编辑:程序博客网 时间:2024/06/05 09:10
事情缘于上个月有一次在健身房硬拉冲记录,然而记性不好的我和教练我俩同时都记不住自己的硬拉最大记录是多少了,虽然说如果要找的话翻一翻朋友圈还是能翻得出来。。。。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
- iOS仿keep5.3.0版本运动能力界面实现UITableView图片下拉放大效果
- iOS仿keep5.3.0版本健身等级界面实现UITableView头部图片下拉纵向拉伸效果
- iOS仿keep5.3.0版本健身等级界面实现自定义UITableViewCell显示进度效果
- 下拉UITableview实现图片放大效果
- [iOS]实现UITableView头部带有图片并且下拉图片放大效果
- [IOS]对UITableView的简单封装,实现了下拉放大头部图片的效果
- UITableView下拉顶部图片放大效果
- ios下拉放大图片效果
- 仿QQ控件图片下拉放大效果
- iOS编程——最简单的实现UITableView下拉时顶部图片放大消失的效果
- UITableView下拉放大效果
- iOS下拉tableView实现上面的图片放大效果
- UITableView头部带有图片并且下拉图片放大效果
- iOS个人页面图片下拉放大效果
- 下拉实现头部图片放大效果,实现类似QQ,新浪个人中心界面
- 下拉实现头部图片放大效果,实现类似QQ,新浪个人中心界面
- ios下拉放大图片
- ios下拉图片放大
- 从修正Adam到理解泛化:概览2017年深度学习优化算法的最新研究进展
- Android持久化存储的几种方式
- webstorm编辑器破解码
- Elasticsearch5.3.1 IK分词,同义词/联想搜索设置
- 细说Nginx系列-- main(全局设置)参数说明
- iOS仿keep5.3.0版本运动能力界面实现UITableView图片下拉放大效果
- vue2.0在没有dev-server.js下的本地数据配置
- QT错误:collect2:ld returned 1 exit status
- 新路程------imx6q 新增spi设备
- C++ 智能指针详解
- EBS常用配置文件设置
- oracle--11.使用DML处理数据
- windows下忘记mysql密码,跳过登录进入mysql解决方案
- python3第一课