长得好看的妹子 镇楼!
近期项目需要,研究了一下今日头条的切换频道和选择频道模块。现在把成果分享出来,大家一起研究学习一下。
效果图如下
总体三个模块
一、控制器顶端的滑动切换部分
这部分由UIScrollView 和UILabel组成。根据传入数组的个数,去添加label。(起初打算用button来实现,但后来发现button的内边距会随着为本的增多而变大,和UI图差距较大,还要额外处理内距。于是就换成了label)。
给label添加手势(UITapGestureRecognizer),在手势响应方法中,通过
UILabel *lable = (UILabel *)sender.view;
即可拿到这个label,效果和button是一样的。
二、编辑频道的部分
基于collectionView来实现。值得注意的地方有
1、 如果在didselect方法中,如果只是老套的先操作数据源,再reload。会有明显的延迟。即加号和减号的变化过程,背景色的变换过程,边框的变换等等会在cell移动结束后才会生效。效果不好。
可以在操作数据源的同时,通过
[collectionView cellForItemAtIndexPath:indexPath]
拿到这个cell,直接将cell的样式做出更改,体验更好。
2、 collectionView moveItemAtIndexPath方法执行时去调用reloadData。并不会走collection的cellForItem方法。
需要使用performBatchUpdates的回调方法即可解决。
[self.collectionView performBatchUpdates:^ {
NSIndexPath *targetIndexPage = [NSIndexPath indexPathForItem:0 inSection:1];
[collectionView moveItemAtIndexPath:indexPath toIndexPath:targetIndexPage];
} completion:^(BOOL finished) {
[self.collectionView reloadData];
}];
3、刷新机制,根据需求来。通常情况下局部刷新即可。
[collectionView reloadItemsAtIndexPaths:@[indexPath]];
但是有一点,这样是不会走collection的cellForItem方法。 如果需要走这个代理方法,最好是调用 reloadData方法。
4、 增加和删除cell,要用不同的代理方法区分开,外面使用起来更加方便。
三、 每个频道对应的列表View 需要根据数据源去生成。根据选择的下标来一一匹配(删除和增加都是通过下标index来对应)。
不要在每次移动频道cell的时候就刷新外面的UI。 但是要先做好标记,改变外面列表的数据源。等到返回时,统一刷新UI。