iOS開發(fā)使用UITableView制作N級下拉菜單的示例

更新時間：2018年01月23日 10:27:22 作者：冰凌天

這篇文章主要介紹了iOS開發(fā)使用UITableView制作N級下拉菜單的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

前言

demo地址: https://github.com/963527512/MultilayerMenu, 如果有更好的辦法, 請留言前段時間在做項(xiàng)目的時候, 遇到了一個N級下拉菜單的需求, 可無限層級的展開和閉合, 下面是效果圖

其中每一個UITableViewCell左右兩部分擁有不同的功能

左半部分我放了一個按鈕, 用來控制每個選項(xiàng)的選中狀態(tài)
右半部分控制菜單的展開和閉合

下面是我在做這個功能時的思路, 使用的是MVC

創(chuàng)建控制器, 并添加數(shù)據(jù)

第一步, 創(chuàng)建一個新的項(xiàng)目, 并添加幾個類

LTMenuItemViewController: 繼承自UITableViewController, 多層菜單界面

LTMenuItem: 繼承自 NSObject, 多層菜單的選項(xiàng)模型, 其中有兩個屬性

name : 選項(xiàng)的名稱
subs : 選項(xiàng)的子層級數(shù)據(jù)

#import <Foundation/Foundation.h>

@interface LTMenuItem : NSObject
/** 名字 */
@property (nonatomic, strong) NSString *name;
/** 子層 */
@property (nonatomic, strong) NSArray<LTMenuItem *> *subs;
@end

LTMenuItemCell: 繼承自: UITableViewCell, 多層菜單的選項(xiàng)cell 添加數(shù)據(jù)源文件, 存放的就是需要展示的菜單數(shù)據(jù), 項(xiàng)目中應(yīng)從網(wǎng)絡(luò)中獲取, 這里為了方便, 使用文件的形式

第二步, 在LTMenuItemViewController中, 設(shè)置tableView的數(shù)據(jù)源和cell

效果圖如下:

具體代碼如下, 其中數(shù)組轉(zhuǎn)模型使用的第三方庫 MJExtension

#import "LTMenuItemViewController.h"
#import "LTMenuItem.h"
#import "LTMenuItemCell.h"
#import <MJExtension/MJExtension.h>

@interface LTMenuItemViewController ()

/** 菜單項(xiàng) */
@property (nonatomic, strong) NSMutableArray<LTMenuItem *> *menuItems;

@end

@implementation LTMenuItemViewController

static NSString *LTMenuItemId = @"LTMenuItemCell";

- (void)viewDidLoad {
  [super viewDidLoad];
  
  [self setup];
  
  [self setupTableView];
}

- (void)didReceiveMemoryWarning {
  [super didReceiveMemoryWarning];
  // Dispose of any resources that can be recreated.
}

#pragma mark - < 基本設(shè)置 >

- (void)setup
{
  self.title = @"多級菜單";
  
  NSString *filePath = [[NSBundle mainBundle] pathForResource:@"a" ofType:@"plist"];
  NSArray *date = [NSArray arrayWithContentsOfFile:filePath];
  self.menuItems = [LTMenuItem mj_objectArrayWithKeyValuesArray:date];

  self.tableView.separatorStyle = UITableViewCellSelectionStyleNone;
  self.tableView.rowHeight = 45;
  [self.tableView registerClass:[LTMenuItemCell class] forCellReuseIdentifier:LTMenuItemId];
}

#pragma mark - Table view data source

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
  return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
  return self.menuItems.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
  LTMenuItemCell *cell = [tableView dequeueReusableCellWithIdentifier:LTMenuItemId forIndexPath:indexPath];
  cell.menuItem = self.menuItems[indexPath.row];
  return cell;
}

第三步, 設(shè)置選項(xiàng)模型, 添加輔助屬性

給 LTMenuItem 類添加幾個輔助屬性, 用于表示選中和展開閉合

isSelected : 用于表示選項(xiàng)的選中狀態(tài)
isUnfold : 用來表示本層級的展開和閉合狀態(tài)
isCanUnfold : 用于表示本層級是否能夠展開, 只有當(dāng) subs 屬性的個數(shù)不為0時, 才取值 YES
index : 表示當(dāng)前的層級, 第一層的值為0

