最近又做了一個項目，涉及到二級菜單及cell的展開收起，這是我所做過的第三個項目中做這個功能了，我當(dāng)然不能把公司的項目界面show出來，所以我重新創(chuàng)建一個工程，數(shù)據(jù)都寫的是固定的數(shù)據(jù)。作為總結(jié)，記錄實現(xiàn)過程，及要注意的一些點：如進(jìn)來默認(rèn)選中第一行，數(shù)據(jù)優(yōu)化等。

先看看我們實現(xiàn)的效果：

基本UI布局思路：

1.將view分為左右兩部分，左,右分別是一個tableView

2.點擊左邊的cell時候，刷新右邊的數(shù)據(jù)

需要注意及處理的點有：

1.默認(rèn)進(jìn)來界面顯示左邊選中第一行，及對應(yīng)右邊的數(shù)據(jù)

2.每次點擊左邊的cell，右邊都需要刷新數(shù)據(jù)，如果每次點擊左邊都要請求一次數(shù)據(jù)，那么會很消耗用戶的流量

3.cell的展開收起我們通過cell 的高度變化實現(xiàn)

在這里主要羅列需要注意的那三點，功能的全部實現(xiàn)我已經(jīng)提交到github，需要的伙伴，可以去下載https://github.com/mumuna/AboutCell

首先說明，一般類似這樣的布局，后臺提供接口，左邊的tableview的數(shù)據(jù)源會是一個接口，左邊的tableview的每個cell對應(yīng)的右邊的數(shù)據(jù)也是一個接口，但是不同的cell需要傳入id請求獲取對應(yīng)的數(shù)據(jù)，這樣每點擊一個左邊的cell就需要請求一次右邊的數(shù)據(jù)。

1.初次進(jìn)入界面默認(rèn)顯示左邊第一行及對應(yīng)的右邊的數(shù)據(jù)，及數(shù)據(jù)優(yōu)化

（1）首先獲取到左邊的tableview所需的數(shù)據(jù)及第一行對應(yīng)的右邊的數(shù)據(jù)
（2）其它cell對應(yīng)的右邊的數(shù)據(jù)我們在tableView didSelectRowAtIndexPath 方法中請求獲得
（3）默認(rèn)選中第一行

 //默認(rèn)選中第一行
  NSIndexPath *ip=[NSIndexPath indexPathForRow:0 inSection:0];
  [leftTable selectRowAtIndexPath:ip animated:YES scrollPosition:UITableViewScrollPositionBottom];

（4）在tableView didSelectRowAtIndexPath 方法中，根據(jù)點擊的左邊的cell，請求右邊的數(shù)據(jù)。我們不能每次點擊都請求一次，這樣很耗費用戶的流量。

我們需要把右邊的數(shù)據(jù)放在可變數(shù)組里arr，全部初始化arr = [NSMutable array];，每次點擊，先判斷arr.count ==0 ,如果！＝0 再去請求數(shù)據(jù)，然后reload data。

2.cell的彈開和收起

在效果圖中可以看到點擊tableview的區(qū)的headerview，對應(yīng)區(qū)的row會彈開收起。

（1）我們在獲取數(shù)據(jù)的時候，創(chuàng)建一個數(shù)組，給每個區(qū)的headerview一個標(biāo)志“0”，即默認(rèn)為收起

//specificaArr是效果圖中左邊的cell英國，對應(yīng)的右邊的數(shù)據(jù)源
//flagArr是左邊對每個區(qū)的標(biāo)識
for (int i = 0; i<specificArr.count; i++) {
    [flagArr addObject:@"0"];
          }

（2）給headerview添加一個手勢，且給headerview一個tag值方便在手勢響應(yīng)事件中知道我們具體點擊的是哪個區(qū)

    view.tag = 100+section;
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(sectionClick:)];
    [view addGestureRecognizer:tap];

（3）在手勢響應(yīng)事件中根據(jù)headerview的標(biāo)識選擇展開還是收起row，且改變標(biāo)識

-(void)sectionClick:(UITapGestureRecognizer *)tap{
//根據(jù)tag值獲取點擊的區(qū)
  int index = tap.view.tag%100;
//創(chuàng)建可變數(shù)據(jù)，存儲所點擊的區(qū)的所有行的indexpath，tableview刷新區(qū)對應(yīng)的行，重新設(shè)置行高
  NSMutableArray *indexArray = [[NSMutableArray alloc]init];
  NSArray *arr = specificArr[index];
  for (int i = 0; i<arr.count; i++) {
    NSIndexPath *path = [NSIndexPath indexPathForRow:i inSection:index];
    [indexArray addObject:path];
  }
  //展開
  if ([flagArr[index] isEqualToString:@"0"]) {
    [flagArr replaceObjectAtIndex:index withObject:@"1"];
    [specificTable reloadRowsAtIndexPaths:indexArray withRowAnimation:UITableViewRowAnimationBottom];
  }else{
    [flagArr replaceObjectAtIndex:index withObject:@"0"];
    [specificTable reloadRowsAtIndexPaths:indexArray withRowAnimation:UITableViewRowAnimationBottom];
  }
}

（4）在tableView heightForRowAtIndexPath方法中設(shè)置tableview的高度

 if ([flagArr[indexPath.section] isEqualToString:@"0"]) {
      return 0;
    }else{
      return 96;
    }

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論