iOS:高仿闲鱼、京东等列表底部分页视图

暴走的鑫鑫 投稿 2018-09-18 15:10:17 3447

简介

引用大佬们说的话:“所谓流量就是用户的注意力”。引起了用户的注意才能延长使用APP的时长,才能有机会引流到核心模块,才能提升日活,才能提高广告及其它收入,才能提高程序员我们的薪资。

所以,作为开发APP的相关人员:产品经理、开发、测试等,要尽全力保证产品的易用性、流畅性、稳定性等。

比如对于主流的首页设计,现在就有一种新的设计方式。列表上部分是热门内容,滚动到最下面就是分类的推荐内容。下图可以直观的表达:

111.gif

scrollInteraction.gif

正所谓“没有对比就没有伤害”,我们再来看看旧版本设计,如下图:

normalLayout.gif

先来吐槽一下旧版本设计:

  • “热门”指示title放在了导航栏上面,用户不一定看得到,所以点击切换或滚动切换的概率就很低。(而且有些APP居然没有滚动切换,只能点击最上面的title切换,转换率就更低了!)

  • “热门”页面的分类视图与导航栏的分类视图同时出现,增加了用户的理解成本。小白用户左右滚动可能都不知道自己在滚动哪个视图。

再在表扬一下新版本设计:

  • 用户看热门往下滚动,滚动底部,自然而然就是分类推荐视图。当前的用户行为没有被打断(不需要用户思考想去看热门,再点击或滚动切换到热门,而是默认展示给用户,用户的思路一直处于一个浏览模式,没有操作的思考)。用户的注意力没有被分散,然后分类推荐的文章,大家应该都知道标题都很冲击(比如说“美女直播后忘记关摄像头,这画面太....”,“乔丹是最佳得分后卫?他可能不会答应!”,再配上一定的美图),面对这些“诱惑”用户大概率忍不住就点进去了,然后就被各种标题吸引,咱们的日使用时间就蹭蹭往上涨了。

综上所述,许多APP都采用了这种设计。有代表性的是:闲鱼首页、京东我的页面、转转首页、中央天气预报首页等。当然你的产品经理,也会慢慢跟风采用该设计的。

Github地址

下载源码,一睹为快!JXPageListView

好了,下面来看看JXPageListView的效果。

效果预览

说明GIF
上下左右滚动交互

scrollInteraction.gif
MJRefresh刷新加载

headerLoading.gif
HUD loading加载

hudLoading.gif
保存底部列表滚动状态

listScrollStateSave.gif
不保存底部列表滚动状态

listScrollStateNoSave.gif

使用

  • 初始化pageListView

self.pageListView = [[JXPageListView alloc] initWithDelegate:self];
  • 配置分类视图pinCategoryView

self.pageListView.pinCategoryView.titles = self.titles;
  • 成为mainTableView的代理,像使用普通UITableView一样使用它;

self.pageListView.mainTableView.dataSource = self;
self.pageListView.mainTableView.delegate = self;
  • UITableViewDataSource, UITableViewDelegate代理方法实现

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1 + “你的顶部内容section数量”;//底部的分类滚动视图需要作为最后一个section
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    if (section == 2) {
        //Tips:最后一个section(即listContainerCell所在的section)需要返回1
        return 1;
    }
    //返回你的顶部内容 row number
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    if (indexPath.section == 2) {
        //Tips:最后一个section(即listContainerCell所在的section)返回listContainerCell的高度
        return [self.pageListView getListContainerCellHeight];
    }
     //返回你的顶部内容 cell height
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    if (indexPath.section == 2) {
        //Tips:最后一个section(即listContainerCell所在的section)配置listContainerCell
        return [self.pageListView configListContainerCellAtIndexPath:indexPath];
    }
   //返回你的顶部内容 cell
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    //Tips:需要传入mainTableView的scrollViewDidScroll事件
    [self.pageListView mainTableViewDidScroll:scrollView];
}
  • JXPageViewDelegate代理方法实现

//返回底部的列表视图
- (NSArray<UIView *> *)listViewsInPageListView:(JXPageListView *)pageListView {
    return self.listViewArray;
}

至此主要的api已经实现,就集成列表底部分页视图了。更多细节及原理请查看源码。

Github地址

下载源码,一睹为快!JXPageListView

JXPagingView推荐

如果你只想找一个顶部只有少量视图(类似TableHeaderView的概念),推荐你看我的这个库:JXPagingView

JXCategoryView推荐

如果你想要支持所有主流APP分类切换效果的框架,推荐你看我的这个库,目前已经1.4k stars:JXCategoryView

作者:暴走的鑫鑫
链接:https://www.jianshu.com/p/d738fbfa6fd5