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

下面是首页界面预览图

第一部分

这个一个横向的 Banner

  • 高度随着后台返回尺寸自动自适应
  • 如果返回的 Banner 数组为空则隐藏

第二部分

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

  • 按钮的高度随着后台返回尺寸自动自适应
  • 如果返回的元素都没有则隐藏这一栏

第三部分

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

  • 切换频道可以切换对应栏目的内容
  • 如果两者都没有数据隐藏

第四部分

四个广告位

  • 广告位宽度位屏幕一半
  • 如果四个都没有就隐藏
  • 如果只有两个就显示两个

第五部分

显示促销的商品

  • 栏目可以左右滑动切换
  • 每一个栏目只有两个商品
  • 倒计时结束就不显示

第六部分

显示首页的推荐商品

  • 栏目可以左右切换
  • 下面栏目列表可以滑动切换

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

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

之前界面框架很简单

整体是一个 UICollectionView

上面是一个 Header

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

  • 我的 Header 那么多元素 都超出两屏幕了 自然要滚动了 之前是商品列表和 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位置会变

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

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