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

仿keep运动能力界面

上滑显示

事情缘于上个月有一次在健身房硬拉冲记录,然而记性不好的我和教练我俩同时都记不住自己的硬拉最大记录是多少了,虽然说如果要找的话翻一翻朋友圈还是能翻得出来。。。。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;//底图原始高度
    
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值