iOS:高仿閒魚、京東等列表底部分頁檢視
簡介
引用大佬們說的話：“所謂流量就是使用者的注意力”。引起了使用者的注意才能延長使用APP的時長，才能有機會引流到核心模組，才能提升日活，才能提高廣告及其它收入，才能提高程式員我們的薪資。
所以，作為開發APP的相關人員：產品經理、開發、測試等，要盡全力保證產品的易用性、流暢性、穩定性等。
比如對於主流的首頁設計，現在就有一種新的設計方式。列表上部分是熱門內容，滾動到最下面就是分類的推薦內容。下圖可以直觀的表達：
scrollInteraction.gif
正所謂“沒有對比就沒有傷害”，我們再來看看舊版本設計，如下圖：
normalLayout.gif
先來吐槽一下舊版本設計：
- “熱門”指示title放在了導航欄上面，使用者不一定看得到，所以點選切換或滾動切換的概率就很低。（而且有些APP居然沒有滾動切換，只能點選最上面的title切換，轉換率就更低了！）
- “熱門”頁面的分類檢視與導航欄的分類檢視同時出現，增加了使用者的理解成本。小白使用者左右滾動可能都不知道自己在滾動哪個檢視。
再在表揚一下新版本設計：
- 使用者看熱門往下滾動，滾動底部，自然而然就是分類推薦檢視。當前的使用者行為沒有被打斷（不需要使用者思考想去看熱門，再點選或滾動切換到熱門，而是預設展示給使用者，使用者的思路一直處於一個瀏覽模式，沒有操作的思考）。使用者的注意力沒有被分散，然後分類推薦的文章，大家應該都知道標題都很衝擊（比如說“美女直播後忘記關攝像頭，這畫面太....”，“喬丹是最佳得分後衛？他可能不會答應！”，再配上一定的美圖），面對這些“誘惑”使用者大概率忍不住就點進去了，然後就被各種標題吸引，咱們的日使用時間就蹭蹭往上漲了。
綜上所述，許多APP都採用了這種設計。有代表性的是：閒魚首頁、京東我的頁面、轉轉首頁、中央天氣預報首頁等。當然你的產品經理，也會慢慢跟風采用該設計的。
Github地址
下載原始碼，一睹為快！ ListView" target="_blank" rel="nofollow,noindex">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