IOSUITableVIew征服iOS

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

2016-03-08  本文已影响2934人  呼噜ZR

现在很多app设置了这样的效果,如何实现这一效果呢,其实只需要简单的两个方法,那么我们直接上代码

首先我们在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;
    }
    
}

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

下拉变大的效果
上一篇下一篇

猜你喜欢

热点阅读