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

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

基本UI布局思路：

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

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

需要注意及處理的點(diǎn)有：

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

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

3.cell的展開(kāi)收起我們通過(guò)cell 的高度變化實(shí)現(xiàn)

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

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

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

（1）首先獲取到左邊的tableview所需的數(shù)據(jù)及第一行對(duì)應(yīng)的右邊的數(shù)據(jù)
（2）其它c(diǎn)ell對(duì)應(yīng)的右邊的數(shù)據(jù)我們?cè)趖ableView didSelectRowAtIndexPath 方法中請(qǐng)求獲得
（3）默認(rèn)選中第一行

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

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

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

2.cell的彈開(kāi)和收起

在效果圖中可以看到點(diǎn)擊tableview的區(qū)的headerview，對(duì)應(yīng)區(qū)的row會(huì)彈開(kāi)收起。

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

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

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

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

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

-(void)sectionClick:(UITapGestureRecognizer *)tap{
//根據(jù)tag值獲取點(diǎn)擊的區(qū)
  int index = tap.view.tag%100;
//創(chuàng)建可變數(shù)據(jù)，存儲(chǔ)所點(diǎn)擊的區(qū)的所有行的indexpath，tableview刷新區(qū)對(duì)應(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];
  }
  //展開(kāi)
  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;
    }

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

最新評(píng)論