关于首页设计框架和一些细节处理分析

针对首页有问题就特意的优化了一下

Imagem de capa

关于首页设计框架和一些细节处理分析

下面是首页界面预览图

第一部分

这个一个横向的 Banner

第二部分

这是放置广告位的 设计说目前也就四个 我为了以后可以扩展 就做成如果超出四个就可以横向滚动

第三部分

推荐预售和限时限量的商品 可以横向滚动 出现 ViewMore 跳转到对应频道的页面

第四部分

四个广告位

第五部分

显示促销的商品

第六部分

显示首页的推荐商品

下面是做这个界面的心酸经历:

开始觉得很简单,毕竟我也是对于 UITableView和 UICollectionView 很溜的码农。

之前界面框架很简单

整体是一个 UICollectionView

上面是一个 Header

我现在使用原来框架面临的问题是

自己当时尝试写了1.0的框架 后来无法满足我们设计这个界面需求 废弃了

我就从 Github 找了几个开源库,看到他们的首页我们的很相似 开始我是这样的

后来我用这个库换成我们首页

我们的 Header 是很高的呀 完全行不通呀

后来继续找了几个库 添加 删除

那几天把我折腾的 差点要封掉

后来终于找到了一个第三方 可以满足90%的需求 只是底部又是会多出40高度 滚动无法联动 bug

后来觉得首页是 APP 的门户 这些小问题会影响我开发形象 遇到我决定

去他大爷的,就给了几天时间做,我都来来回回做了快三个星期了,找框架就用了很久。

结果还是要自己写框架。

首页用到了 N 个 UICollectionView 你说6不6

1 上面Header为啥用 UITableView?

因为显示内容不是固定的 就用自己写的一个库

ZHTableViewGroup专门为复杂表格的解决方案

2 下面是用的 ZHSegmentTagView(还没有托管在 Github)不过大家可以找类似的。为什么不和上面的模块放在TableView 里面?

因为放在 TableView 随着滚动会刷新表格 对象会重新生成 很难和下面的频道页面联动

3 为什么整体不用 UICollectionView 上面是 Header?

因为下面的频道是横向滚动的 设置方向之后 UICollectionView 的 Header 就是在最左边 不是我们要的结果

这是之前没做任何处理 显示的结果 导致下面的频道还没有在最上面时候 滚动下面 导致上面无法联动走了。

最后就做了判断 如果频道栏目没有在最上面 则强行设置下面滚动试图 ContentOffSet为{0,0}

把滑动的距离代理出去 让最外层的滚动试图做对应的滚动

现在自己做了处理 终于达到了联动的效果了

4 上拉剩下10个商品时候要做 预加载请求

发现因为每次 reloadData 都会让滚动的位置回到之前的位置。

发现每次刷新对象改变了 所以每次刷新数据 会回到初始位置

我就用字典保存对应频道 UICollectionView 的对象 每次刷新 取对象进行刷新

发现左右切换频道之后 再次回来 位置再次不是之前位置

发现 UICollectionView 重用机制 0和2位置公用同一个 导致0会记录2的位置 导致每次2到0频道0位置会变

最后用变量记录对应频道位置 判断如果当前频道刷新数据位置和之前记录不一样 则滚动到对应位置

以后有时间 把首页的框架封装出来 方便以后类似界面使用。