简书个人中心，增加下拉刷新和放大头部视图

时间：2023-02-01 19:20:35

前言：上篇文章写了一个简书中心效果，增加了下拉刷新功能。如有需要可移步。 到这里来

本片文章 Demo地址

本篇文章主要是在原有的基础效果上增加下拉可以使头部视图放大效果，废话不多说，先上效果图

简书个人中心，增加下拉刷新和放大头部视图

看过上个例子的童鞋应该可以看出，在原有的基础上增加下拉放大头部视图功能。

核心代码

- (NXTableView *)mainTableView{
    if (!_mainTableView) {
        _mainTableView = [[NXTableView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT) style:UITableViewStylePlain];
        _mainTableView.delegate = self;
        _mainTableView.dataSource = self;
        _mainTableView.backgroundColor = [UIColor whiteColor];
        _mainTableView.showsHorizontalScrollIndicator = NO;
        _mainTableView.separatorStyle = UITableViewCellSeparatorStyleNone;
        _mainTableView.showsVerticalScrollIndicator = NO;
        //table 预留出需要做放大效果视图的高度
        _mainTableView.contentInset = UIEdgeInsetsMake(200, 0, 0, 0);
        // 需要注意的是 创建的头部视图的坐标，这里以200为高度举例。
        UIImageView * imageV = [[UIImageView alloc]initWithFrame:CGRectMake(0, -200, SCREEN_WIDTH, 200)];
        imageV.image = [UIImage imageNamed:@"m8.jpg"];
        //为了达到我们等比例的放大效果，使用系统的方法UIViewContentModeScaleAspectFill 即可
        imageV.contentMode = UIViewContentModeScaleAspectFill;
        imageV.tag = 10000;
        imageV.backgroundColor = [UIColor redColor];
        [_mainTableView addSubview:imageV];

    }
    return _mainTableView;
}
创建好我们的头部视图之后，这里需要考虑的就是放大的效果了
在scroll的代理方法scrollViewDidScroll:(UIScrollView *)scrollView 里边进行判断就可以了，这里视图向下偏移了64像素，所以
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
CGFloat headerOffsetY =  -264;预留高度+偏移的距离
 if (tempContentOffsetY < headerOffsetY) {
                CGRect rect = [self.mainTableView viewWithTag:10000].frame;
                rect.origin.y = tempContentOffsetY+64;
                rect.size.height = -(tempContentOffsetY+64);
                [self.mainTableView viewWithTag:10000].frame = rect;
            }

 }

到此效果图就基本出来了。感兴趣的小伙伴可以移步到我的GitHub里。 传送门

标签：

相关文章