实现tableView上headerView图片下拉变大效果

这篇博客介绍了如何在UITableView中实现下拉时headerView中的图片逐渐放大的效果。首先通过storyboard设置 tableView 和 Navigation,然后在tableView中添加图片,并在viewDidLoad中调用自定义方法或直接设置。关键在于利用UITableView继承自UIScrollView的特性,通过监听scrollView的滚动事件来改变图片的大小,从而达到预期效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首先我们在storyBoard里拖一个tableView并设置Navigation,接下来我们在tableView中设置图片
我是自己写了个方法然后在viewDidLoad中调用,也可以直接在viewDidLoad中设置

-(void)setlayoutHeaderView{
    //设置一个view,为了使将图片添加到这个view上
    UIView *aView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 200)];
    //添加图片
    self.imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 200)];
    self.imageView.image = [UIImage imageNamed:@"12"];
    [aView addSubview:self.imageView];
    self.tableView.tableHeaderView = aView;

}

设置图片效果

设置好图片后,我们需要设置下拉变化,如果实现这一效果呢?我们知道 UITableViewController是继承于scrollView,那么我们可以在tableViewController调用scrollView的方法

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
//获取偏移量
    CGPoint offset = scrollView.contentOffset;
    //判断是否改变
    if (offset.y < 0) {
        CGRect rect = self.imageView.frame;
  //我们只需要改变图片的y值和高度即可
        rect.origin.y = offset.y;
        rect.size.height = 200 - offset.y;
        _imageView.frame = rect;
    }

}

这样我们就实现了这一效果()



文/呼噜ZR(简书作者)
原文链接:http://www.jianshu.com/p/78fa3650d36d
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值