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

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

下面是首页界面预览图

第一部分

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容