背景
做了這么多久的開(kāi)發(fā)，也一直沒(méi)能靜下心來(lái)寫(xiě)點(diǎn)什么。主要還是覺(jué)得自己的文筆不好，有些東西不能很清楚的表達(dá)出來(lái)。再者，現(xiàn)在很多東西什么的一搜一大堆，再寫(xiě)確實(shí)沒(méi)多大意思。當(dāng)然，最重要的一點(diǎn)，我比較懶。。。所以，也就一直沒(méi)有寫(xiě)點(diǎn)什么東西出來(lái)。
再之前的一次面試中，面試官問(wèn)到新浪微博個(gè)人主頁(yè)的實(shí)現(xiàn)，說(shuō)他研究了很久，還是沒(méi)能完美實(shí)現(xiàn)這種效果，說(shuō)網(wǎng)上也沒(méi)有這種效果的demo。我當(dāng)時(shí)很震驚，啥，網(wǎng)上居然沒(méi)這類(lèi)效果？然后，淺談了一下我的思路，再然后，讓我回去寫(xiě)個(gè)這效果的demo發(fā)他。我當(dāng)時(shí)就郁悶了，你這是招人呢還是找人給你解決問(wèn)題？然后就沒(méi)有然后了。。。
今天無(wú)意中突然想到這個(gè)問(wèn)題，然后，下載新浪app再研究了一下，發(fā)現(xiàn)其實(shí)原理很簡(jiǎn)單，好吧，既然這樣，那就開(kāi)擼吧，我的處女作啊。希望對(duì)大家有幫助。寫(xiě)得不好的地方，還請(qǐng)大家多多包涵。。
做好的的效果圖
123.gif
先簡(jiǎn)單的說(shuō)下結(jié)構(gòu)和原理
- 我這地方采用的橫向滾動(dòng)的UICollectionView + 縱向UITableView（tableView的headerView設(shè)置一個(gè)view大小與headView尺寸一致） + headView + catalogView
@property (nonatomic, strong) UICollectionView *collectionView;
@property (nonatomic, strong) SMPHeaderView *headerView;
@property (nonatomic, strong) SMPCatalogView *catalogView;
@property (nonatomic, strong) NSArray *catalogs;
- 當(dāng)橫向滾動(dòng)的時(shí)候。headerView 移動(dòng)到 collectionView 同層級(jí)，這時(shí)候的collectionView橫向滾動(dòng)不會(huì)影響到headerView。同時(shí)，發(fā)出通知。同步其他tableView 的y偏移
//當(dāng)前橫向滾動(dòng)
- (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));
}];
}
- 當(dāng)縱向滾動(dòng)時(shí)。headerView移動(dòng)到tableView 的header上，達(dá)到同步滾動(dòng)效果
- (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 基本就能橫向操作不動(dòng)，縱向一起動(dòng)。原理和結(jié)構(gòu)是不是還算比較簡(jiǎn)單？如果你沒(méi)能理解，這說(shuō)明是我的表達(dá)上有問(wèn)題。
其他
- 這篇文章主要是提供這樣的一個(gè)解題思路，所以具體的實(shí)現(xiàn)方式以及細(xì)節(jié)上的，我就不詳細(xì)介紹和實(shí)現(xiàn)了，有些地方也不是完全參照新浪來(lái)的，比如類(lèi)目數(shù)量相對(duì)靈活一點(diǎn)（因?yàn)橹懊嬖嚬僬f(shuō)的，他寫(xiě)的不好擴(kuò)展個(gè)數(shù)，也不知道他是怎么實(shí)現(xiàn)的）
- 如果理解思路的朋友們，可以自己嘗試寫(xiě)一下，不理解的朋友，可以下載demo看看。。如果到最后，還是不能理解。。我只能說(shuō)抱歉了啊。。
代碼地址
https://github.com/helfyz/SinaMainPage
覺(jué)得對(duì)你有幫助的朋友，麻煩加下星，最近找工作中，大家懂的。。。
