新浪微博个人主页效果 - 解题思路 & 代码

背景

• 做了这么多久的开发，也一直没能静下心来写点什么。主要还是觉得自己的文笔不好，有些东西不能很清楚的表达出来。再者，现在很多东西什么的一搜一大堆，再写确实没多大意思。当然，最重要的一点，我比较懒。。。所以，也就一直没有写点什么东西出来。

• 再之前的一次面试中，面试官问到新浪微博个人主页的实现，说他研究了很久，还是没能完美实现这种效果，说网上也没有这种效果的demo。我当时很震惊，啥，网上居然没这类效果？然后，浅谈了一下我的思路，再然后，让我回去写个这效果的demo发他。我当时就郁闷了，你这是招人呢还是找人给你解决问题？然后就没有然后了。。。

• 今天无意中突然想到这个问题，然后，下载新浪app再研究了一下，发现其实原理很简单，好吧，既然这样，那就开撸吧，我的处女作啊。希望对大家有帮助。写得不好的地方，还请大家多多包涵。。

做好的的效果图

123.gif

先简单的说下结构和原理

• 我这地方采用的横向滚动的UICollectionView + 纵向UITableView（tableView的headerView设置一个view大小与headView尺寸一致） + headView + catalogView

@property (nonatomic, strong) UICollectionView *collectionView;
@property (nonatomic, strong) SMPHeaderView *headerView;
@property (nonatomic, strong) SMPCatalogView *catalogView;
@property (nonatomic, strong) NSArray *catalogs;

• 当横向滚动的时候。headerView 移动到 collectionView 同层级，这时候的collectionView横向滚动不会影响到headerView。同时，发出通知。同步其他tableView 的y偏移

//当前横向滚动
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGRect rect = [self.headerView convertRect:self.headerView.bounds toView:self.view];
    [[NSNotificationCenter defaultCenter] postNotificationName:@"contentOffset" object:@(rect.origin.y)];
    if([self.headerView superview] == self.view) return;
    [self.view addSubview:self.headerView];
    [self.headerView mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(@(rect.origin.y));
        make.left.right.equalTo(self.view);
        make.height.equalTo(@(K_HEADER_HEIGTH));
    }];
}

• 当纵向滚动时。headerView移动到tableView 的header上，达到同步滚动效果

- (void)tableViewDidScroll:(UITableView *)tableView {
    if([self.headerView superview] == tableView.tableHeaderView) return;
    [tableView.tableHeaderView addSubview : self.headerView];
    [self.headerView mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.left.top.bottom.right.equalTo(tableView.tableHeaderView);
    }];
    [tableView.tableHeaderView layoutSubviews];
}

• 做到这一步，headView 基本就能横向操作不动，纵向一起动。原理和结构是不是还算比较简单？如果你没能理解，这说明是我的表达上有问题。

其他

• 这篇文章主要是提供这样的一个解题思路，所以具体的实现方式以及细节上的，我就不详细介绍和实现了，有些地方也不是完全参照新浪来的，比如类目数量相对灵活一点（因为之前面试官说的，他写的不好扩展个数，也不知道他是怎么实现的）
• 如果理解思路的朋友们，可以自己尝试写一下，不理解的朋友，可以下载demo看看。。如果到最后，还是不能理解。。我只能说抱歉了啊。。

代码地址

https://github.com/helfyz/SinaMainPage
觉得对你有帮助的朋友，麻烦加下星，最近找工作中，大家懂的。。。