iOS开发: 使用UITableView制作N级下拉菜单

前言

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 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 - < 基本设置 >

- (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时, 才取值YES
- index: 表示当前的层级, 第一层的值为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

最后编辑于：2018.01.20 18:26:08

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 214,717评论 6赞 496
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,501评论 3赞 389
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 160,311评论 0赞 350
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,417评论 1赞 288
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,500评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,538评论 1赞 293
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,557评论 3赞 414
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,310评论 0赞 270
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,759评论 1赞 307
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,065评论 2赞 330
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,233评论 1赞 343
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,909评论 5赞 338
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,548评论 3赞 322
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,172评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,420评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,103评论 2赞 365
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,098评论 2赞 352

iOS开发: 使用UITableView制作N级下拉菜单

前言

创建控制器, 并添加数据

第一步, 创建一个新的项目, 并添加几个类

第二步, 在LTMenuItemViewController中, 设置tableView的数据源和cell

第三步, 设置选项模型, 添加辅助属性

第四步, 设置展开闭合时, 需要显示的数据

第五步, 控制latestShowMenuItems中数据的方法

第六步, 通过tableView代理中cell的点击方法, 处理菜单的展开闭合操作

第七步, 添加展开闭合的伸缩动画效果

第八步, 选项的选中效果

第九步, 使用递归进行 全选和反选 操作

第十步, 使用已选择数据

推荐阅读更多精彩内容

第五步, 控制`latestShowMenuItems`中数据的方法

第九步, 使用递归进行全选和反选操作