在開發(fā)中 UITableView 是最常見的布局控件，除了我們熟知的一些使用方式，也有另一些相對常見但不常用的使用方式值得我們去了解，本篇文章只針對其中一種常見的使用方式作簡單介紹。

廢話不多說，先上效果圖：

tableView 另類簡單使用效果圖

以上效果樣式可以說在我們手機中的 app 上非常常見，其實要做這種效果也非常簡單，只需要會使用 UITableView 即可。

一、分析

在效果圖中，我們可以看到當我每點擊一個 cell，會產(chǎn)生兩個結果：

1. cell 的標題變成紅色
2. 點擊的 cell 會展開顯示詳細信息

因此，我們在實現(xiàn)業(yè)務邏輯時就要考慮到這兩個方面的具體實現(xiàn)。

二、具體實現(xiàn)

• 首先利用 UITableView 搭建主界面，這里就不贅述了，相信大家應該都會

• 其次對于每一個 cell 的內容，我們可以采用自定義 cell 的方式

  • 對于每一個標題和詳細信息，我們都可以看成是同一個 cell，只有我們點擊的時候才顯示詳細信息的內容，不點擊時則不顯示
  自定義的 cell
  • 這里我們可以采用控制 cell 高度的方式來實現(xiàn)詳細信息是否顯示的問題，當不顯示時設置 cell 的高度為正常的 44，超出部分不顯示；當需要顯示詳細信息的時候設置 cell 的高度為真實高度

• 代碼實現(xiàn)

  /** 選中 cell 時調用 */
  - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
      
      self.selCell = [tableView cellForRowAtIndexPath:indexPath];
      
      /** 業(yè)務邏輯 */
      self.isOpen = !self.isOpen;
      /** 標題初始文字顏色 */
      self.selCell.titleL.textColor = [UIColor blackColor];
      
      if (self.curRow != indexPath.row) {
          self.isOpen = YES;
          /** cell 展開時標題設置為紅色 */
          self.selCell.titleL.textColor = [UIColor redColor];
      }
      self.curRow = indexPath.row;
      
      /** 刷新tableView，系統(tǒng)默認會有一個自帶的動畫 */
      [tableView beginUpdates];
      [tableView endUpdates];
  }
  
  /** 取消選中 cell 時調用 */
  - (void)tableView:(UITableView *)tableView didDeselectRowAtIndexPath:(NSIndexPath *)indexPath {
      
      /** 取消選中時，cell 處于關閉狀態(tài)，標題改為初始黑色 */
      self.selCell.titleL.textColor = [UIColor blackColor];
  }
  
  /** 設置 cell 的高度 */
  - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
      
      /** 判斷記錄的行號是否為當前點擊行 且 是否處于展開狀態(tài) */
      return self.curRow == indexPath.row && self.isOpen ? 150 : 44;
  }
  
  

經(jīng)過以上步驟已經(jīng)基本實現(xiàn)了我們需要的效果，如果有疑問可以參考效果源碼進行查看。

源碼地址：https://github.com/BWLi420/BWTableView_SimpleUse