#import <Foundation/Foundation.h>

@interface LTMenuItem : NSObject
/** 名字 */
@property (nonatomic, strong) NSString *name;
/** 子層 */
@property (nonatomic, strong) NSArray<LTMenuItem *> *subs;

#pragma mark - < 輔助屬性 >
/** 是否選中 */
@property (nonatomic, assign) BOOL isSelected;
/** 是否展開 */
@property (nonatomic, assign) BOOL isUnfold;
/** 是否能展開 */
@property (nonatomic, assign) BOOL isCanUnfold;
/** 當(dāng)前層級 */
@property (nonatomic, assign) NSInteger index;
@end

#import "LTMenuItem.h"

@implementation LTMenuItem

/**
 指定subs數(shù)組中存放LTMenuItem類型對象
 */
+ (NSDictionary *)mj_objectClassInArray
{
  return @{@"subs" : [LTMenuItem class]};
}

/**
 判斷是否能夠展開, 當(dāng)subs中有數(shù)據(jù)時才能展開
 */
- (BOOL)isCanUnfold
{
  return self.subs.count > 0;
}
@end

第四步, 設(shè)置展開閉合時, 需要顯示的數(shù)據(jù)

在控制器 LTMenuItemViewController 中, 當(dāng)前展示的數(shù)據(jù)是數(shù)組 menuItems , 此時并不好控制應(yīng)該展示在 tableView 中的數(shù)據(jù), 所以添加一個新的屬性, 用來包含需要展示的數(shù)據(jù)

@interface LTMenuItemViewController () 
/** 菜單項(xiàng) */
@property (nonatomic, strong) NSMutableArray<LTMenuItem *> *menuItems;
/** 當(dāng)前需要展示的數(shù)據(jù) */
@property (nonatomic, strong) NSMutableArray<LTMenuItem *> *latestShowMenuItems;
@end

其中 latestShowMenuItems 就是展示在tableView中的數(shù)據(jù)

使用懶加載, 創(chuàng)建 latestShowMenuItems

- (NSMutableArray<LTMenuItem *> *)latestShowMenuItems
{
  if (!_latestShowMenuItems) {
    self.latestShowMenuItems = [[NSMutableArray alloc] init];
  }
  return _latestShowMenuItems;
}

修改數(shù)據(jù)源方法, 使用 latestShowMenuItems 替換 menuItems

#pragma mark - Table view data source

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
  return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
  return self.latestShowMenuItems.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
  LTMenuItemCell *cell = [tableView dequeueReusableCellWithIdentifier:LTMenuItemId forIndexPath:indexPath];
  cell.menuItem = self.latestShowMenuItems[indexPath.row];
  return cell;
}

此時我們只需要控制 latestShowMenuItems 中包含的數(shù)據(jù), 就可以控制頁面的展示, 而 menuItems 中的數(shù)據(jù)不需要增加和減少

第五步, 控制 latestShowMenuItems 中數(shù)據(jù)的方法

現(xiàn)在, latestShowMenuItems 中沒有數(shù)據(jù), 所以界面初始化后將不會展示任何數(shù)據(jù)

我們接下來就在 latestShowMenuItems 中添加初始化界面時需要展示的數(shù)據(jù), 并設(shè)置層級為0

- (void)setupRowCount
{
  // 添加需要展示項(xiàng), 并設(shè)置層級, 初始化0
  [self setupRouCountWithMenuItems:self.menuItems index:0];
}

/**
 將需要展示的選項(xiàng)添加到latestShowMenuItems中
 */
- (void)setupRouCountWithMenuItems:(NSArray<LTMenuItem *> *)menuItems index:(NSInteger)index
{
  for (int i = 0; i < menuItems.count; i++) {
    LTMenuItem *item = menuItems[i];
    // 設(shè)置層級
    item.index = index;
    // 將選項(xiàng)添加到數(shù)組中
    [self.latestShowMenuItems addObject:item];
  }
}

第六步, 通過tableView代理中cell的點(diǎn)擊方法, 處理菜單的展開閉合操作

