关于首页设计框架和一些细节处理分析
下面是首页界面预览图
第一部分
这个一个横向的 Banner
- 高度随着后台返回尺寸自动自适应
- 如果返回的 Banner 数组为空则隐藏
第二部分
这是放置广告位的 设计说目前也就四个 我为了以后可以扩展 就做成如果超出四个就可以横向滚动
- 按钮的高度随着后台返回尺寸自动自适应
- 如果返回的元素都没有则隐藏这一栏
第三部分
推荐预售和限时限量的商品 可以横向滚动 出现 ViewMore 跳转到对应频道的页面
- 切换频道可以切换对应栏目的内容
- 如果两者都没有数据隐藏
第四部分
四个广告位
- 广告位宽度位屏幕一半
- 如果四个都没有就隐藏
- 如果只有两个就显示两个
第五部分
显示促销的商品
- 栏目可以左右滑动切换
- 每一个栏目只有两个商品
- 倒计时结束就不显示
第六部分
显示首页的推荐商品
- 栏目可以左右切换
- 下面栏目列表可以滑动切换
下面是做这个界面的心酸经历：
开始觉得很简单，毕竟我也是对于 UITableView和 UICollectionView 很溜的码农。
之前界面框架很简单
整体是一个 UICollectionView
上面是一个 Header
我现在使用原来框架面临的问题是
- 我的 Header 那么多元素 都超出两屏幕了 自然要滚动了 之前是商品列表和 Header 可以显示在一个屏幕
- 我下面的商品列表可以切换频道 之前不可以切换
自己当时尝试写了1.0的框架 后来无法满足我们设计这个界面需求 废弃了
我就从 Github 找了几个开源库，看到他们的首页我们的很相似 开始我是这样的
后来我用这个库换成我们首页
我们的 Header 是很高的呀 完全行不通呀
后来继续找了几个库 添加 删除
那几天把我折腾的 差点要封掉
后来终于找到了一个第三方 可以满足90%的需求 只是底部又是会多出40高度 滚动无法联动 bug
后来觉得首页是 APP 的门户 这些小问题会影响我开发形象 遇到我决定
去他大爷的，就给了几天时间做，我都来来回回做了快三个星期了，找框架就用了很久。
结果还是要自己写框架。
首页用到了 N 个 UICollectionView 你说6不6
1 上面Header为啥用 UITableView？
因为显示内容不是固定的 就用自己写的一个库
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位置会变
最后用变量记录对应频道位置 判断如果当前频道刷新数据位置和之前记录不一样 则滚动到对应位置
以后有时间 把首页的框架封装出来 方便以后类似界面使用。
网友评论