簡(jiǎn)介

引用大佬們說(shuō)的話：“所謂流量就是用戶的注意力”。引起了用戶的注意才能延長(zhǎng)使用APP的時(shí)長(zhǎng)，才能有機(jī)會(huì)引流到核心模塊，才能提升日活，才能提高廣告及其它收入，才能提高程序員我們的薪資。

所以，作為開(kāi)發(fā)APP的相關(guān)人員：產(chǎn)品經(jīng)理、開(kāi)發(fā)、測(cè)試等，要盡全力保證產(chǎn)品的易用性、流暢性、穩(wěn)定性等。

比如對(duì)于主流的首頁(yè)設(shè)計(jì)，現(xiàn)在就有一種新的設(shè)計(jì)方式。列表上部分是熱門(mén)內(nèi)容，滾動(dòng)到最下面就是分類(lèi)的推薦內(nèi)容。下圖可以直觀的表達(dá)：

scrollInteraction.gif

正所謂“沒(méi)有對(duì)比就沒(méi)有傷害”，我們?cè)賮?lái)看看舊版本設(shè)計(jì)，如下圖：

normalLayout.gif

先來(lái)吐槽一下舊版本設(shè)計(jì)：

• “熱門(mén)”指示title放在了導(dǎo)航欄上面，用戶不一定看得到，所以點(diǎn)擊切換或滾動(dòng)切換的概率就很低。（而且有些APP居然沒(méi)有滾動(dòng)切換，只能點(diǎn)擊最上面的title切換，轉(zhuǎn)換率就更低了?。?/li>
• “熱門(mén)”頁(yè)面的分類(lèi)視圖與導(dǎo)航欄的分類(lèi)視圖同時(shí)出現(xiàn)，增加了用戶的理解成本。小白用戶左右滾動(dòng)可能都不知道自己在滾動(dòng)哪個(gè)視圖。

再在表?yè)P(yáng)一下新版本設(shè)計(jì)：

• 用戶看熱門(mén)往下滾動(dòng)，滾動(dòng)底部，自然而然就是分類(lèi)推薦視圖。當(dāng)前的用戶行為沒(méi)有被打斷（不需要用戶思考想去看熱門(mén)，再點(diǎn)擊或滾動(dòng)切換到熱門(mén)，而是默認(rèn)展示給用戶，用戶的思路一直處于一個(gè)瀏覽模式，沒(méi)有操作的思考）。用戶的注意力沒(méi)有被分散，然后分類(lèi)推薦的文章，大家應(yīng)該都知道標(biāo)題都很沖擊（比如說(shuō)“美女直播后忘記關(guān)攝像頭，這畫(huà)面太....”，“喬丹是最佳得分后衛(wèi)？他可能不會(huì)答應(yīng)！”，再配上一定的美圖），面對(duì)這些“誘惑”用戶大概率忍不住就點(diǎn)進(jìn)去了，然后就被各種標(biāo)題吸引，咱們的日使用時(shí)間就蹭蹭往上漲了。

綜上所述，許多APP都采用了這種設(shè)計(jì)。有代表性的是：閑魚(yú)首頁(yè)、京東我的頁(yè)面、轉(zhuǎn)轉(zhuǎn)首頁(yè)、中央天氣預(yù)報(bào)首頁(yè)等。當(dāng)然你的產(chǎn)品經(jīng)理，也會(huì)慢慢跟風(fēng)采用該設(shè)計(jì)的。

Github地址

下載源碼，一睹為快！JXPageListView

好了，下面來(lái)看看JXPageListView的效果。

效果預(yù)覽

說(shuō)明	GIF
上下左右滾動(dòng)交互	scrollInteraction.gif
MJRefresh刷新加載	headerLoading.gif
HUD loading加載	hudLoading.gif
保存底部列表滾動(dòng)狀態(tài)	listScrollStateSave.gif
不保存底部列表滾動(dòng)狀態(tài)	listScrollStateNoSave.gif

使用

• 初始化pageListView

self.pageListView = [[JXPageListView alloc] initWithDelegate:self];

• 配置分類(lèi)視圖pinCategoryView

self.pageListView.pinCategoryView.titles = self.titles;

• 成為mainTableView的代理，像使用普通UITableView一樣使用它；

self.pageListView.mainTableView.dataSource = self;
self.pageListView.mainTableView.delegate = self;

• UITableViewDataSource, UITableViewDelegate代理方法實(shí)現(xiàn)

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1 + “你的頂部?jī)?nèi)容section數(shù)量”;//底部的分類(lèi)滾動(dòng)視圖需要作為最后一個(gè)section
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    if (section == 2) {
        //Tips:最后一個(gè)section（即listContainerCell所在的section）需要返回1
        return 1;
    }
    //返回你的頂部?jī)?nèi)容 row number
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    if (indexPath.section == 2) {
        //Tips:最后一個(gè)section（即listContainerCell所在的section）返回listContainerCell的高度
        return [self.pageListView getListContainerCellHeight];
    }
     //返回你的頂部?jī)?nèi)容 cell height
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    if (indexPath.section == 2) {
        //Tips:最后一個(gè)section（即listContainerCell所在的section）配置listContainerCell
        return [self.pageListView configListContainerCellAtIndexPath:indexPath];
    }
   //返回你的頂部?jī)?nèi)容 cell
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    //Tips:需要傳入mainTableView的scrollViewDidScroll事件
    [self.pageListView mainTableViewDidScroll:scrollView];
}

• JXPageViewDelegate代理方法實(shí)現(xiàn)

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

至此主要的api已經(jīng)實(shí)現(xiàn)，就集成列表底部分頁(yè)視圖了。更多細(xì)節(jié)及原理請(qǐng)查看源碼。

Github地址

下載源碼，一睹為快！JXPageListView

JXPagingView推薦

如果你只想找一個(gè)頂部只有少量視圖（類(lèi)似TableHeaderView的概念），推薦你看我的這個(gè)庫(kù)：JXPagingView

JXCategoryView推薦

如果你想要支持所有主流APP分類(lèi)切換效果的框架，推薦你看我的這個(gè)庫(kù)，目前已經(jīng)1.4k stars：JXCategoryView