通過 - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath 方法, 處理菜單的展開閉合操作

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
  // 取出點(diǎn)擊的選項(xiàng)
  LTMenuItem *menuItem = self.latestShowMenuItems[indexPath.row];
  // 判斷是否能夠展開, 不能展開立即返回, 不錯任何處理
  if (!menuItem.isCanUnfold) return;
  // 設(shè)置展開閉合
  menuItem.isUnfold = !menuItem.isUnfold;
  // 刷新列表
  [self.tableView reloadData];
}

在這里, 根據(jù)被點(diǎn)擊數(shù)據(jù)能否展開, 修改了對應(yīng)的 isUnfold 屬性, 并刷新界面

但此時由于 latestShowMenuItems 中數(shù)據(jù)沒有數(shù)量變化, 所以子層級并不能顯示出來

所以我們需要對 latestShowMenuItems 中的數(shù)據(jù)進(jìn)行修改

我們在這里修改第五步中的兩個方法, 如下所示

#pragma mark - < 添加可以展示的選項(xiàng) >

- (void)setupRowCount
{
  // 清空當(dāng)前所有展示項(xiàng)
  [self.latestShowMenuItems removeAllObjects];
  
  // 重新添加需要展示項(xiàng), 并設(shè)置層級, 初始化0
  [self setupRouCountWithMenuItems:self.menuItems index:0];
}

/**
 將需要展示的選項(xiàng)添加到latestShowMenuItems中, 此方法使用遞歸添加所有需要展示的層級到latestShowMenuItems中

 @param menuItems 需要添加到latestShowMenuItems中的數(shù)據(jù)
 @param index 層級, 即當(dāng)前添加的數(shù)據(jù)屬于第幾層
 */
- (void)setupRouCountWithMenuItems:(NSArray<LTMenuItem *> *)menuItems index:(NSInteger)index
{
  for (int i = 0; i < menuItems.count; i++) {
    LTMenuItem *item = menuItems[i];
    // 設(shè)置層級
    item.index = index;
    // 將選項(xiàng)添加到數(shù)組中
    [self.latestShowMenuItems addObject:item];
    // 判斷該選項(xiàng)的是否能展開, 并且已經(jīng)需要展開
    if (item.isCanUnfold && item.isUnfold) {
      // 當(dāng)需要展開子集的時候, 添加子集到數(shù)組, 并設(shè)置子集層級
      [self setupRouCountWithMenuItems:item.subs index:index + 1];
    }
  }
}

在一開始, 先清空 latestShowMenuItems 中的數(shù)據(jù), 然后添加第一層數(shù)據(jù)

在添加第一層數(shù)據(jù)的時候, 對每一個數(shù)據(jù)進(jìn)行判斷, 判斷是否能展開, 并且是否已經(jīng)展開

如果展開, 添加子類到數(shù)組, 這里用遞歸層層遞進(jìn), 最后將每一層子類展開的數(shù)據(jù)全部添加到 latestShowMenuItems 中, 同時設(shè)置了每一層數(shù)據(jù)的層級屬性 index

此時 - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath 方法, 需要做如下修改

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
  // 取出點(diǎn)擊的選項(xiàng)
  LTMenuItem *menuItem = self.latestShowMenuItems[indexPath.row];
  // 判斷是否能夠展開, 不能展開立即返回, 不錯任何處理
  if (!menuItem.isCanUnfold) return;
  // 設(shè)置展開閉合
  menuItem.isUnfold = !menuItem.isUnfold;
  // 修改latestShowMenuItems中數(shù)據(jù)
  [self setupRowCount];
  // 刷新列表
  [self.tableView reloadData];
}

這時, 我們已經(jīng)可以看到界面上有如下效果

第七步, 添加展開閉合的伸縮動畫效果

首先添加一個屬性 oldShowMenuItems , 用來記錄改變前 latestShowMenuItems 中的數(shù)據(jù)

@interface LTMenuItemViewController ()
/** 菜單項(xiàng) */
@property (nonatomic, strong) NSMutableArray<LTMenuItem *> *menuItems;
/** 當(dāng)前需要展示的數(shù)據(jù) */
@property (nonatomic, strong) NSMutableArray<LTMenuItem *> *latestShowMenuItems;
/** 以前需要展示的數(shù)據(jù) */
@property (nonatomic, strong) NSMutableArray<LTMenuItem *> *oldShowMenuItems;
@end

