iOS 仿支付宝首页样式

点击上方“程序员大咖”，选择“置顶公众号”

关键时刻，第一时间送达！

作者：枫developer

链接：https://www.jianshu.com/p/658f2aeafa64

程序员大咖整理发布，转载请联系作者获得授权

最近项目用到了支付宝首页的头部动画的效果，这里就把我的实现原理给大家梳理一下，希望能和大家一起学习进步，先上图：

首先我们了解一下他们的层级关系，还是先看图，方便解释：

图片已经标明的很明白，我们在控制器先放上一个UIScrollView，在它的上面分别放上一个HeaderView（UIView）和一个UITableView。这时需要控制UITableView不能滑动，并且在设置高度时保持和行高*行数一致，也就是说这个方法适用于一些UITableView不必显示过多的页面，这里面不参与UITableView的复用，所有的Cell在一开始就显示出来了。ok，文字永远是枯燥的，上代码先：

在父视图UIScrollView里面的初始化方法里

-(instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        self.delegate = self;

        [self headerView];

        // 设定tableView的行数(这个tableView是一个自定义的UITableView类)
        self.tableView.rowNumber = 20;
        // 设定自身的偏移量，tableViewCell的高度是50
        self.contentSize = CGSizeMake(0, kHeaderHeight + self.tableView.rowNumber * 50.f + 64.f);

        __weak __typeof(self)weakSelf = self;
        // 下拉刷新
        self.tableView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
            [weakSelf loadMoreData];
        }];
    }

    return self;
}

而在UITableView的类中：

-(void)setRowNumber:(NSInteger)rowNumber {
    _rowNumber = rowNumber;

    // 重置高度为：行数（rowNumber） *  行高（kRowHeight）
    self.lyf_height = rowNumber * kRowHeight;

    [self reloadData];
}

这样在初始化的时候，其实UITableView中所有的Cell就自动展示了，不存在复用的问题，所以如果需要在UITableView中显示大量数据的同学这个方法并不可取，至于哪种方法可取呢