前言
demo地址: https://github.com/963527512/MultilayerMenu, 如果有更好的辦法, 請留言 前段時間在做項目的時候, 遇到了一個N級下拉菜單的需求, 可無限層級的展開和閉合, 下面是效果圖
其中每一個UITableViewCell左右兩部分擁有不同的功能
下面是我在做這個功能時的思路, 使用的是MVC
創建控制器, 并添加數據
第一步, 創建一個新的項目, 并添加幾個類
LTMenuItemViewController: 繼承自UITableViewController, 多層菜單界面
LTMenuItem: 繼承自 NSObject, 多層菜單的選項模型, 其中有兩個屬性
name : 選項的名稱subs : 選項的子層級數據#import <Foundation/Foundation.h>@interface LTMenuItem : NSObject/** 名字 */@property (nonatomic, strong) NSString *name;/** 子層 */@property (nonatomic, strong) NSArray<LTMenuItem *> *subs;@end
LTMenuItemCell: 繼承自: UITableViewCell, 多層菜單的選項cell 添加數據源文件, 存放的就是需要展示的菜單數據, 項目中應從網絡中獲取, 這里為了方便, 使用文件的形式
第二步, 在LTMenuItemViewController中, 設置tableView的數據源和cell
效果圖如下:
具體代碼如下, 其中數組轉模型使用的第三方庫 MJExtension
#import "LTMenuItemViewController.h"#import "LTMenuItem.h"#import "LTMenuItemCell.h"#import <MJExtension/MJExtension.h>@interface LTMenuItemViewController ()/** 菜單項 */@property (nonatomic, strong) NSMutableArray<LTMenuItem *> *menuItems;@end@implementation LTMenuItemViewControllerstatic 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 - < 基本設置 >- (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;}第三步, 設置選項模型, 添加輔助屬性
給 LTMenuItem 類添加幾個輔助屬性, 用于表示選中和展開閉合
isSelected : 用于表示選項的選中狀態isUnfold : 用來表示本層級的展開和閉合狀態isCanUnfold : 用于表示本層級是否能夠展開, 只有當 subs 屬性的個數不為0時, 才取值 YESindex : 表示當前的層級, 第一層的值為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;/** 當前層級 */@property (nonatomic, assign) NSInteger index;@end
#import "LTMenuItem.h"@implementation LTMenuItem/** 指定subs數組中存放LTMenuItem類型對象 */+ (NSDictionary *)mj_objectClassInArray{ return @{@"subs" : [LTMenuItem class]};}/** 判斷是否能夠展開, 當subs中有數據時才能展開 */- (BOOL)isCanUnfold{ return self.subs.count > 0;}@end第四步, 設置展開閉合時, 需要顯示的數據
在控制器 LTMenuItemViewController 中, 當前展示的數據是數組 menuItems , 此時并不好控制應該展示在 tableView 中的數據, 所以添加一個新的屬性, 用來包含需要展示的數據
@interface LTMenuItemViewController () /** 菜單項 */@property (nonatomic, strong) NSMutableArray<LTMenuItem *> *menuItems;/** 當前需要展示的數據 */@property (nonatomic, strong) NSMutableArray<LTMenuItem *> *latestShowMenuItems;@end
其中 latestShowMenuItems 就是展示在tableView中的數據
使用懶加載, 創建 latestShowMenuItems
- (NSMutableArray<LTMenuItem *> *)latestShowMenuItems{ if (!_latestShowMenuItems) { self.latestShowMenuItems = [[NSMutableArray alloc] init]; } return _latestShowMenuItems;} 修改數據源方法, 使用 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 中包含的數據, 就可以控制頁面的展示, 而 menuItems 中的數據不需要增加和減少
第五步, 控制 latestShowMenuItems 中數據的方法
現在, latestShowMenuItems 中沒有數據, 所以界面初始化后將不會展示任何數據
我們接下來就在 latestShowMenuItems 中添加初始化界面時需要展示的數據, 并設置層級為0
- (void)setupRowCount{ // 添加需要展示項, 并設置層級, 初始化0 [self setupRouCountWithMenuItems:self.menuItems index:0];}/** 將需要展示的選項添加到latestShowMenuItems中 */- (void)setupRouCountWithMenuItems:(NSArray<LTMenuItem *> *)menuItems index:(NSInteger)index{ for (int i = 0; i < menuItems.count; i++) { LTMenuItem *item = menuItems[i]; // 設置層級 item.index = index; // 將選項添加到數組中 [self.latestShowMenuItems addObject:item]; }}第六步, 通過tableView代理中cell的點擊方法, 處理菜單的展開閉合操作
通過 - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath 方法, 處理菜單的展開閉合操作
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{ // 取出點擊的選項 LTMenuItem *menuItem = self.latestShowMenuItems[indexPath.row]; // 判斷是否能夠展開, 不能展開立即返回, 不錯任何處理 if (!menuItem.isCanUnfold) return; // 設置展開閉合 menuItem.isUnfold = !menuItem.isUnfold; // 刷新列表 [self.tableView reloadData];} 在這里, 根據被點擊數據能否展開, 修改了對應的 isUnfold 屬性, 并刷新界面
但此時由于 latestShowMenuItems 中數據沒有數量變化, 所以子層級并不能顯示出來
所以我們需要對 latestShowMenuItems 中的數據進行修改
我們在這里修改第五步中的兩個方法, 如下所示
#pragma mark - < 添加可以展示的選項 >- (void)setupRowCount{ // 清空當前所有展示項 [self.latestShowMenuItems removeAllObjects]; // 重新添加需要展示項, 并設置層級, 初始化0 [self setupRouCountWithMenuItems:self.menuItems index:0];}/** 將需要展示的選項添加到latestShowMenuItems中, 此方法使用遞歸添加所有需要展示的層級到latestShowMenuItems中 @param menuItems 需要添加到latestShowMenuItems中的數據 @param index 層級, 即當前添加的數據屬于第幾層 */- (void)setupRouCountWithMenuItems:(NSArray<LTMenuItem *> *)menuItems index:(NSInteger)index{ for (int i = 0; i < menuItems.count; i++) { LTMenuItem *item = menuItems[i]; // 設置層級 item.index = index; // 將選項添加到數組中 [self.latestShowMenuItems addObject:item]; // 判斷該選項的是否能展開, 并且已經需要展開 if (item.isCanUnfold && item.isUnfold) { // 當需要展開子集的時候, 添加子集到數組, 并設置子集層級 [self setupRouCountWithMenuItems:item.subs index:index + 1]; } }} 在一開始, 先清空 latestShowMenuItems 中的數據, 然后添加第一層數據
在添加第一層數據的時候, 對每一個數據進行判斷, 判斷是否能展開, 并且是否已經展開
如果展開, 添加子類到數組, 這里用遞歸層層遞進, 最后將每一層子類展開的數據全部添加到 latestShowMenuItems 中, 同時設置了每一層數據的層級屬性 index
此時 - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath 方法, 需要做如下修改
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{ // 取出點擊的選項 LTMenuItem *menuItem = self.latestShowMenuItems[indexPath.row]; // 判斷是否能夠展開, 不能展開立即返回, 不錯任何處理 if (!menuItem.isCanUnfold) return; // 設置展開閉合 menuItem.isUnfold = !menuItem.isUnfold; // 修改latestShowMenuItems中數據 [self setupRowCount]; // 刷新列表 [self.tableView reloadData];}這時, 我們已經可以看到界面上有如下效果
第七步, 添加展開閉合的伸縮動畫效果
首先添加一個屬性 oldShowMenuItems , 用來記錄改變前 latestShowMenuItems 中的數據
@interface LTMenuItemViewController ()/** 菜單項 */@property (nonatomic, strong) NSMutableArray<LTMenuItem *> *menuItems;/** 當前需要展示的數據 */@property (nonatomic, strong) NSMutableArray<LTMenuItem *> *latestShowMenuItems;/** 以前需要展示的數據 */@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; // 記錄改變之前的數據 self.oldShowMenuItems = [NSMutableArray arrayWithArray:self.latestShowMenuItems]; // 設置展開閉合 menuItem.isUnfold = !menuItem.isUnfold; // 更新被點擊cell的箭頭指向 [self.tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:(UITableViewRowAnimationAutomatic)]; // 設置需要展開的新數據 [self setupRowCount]; // 判斷老數據和新數據的數量, 來進行展開和閉合動畫 // 定義一個數組, 用于存放需要展開閉合的indexPath NSMutableArray<NSIndexPath *> *indexPaths = @[].mutableCopy; // 如果 老數據 比 新數據 多, 那么就需要進行閉合操作 if (self.oldShowMenuItems.count > self.latestShowMenuItems.count) { // 遍歷oldShowMenuItems, 找出多余的老數據對應的indexPath for (int i = 0; i < self.oldShowMenuItems.count; i++) { // 當新數據中 沒有對應的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 { // 此時 新數據 比 老數據 多, 進行展開操作 // 遍歷 latestShowMenuItems, 找出 oldShowMenuItems 中沒有的選項, 就是需要新增的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)]; }}通過判斷新老數據的數量, 已經對應的位置, 進行刪除和插入操作, 就可以添加對應的動畫效果
此時, 效果如下:
第八步, 選項的選中效果
我在cell的左半部分添加了一個半個cell寬的透明按鈕, 并設置了一個代理方法
當點擊透明按鈕時, 調用代理方法, 修改cell對應的 LTMenuItem 中 isSelected 的值, 來控制選中狀態
在控制器中指定代理, 并實現代理方法
- (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];}效果如下:
第九步, 使用遞歸進行 全選和反選 操作
首先我們在導航條右側添加 全選 按鈕, 并實現對應的點擊方法
#pragma mark - < 點擊事件 >- (void)allBtnClick:(UIButton *)sender{ sender.selected = !sender.selected; [self selected:sender.selected menuItems:self.menuItems];}/** 取消或選擇, 某一數值中所有的選項, 包括子層級 @param selected 是否選中 @param menuItems 選項數組 */- (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];}上述的第二個方法, 就是修改對應數組中所有的數據及子集的選中狀態
同時修改該cell的代理方法 - (void)cell:(LTMenuItemCell *)cell didSelectedBtn:(UIButton *)sender 的實現
#pragma mark - < LTMenuItemCellDelegate >- (void)cell:(LTMenuItemCell *)cell didSelectedBtn:(UIButton *)sender{ cell.menuItem.isSelected = !cell.menuItem.isSelected; // 修改按鈕狀態 self.allBtn.selected = NO; [self.tableView reloadData];}最終效果如下:
第十步, 使用已選擇數據
這里主要是拿到所有已經選中的數據, 并進行操作
我只進行了打印操作, 如果需要, 可以自己修改
首先添加一個屬性 selectedMenuItems , 用于存儲已選數據
然后通過下列代碼可以獲取所有已經選中的數據
@interface LTMenuItemViewController () <LTMenuItemCellDelegate>/** 菜單項 */@property (nonatomic, strong) NSMutableArray<LTMenuItem *> *menuItems;/** 當前需要展示的數據 */@property (nonatomic, strong) NSMutableArray<LTMenuItem *> *latestShowMenuItems;/** 以前需要展示的數據 */@property (nonatomic, strong) NSMutableArray<LTMenuItem *> *oldShowMenuItems;/** 已經選中的選項, 可用于回調 */@property (nonatomic, strong) NSMutableArray<LTMenuItem *> *selectedMenuItems;/** 全選按鈕 */@property (nonatomic, strong) UIButton *allBtn;@end
#pragma mark - < 選中數據 >- (void)printSelectedMenuItems:(UIButton *)sender{ [self.selectedMenuItems removeAllObjects]; [self departmentsWithMenuItems:self.menuItems]; NSLog(@"這里是全部選中數據/n%@", self.selectedMenuItems);}/** 獲取選中數據 */- (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]; } }}通過遞歸, 一層層拿到所有已經選擇的選項, 并進行打印操作
如果需要另外處理拿到的數據 只需要修改 printSelectedMenuItems 方法中的 NSLog(@"這里是全部選中數據/n%@", self.selectedMenuItems); 即可
demo地址: https://github.com/963527512/MultilayerMenu
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
