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

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

下面是首页界面预览图

第一部分

这个一个横向的 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位置会变

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏钱曙光的专栏

一周极客热文:一个7岁女孩告诉你的关于计算机编程的本质

一个七岁的女孩子,在花了一个小时学习编程后,她对编程得出了令人赞叹的体会。(如上图) 计算机很傻,它只会做那些你让它做的事。 编程真的很难!(你必须非常的认真!...

2149
来自专栏java一日一条

Mac下提升工作效率的方式

Mac 系统一向以提供高效的工作环境著称,iOS、Android和服务端程序员都可以轻松的在Mac上搭建舒适的开发环境。笔者主要从事iOS开发,一般在macbo...

1253
来自专栏互联网数据官iCDO

利用“Google Tag Manager V2”实现滚动追踪

吕东昊,iCDO翻译志愿者 谷歌标签管家第二版本中的滚动追踪功能可谓是另一个搜集访客行为信息的利器,什么是滚动追踪?如何设置并实现追踪?本文将为你一一解答。 ...

3607
来自专栏tkokof 的技术,小趣及杂念

Dev-C++,Time to say goodbye ?(更新2012-02-04)

  记得在那段很久以前的学生时代,自己曾经很反感Visual Studio的过度臃肿,再加上当时学校的实验PC陈腐老旧:经常假死的Windows 2000,外加...

982
来自专栏星流全栈

2016 JavaScript 技术栈展望

1664
来自专栏Nian糕的私人厨房

Vue2.0 数据抓取及Swiper组件开发

本次的系列博文的知识点讲解和代码,主要是来自于 黄轶 在慕课网的 Vue 2.0 高级实战-开发移动端音乐WebApp 课程,由个人总结并编写,其代码及知识点...

1064
来自专栏FreeBuf

Chrome XSS审计之SVG标签绕过

在一年前,在我的私人Twitter账户 brutal secret ,我分享了一个有趣的方法来通过审计绕过chrome 的xss过滤器。我们将从黑盒测试的角度...

3375
来自专栏拂晓风起

HTML5骨骼动画Demo | 使用min2d、createjs、pixi播放spine动画

5905
来自专栏互联网杂技

react+redux+webpack教程1

经历了EXT、YUI时代,又经历了Angular时代,我们正在步入React时代。 前端开发框架凭借JS极其灵活强大的特性模样越来越“怪异”,正是这怪异让我们对...

3465
来自专栏何俊林

一个电商项目【拉手团购】购物App(已开源)

图:青岛八大关 之前很多人在后台问,是否有商城或电商项目推荐,今天推荐一款myxh开源的【拉手团购】购物App,基本上涵盖电商项目中所有功能。开源不易,大家多多...

4025

扫码关注云+社区

领取腾讯云代金券