我们看AppStore首页界面,很多公司都会仿制。很多人都做过,也有很多人问怎么做。闲来无事简单的做一个Demo。
第一部分:无限滚动View
首先是第一部分,是无限滚动的视图。这个网上多的是。但是在这里还是在Code一遍,我做出我的理解。
下面使用UICollectionView来做,因为它自带滚动,自带复用,不用很麻烦你自定义cell,贴上去就行了。只要计算好位置就可以无限滚动了。
下面的图先说下我的基本构思:我写在scrollviewDelegate的scrollViewDidEndDecelerating
![](https://img.haomeiwen.com/i143910/d80b7cad18cda382.png)
![](https://img.haomeiwen.com/i143910/32f4295af50fb28a.png)
主要代码如下:
![](https://img.haomeiwen.com/i143910/23c776729047e77f.png)
![](https://img.haomeiwen.com/i143910/4b67fa9cd81ed8f8.png)
![](https://img.haomeiwen.com/i143910/554129e90645ac02.png)
第二部分:显示视图
这里整个列表是tableView,cell上嵌套collectionView。
还有就是上面的无限滚动的视图,在下拉的时候在顶部位置,上拉的时候跟着走。其实就是contentOffset和contentInset用法,效果如下
![](https://img.haomeiwen.com/i143910/d14c0562a6103211.gif)
主要代码如下
![](https://img.haomeiwen.com/i143910/18f6bd4a4e7d3bc7.png)
这样就大功告成了。
无限滚动的view没有添加计时和page标记,自己可以做。
最种效果如下:
![](https://img.haomeiwen.com/i143910/be32692a3d81949f.gif)
Demo地址:github.com/maomaoxiansheng/InfiniteScrollingAndAppStorePage
网友评论