简介
引用大佬们说的话：“所谓流量就是用户的注意力”。引起了用户的注意才能延长使用APP的时长，才能有机会引流到核心模块，才能提升日活，才能提高广告及其它收入，才能提高程序员我们的薪资。
所以，作为开发APP的相关人员：产品经理、开发、测试等，要尽全力保证产品的易用性、流畅性、稳定性等。
比如对于主流的首页设计，现在就有一种新的设计方式。列表上部分是热门内容，滚动到最下面就是分类的推荐内容。下图可以直观的表达：
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<JXPageListViewListDelegate> *> *)listViewsInPageListView:(JXPageListView *)pageListView {
return self.listViewArray;
}
至此主要的api已经实现，就集成列表底部分页视图了。更多细节及原理请查看源码。
Github地址
下载源码，一睹为快！JXPageListView
JXPagingView推荐
如果你只想找一个顶部只有少量视图（类似TableHeaderView的概念），推荐你看我的这个库：JXPagingView
JXCategoryView推荐
如果你想要支持所有主流APP分类切换效果的框架，推荐你看我的这个库，目前已经1.4k stars：JXCategoryView
网友评论