修改 - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath 方法, 添加展開動畫效果

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
  LTMenuItem *menuItem = self.latestShowMenuItems[indexPath.row];
  if (!menuItem.isCanUnfold) return;
  
  // 記錄改變之前的數(shù)據(jù)
  self.oldShowMenuItems = [NSMutableArray arrayWithArray:self.latestShowMenuItems];
  
  // 設(shè)置展開閉合
  menuItem.isUnfold = !menuItem.isUnfold;
  // 更新被點(diǎn)擊cell的箭頭指向
  [self.tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:(UITableViewRowAnimationAutomatic)];
  
  // 設(shè)置需要展開的新數(shù)據(jù)
  [self setupRowCount];
  
  // 判斷老數(shù)據(jù)和新數(shù)據(jù)的數(shù)量, 來進(jìn)行展開和閉合動畫
  // 定義一個數(shù)組, 用于存放需要展開閉合的indexPath
  NSMutableArray<NSIndexPath *> *indexPaths = @[].mutableCopy;
  
  // 如果 老數(shù)據(jù) 比 新數(shù)據(jù) 多, 那么就需要進(jìn)行閉合操作
  if (self.oldShowMenuItems.count > self.latestShowMenuItems.count) {
    // 遍歷oldShowMenuItems, 找出多余的老數(shù)據(jù)對應(yīng)的indexPath
    for (int i = 0; i < self.oldShowMenuItems.count; i++) {
      // 當(dāng)新數(shù)據(jù)中 沒有對應(yīng)的item時
      if (![self.latestShowMenuItems containsObject:self.oldShowMenuItems[i]]) {
        NSIndexPath *subIndexPath = [NSIndexPath indexPathForRow:i inSection:indexPath.section];
        [indexPaths addObject:subIndexPath];
      }
    }
    // 移除找到的多余indexPath
    [self.tableView deleteRowsAtIndexPaths:indexPaths withRowAnimation:(UITableViewRowAnimationTop)];
  }else {
    // 此時 新數(shù)據(jù) 比 老數(shù)據(jù) 多, 進(jìn)行展開操作
    // 遍歷 latestShowMenuItems, 找出 oldShowMenuItems 中沒有的選項(xiàng), 就是需要新增的indexPath
    for (int i = 0; i < self.latestShowMenuItems.count; i++) {
      if (![self.oldShowMenuItems containsObject:self.latestShowMenuItems[i]]) {
        NSIndexPath *subIndexPath = [NSIndexPath indexPathForRow:i inSection:indexPath.section];
        [indexPaths addObject:subIndexPath];
      }
    }
    // 插入找到新添加的indexPath
    [self.tableView insertRowsAtIndexPaths:indexPaths withRowAnimation:(UITableViewRowAnimationTop)];
  }
}

通過判斷新老數(shù)據(jù)的數(shù)量, 已經(jīng)對應(yīng)的位置, 進(jìn)行刪除和插入操作, 就可以添加對應(yīng)的動畫效果

此時, 效果如下:

第八步, 選項(xiàng)的選中效果

我在cell的左半部分添加了一個半個cell寬的透明按鈕, 并設(shè)置了一個代理方法

當(dāng)點(diǎn)擊透明按鈕時, 調(diào)用代理方法, 修改cell對應(yīng)的 LTMenuItem 中 isSelected 的值, 來控制選中狀態(tài)

在控制器中指定代理, 并實(shí)現(xiàn)代理方法

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
  LTMenuItemCell *cell = [tableView dequeueReusableCellWithIdentifier:LTMenuItemId forIndexPath:indexPath];
  cell.menuItem = self.latestShowMenuItems[indexPath.row];
  cell.delegate = self;
  return cell;
}

#pragma mark - < LTMenuItemCellDelegate >

- (void)cell:(LTMenuItemCell *)cell didSelectedBtn:(UIButton *)sender
{
  cell.menuItem.isSelected = !cell.menuItem.isSelected;
  [self.tableView reloadData];
}

效果如下:

第九步, 使用遞歸進(jìn)行全選和反選操作

