快捷導(dǎo)航

iOS 實(shí)現(xiàn)類似QQ分組樣式的兩種方式

更新時(shí)間：2017年07月18日 16:14:03 作者：USimpleLife

這篇文章主要介紹了iOS 實(shí)現(xiàn)類似QQ分組樣式的兩種方式,思路很簡(jiǎn)單，對(duì)模型數(shù)據(jù)操作或則控制界面顯示，需要的朋友可以參考下

思路

思路很簡(jiǎn)單，對(duì)模型數(shù)據(jù)操作或則控制界面顯示

先看下json部分?jǐn)?shù)據(jù)

"chapterDtoList": [{
      "token": null,
      "id": 1295,
      "chapterName": "第一章",
      "parentId": 0,
      "chapterLevel": 0,
      "attachmentUrl": "",
      "description": null,
      "startDateTimestamp": null,
      "endDateTimestamp": null,
      "startDate": 1490889600000,
      "endDate": 1491062400000,
      "browseCount": 0,
      "workId": null,
      "chapterStatus": 3,
      "hadRead": 0,
      "subChapterList": [{
        "token": null,
        "id": 1296,
        "chapterName": "第一節(jié)",
        "parentId": 1295,
        "chapterLevel": 1,
        "attachmentUrl": "",
        "description": null,
        "startDateTimestamp": null,
        "endDateTimestamp": null,
        "startDate": null,
        "endDate": null,
        "browseCount": 0,
        "workId": null,
        "chapterStatus": null,
        "hadRead": 0,
        "subChapterList": [],
        "classUserReadInfo": []
      },

這種數(shù)據(jù)對(duì)應(yīng)的一般都是個(gè)tableView，然后根據(jù)章節(jié)分開(kāi)，最終界面如下：

分析

這里采用UITableViewStylePlain樣式，chapterDtoList對(duì)應(yīng)章，subChapterList對(duì)應(yīng)節(jié)。章的話我們使用headerView來(lái)做，節(jié)的話我們使用cell來(lái)做。然后只需要給headerView添加一個(gè)點(diǎn)擊手勢(shì)，點(diǎn)擊的時(shí)候給對(duì)應(yīng)的模型添加標(biāo)識(shí)，從而去控制章節(jié)的收合。

方法一：

對(duì)模型數(shù)組進(jìn)行操作，我們可以將返回的json數(shù)據(jù)轉(zhuǎn)化為兩個(gè)模型數(shù)組chapterListArray和tempChapterListArray，通過(guò)控制subChapterList的count來(lái)實(shí)現(xiàn)。界面的模型數(shù)據(jù)統(tǒng)一使用tempChapterListArray，展開(kāi)與合并就等價(jià)于是否將“章數(shù)組“中的”節(jié)數(shù)組“賦值為nil

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
  YJTOnlineTaskDetailModel *onlineTaskDetailModel = self.tempChapterListArray[section];
  return onlineTaskDetailModel.subChapterList.count;
}
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
  YJTOnlineChapeterCell *headerView = [tableView dequeueReusableCellWithIdentifier:onlineChapeterCell];
  YJTOnlineTaskDetailModel *onlineTaskDetailModel = self.chapterListArray[section];
  headerView.backgroundColor = [UIColor whiteColor];
  headerView.onlineTaskDetailModel = onlineTaskDetailModel;
  if (section == 0) {
    headerView.tipsLableHeight.constant = 30;
  }else {
    headerView.tipsLableHeight.constant = 0;
  }
  [headerView whenTapWithBlock:^{
    onlineTaskDetailModel.isSelected = !onlineTaskDetailModel.isSelected;
    YJTOnlineTaskDetailModel *detailModel = self.tempChapterListArray[section];
    if (detailModel.subChapterList == nil) {
      detailModel.subChapterList = onlineTaskDetailModel.subChapterList;
    }else {
      detailModel.subChapterList = nil;
    }
    [self.tableView reloadData];
  }];
  return headerView;
}

方法二：

上面的方法是通過(guò)控制模型數(shù)組來(lái)實(shí)現(xiàn)的，我們也可以采用控制界面的顯示，從而達(dá)到我們的要求。既然我們?cè)邳c(diǎn)擊HeadView的時(shí)候已經(jīng)標(biāo)記過(guò)對(duì)應(yīng)的模型數(shù)據(jù)是否展開(kāi)，那么我們完全可以通過(guò)控制界面對(duì)應(yīng)分組的個(gè)數(shù)來(lái)實(shí)現(xiàn)。當(dāng)然也可以通過(guò)控制rowHeight來(lái)到達(dá)效果。相比之下，該方法簡(jiǎn)單明了些。

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
  YJTOnlineTaskDetailModel *onlineTaskDetailModel = self.chapterListArray[section];
  return onlineTaskDetailModel.isSelected ? onlineTaskDetailModel.subChapterList.count : 0;
}
 [headerView whenTapWithBlock:^{
    onlineTaskDetailModel.isSelected = !onlineTaskDetailModel.isSelected;
    [self.tableView reloadData];
  }];

總結(jié)

以上所述是小編給大家介紹的iOS 實(shí)現(xiàn)類似QQ分組樣式的兩種方式，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: