美文网首页
iOS表头图片随着下拉缩放

iOS表头图片随着下拉缩放

作者: 点滴86 | 来源:发表于2017-09-18 11:39 被阅读29次

    App中经常可以看到一种效果如下

    表头动画.gif

    在UIView上添加一个UIImageView,代码如下

    - (UIView *)myHeaderView
    {
        if (_myHeaderView == nil) {
            _myHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 229)];
            _myHeaderView.backgroundColor = [UIColor clearColor];
            _myHeaderView.clipsToBounds = NO;
            
            [_myHeaderView addSubview:self.myHeaderImgView];
        }
        
        return _myHeaderView;
    }
    
    - (UIImageView *)myHeaderImgView
    {
        if (_myHeaderImgView == nil) {
            _myHeaderImgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 229)];
            _myHeaderImgView.backgroundColor = [UIColor clearColor];
            _myHeaderImgView.image = [UIImage imageNamed:@"cover"];
            _myHeaderImgView.contentMode = UIViewContentModeScaleAspectFill;
            _myHeaderImgView.clipsToBounds = YES;
        }
        
        return _myHeaderImgView;
    }
    
    

    将myHeaderView设置成tableview的headerview

    - (void)viewDidAppear:(BOOL)animated
    {
        [super viewDidAppear:animated];
        [self.view addSubview:self.myTableView];
        self.myTableView.frame = [UIScreen mainScreen].bounds;
        self.myTableView.tableHeaderView = self.myHeaderView;
    }
    

    在滑动的过程中修改myHeaderImgView的frame

    #pragma mark - UIScrollViewDelegate method
    - (void)scrollViewDidScroll:(UIScrollView *)scrollView
    {
        CGFloat offsetY = scrollView.contentOffset.y;
        if (offsetY < 0) {
            self.myHeaderImgView.frame = CGRectMake(0, offsetY, [UIScreen mainScreen].bounds.size.width, 229 - offsetY);
        } else {
            self.myHeaderImgView.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 229);
        }
    }
    

    就可以实现gif的效果啦~

    相关文章

      网友评论

          本文标题:iOS表头图片随着下拉缩放

          本文链接:https://www.haomeiwen.com/subject/ucwvsxtx.html