首先我們在導(dǎo)航條右側(cè)添加 全選 按鈕, 并實(shí)現(xiàn)對應(yīng)的點(diǎn)擊方法

#pragma mark - < 點(diǎn)擊事件 >

- (void)allBtnClick:(UIButton *)sender
{
  sender.selected = !sender.selected;
  
  [self selected:sender.selected menuItems:self.menuItems];
}


/**
 取消或選擇, 某一數(shù)值中所有的選項(xiàng), 包括子層級

 @param selected 是否選中
 @param menuItems 選項(xiàng)數(shù)組
 */
- (void)selected:(BOOL)selected menuItems:(NSArray<LTMenuItem *> *)menuItems
{
  for (int i = 0; i < menuItems.count; i++) {
    LTMenuItem *menuItem = menuItems[i];
    menuItem.isSelected = selected;
    if (menuItem.isCanUnfold) {
      [self selected:selected menuItems:menuItem.subs];
    }
  }
  [self.tableView reloadData];
}

上述的第二個方法, 就是修改對應(yīng)數(shù)組中所有的數(shù)據(jù)及子集的選中狀態(tài)

同時修改該cell的代理方法 - (void)cell:(LTMenuItemCell *)cell didSelectedBtn:(UIButton *)sender 的實(shí)現(xiàn)

#pragma mark - < LTMenuItemCellDelegate >

- (void)cell:(LTMenuItemCell *)cell didSelectedBtn:(UIButton *)sender
{
  cell.menuItem.isSelected = !cell.menuItem.isSelected;
  // 修改按鈕狀態(tài)
  self.allBtn.selected = NO;
  [self.tableView reloadData];
}

最終效果如下:

第十步, 使用已選擇數(shù)據(jù)

這里主要是拿到所有已經(jīng)選中的數(shù)據(jù), 并進(jìn)行操作

我只進(jìn)行了打印操作, 如果需要, 可以自己修改

首先添加一個屬性 selectedMenuItems , 用于存儲已選數(shù)據(jù)

然后通過下列代碼可以獲取所有已經(jīng)選中的數(shù)據(jù)

@interface LTMenuItemViewController () <LTMenuItemCellDelegate>
/** 菜單項(xiàng) */
@property (nonatomic, strong) NSMutableArray<LTMenuItem *> *menuItems;
/** 當(dāng)前需要展示的數(shù)據(jù) */
@property (nonatomic, strong) NSMutableArray<LTMenuItem *> *latestShowMenuItems;
/** 以前需要展示的數(shù)據(jù) */
@property (nonatomic, strong) NSMutableArray<LTMenuItem *> *oldShowMenuItems;
/** 已經(jīng)選中的選項(xiàng), 可用于回調(diào) */
@property (nonatomic, strong) NSMutableArray<LTMenuItem *> *selectedMenuItems;
/** 全選按鈕 */
@property (nonatomic, strong) UIButton *allBtn;
@end

#pragma mark - < 選中數(shù)據(jù) >

- (void)printSelectedMenuItems:(UIButton *)sender
{
  [self.selectedMenuItems removeAllObjects];
  [self departmentsWithMenuItems:self.menuItems];
  NSLog(@"這里是全部選中數(shù)據(jù)\n%@", self.selectedMenuItems);
}

/**
 獲取選中數(shù)據(jù)
 */
- (void)departmentsWithMenuItems:(NSArray<LTMenuItem *> *)menuItems
{
  for (int i = 0; i < menuItems.count; i++) {
    LTMenuItem *menuItem = menuItems[i];
    if (menuItem.isSelected) {
      [self.selectedMenuItems addObject:menuItem];
    }
    if (menuItem.subs.count) {
      [self departmentsWithMenuItems:menuItem.subs];
    }
  }
}

通過遞歸, 一層層拿到所有已經(jīng)選擇的選項(xiàng), 并進(jìn)行打印操作

如果需要另外處理拿到的數(shù)據(jù) 只需要修改 printSelectedMenuItems 方法中的 NSLog(@"這里是全部選中數(shù)據(jù)\n%@", self.selectedMenuItems); 即可

demo地址: https://github.com/963527512/MultilayerMenu

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

您可能感興趣的文章: