iOS 多级下拉菜单

前言

App 常用控件 -- 多级下拉菜单, 如团购类, 房屋类, 对数据进行筛选. 有一级, 二级, 三级, 再多就不会以这种样式,呈现给用户了. 作者就简单聊一下 多级下拉菜单

二级下拉筛选菜单.png

一 目标

1. 默认显示一个 TableView, 点击数据后, 添加第二个TableView, 并实现大小变化
2. 第二次打开下拉菜单. 保存上次选中数据

二 菜单控件DropMenuView

.h文件

#import <UIKit/UIKit.h>@class DropMenuView;@protocol DropMenuViewDelegate <NSObject>-(void)dropMenuView:(DropMenuView *)view didSelectName:(NSString *)str;@end@interface DropMenuView : UIView@property (nonatomic, weak) id<DropMenuViewDelegate> delegate;/** 箭头变化 */@property (nonatomic, strong) UIView *arrowView;/**  控件设置 @param view 提供控件 位置信息 @param tableNum 显示TableView数量 @param arr 使用数据 */-(void)creatDropView:(UIView *)view withShowTableNum:(NSInteger)tableNum withData:(NSArray *)arr;/** 视图消失 */- (void)dismiss;@end

.m文件

#import "DropMenuView.h"#define kWidth [UIScreen mainScreen].bounds.size.width#define kHeight [UIScreen mainScreen].bounds.size.height@interface DropMenuView ()<UITableViewDelegate, UITableViewDataSource>{@private    /** 保存 选择的数据(行数) */    NSInteger selects[3];}@property (nonatomic, assign) BOOL show;   // 按钮点击后 视图显示/隐藏@property (nonatomic, assign) CGFloat rowHeightNum; // 设置 rom 高度/* 底层取消按钮 */@property (nonatomic, strong) UIButton *cancelButton;/** 表视图数组 */@property (nonatomic, strong) NSArray *tableViewArr;/** 表视图的 底部视图 */@property (nonatomic, strong) UIView *tableViewUnderView;/** 显示 TableView 数量 */@property (nonatomic, assign) NSInteger tableCount;/** 数据 */@property (nonatomic, strong) NSArray *dataArr;@end@implementation DropMenuView- (instancetype)init{    self = [super init];    if (self) {        /** 数据初始化 */        self.dataArr = [NSArray array];        /** 保存 初始值为-1 */        for (int i = 0; i < 3; i++) {            selects[i] = -1;        }        /* 底层取消按钮 */        self.cancelButton = [UIButton buttonWithType:UIButtonTypeCustom];        self.cancelButton.backgroundColor = [UIColor colorWithWhite:0.0 alpha:0.3];        [self.cancelButton addTarget:self action:@selector(clickCancelButton:) forControlEvents:UIControlEventTouchUpInside];        [self addSubview:self.cancelButton];        /** 表视图的 底部视图初始化 */        self.tableViewUnderView = [[UIView alloc] init];        self.tableViewUnderView.backgroundColor = [UIColor colorWithRed:0.74 green:0.73 blue:0.76 alpha:1.000];        [self.cancelButton addSubview:self.tableViewUnderView];        /** 默认设置为no, row高度为40 */        self.show = NO;        self.rowHeightNum = 40.0f;    }    return self;}-(void)creatDropView:(UIView *)view withShowTableNum:(NSInteger)tableNum withData:(NSArray *)arr{    if (!self.show) {        self.show = !self.show;        // 显示 TableView数量        self.tableCount = tableNum;        // 数据        self.dataArr = arr;        for (UITableView *tableView in self.tableViewArr) {            [tableView reloadData];        }        // 初始位置 设置        CGFloat x = 0.f;        CGFloat y = view.frame.origin.y + view.frame.size.height;        CGFloat w = kWidth;        CGFloat h = kHeight - y;        self.frame = CGRectMake(x, y, w, h);        self.cancelButton.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);        self.tableViewUnderView.frame = CGRectMake(0, 0, self.frame.size.width, self.rowHeightNum * 7);        if (!self.superview) {            [[[UIApplication sharedApplication] keyWindow] addSubview:self];            self.alpha = 0.0f;            [UIView animateWithDuration:0.2f animations:^{                self.alpha = 1.0f;            }];            [self loadSelects];            [self adjustTableViews];        }    }else{        /** 什么也不选择时候, 再次点击按钮 消失视图 */        [self dismiss];    }}#pragma mark - 加载选中的TableView-(void)loadSelects{    [self.tableViewArr enumerateObjectsUsingBlock:^(UITableView *tableView, NSUInteger idx, BOOL * _Nonnull stop) {       // 刷新TableView数据        [tableView reloadData];        // 选中TableView某一行        [tableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:selects[idx] inSection:0] animated:NO scrollPosition:UITableViewScrollPositionNone];        //  加 !idx 是因为 循环第一次 idx == 0 方法不执行, 所以需要循环一次 加载一个TableView.        if((selects[idx] != -1 && !tableView.superview) || !idx) {            [self.tableViewUnderView addSubview:tableView];            [UIView animateWithDuration:0.2 animations:^{                if (self.arrowView) {                    self.arrowView.transform = CGAffineTransformMakeRotation(M_PI);                }            }];        }    }];}#pragma mark - 重置TableView的 位置-(void)adjustTableViews{    // 显示的 TableView 数量    int addTableCount = 0;    for (UITableView *tableView in self.tableViewArr) {        if (tableView.superview) {            addTableCount++;        }    }    for (int i = 0; i < addTableCount; i++) {        UITableView *tableView = self.tableViewArr[i];        CGRect adjustFrame = tableView.frame;        adjustFrame.size.width = kWidth / addTableCount ;        adjustFrame.origin.x = adjustFrame.size.width * i + 0.5 * i;        adjustFrame.size.height = self.tableViewUnderView.frame.size.height ;        tableView.frame = adjustFrame;    }}#pragma mark - TableView协议/** 行数 */-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{    NSInteger __block count;    [self.tableViewArr enumerateObjectsUsingBlock:^(id  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {        if (obj == tableView) {            NSInteger firstSelectRow = ((UITableView *)self.tableViewArr[0]).indexPathForSelectedRow.row ;              NSInteger secondSelectRow = ((UITableView *)self.tableViewArr[1]).indexPathForSelectedRow.row ;            count = [self countForChooseTable:idx firstTableSelectRow:firstSelectRow withSecondTableSelectRow:secondSelectRow];        }    }];    return count;}// 可以将 方法提出来, 如果有需要 可以设置为协议实现封装, 作者仅提取一个, 其他均在 TableView自身协议中写-(NSInteger)countForChooseTable:(NSInteger)idx firstTableSelectRow:(NSInteger)firstSelectRow withSecondTableSelectRow:(NSInteger)secondSelectRow{    if (idx == 0) {        return self.dataArr.count;    }else  if (idx == 1){        if (firstSelectRow == -1) {            return 0;        }else{            if (self.tableCount == 2) {                return [self.dataArr[firstSelectRow][@"subcategories"] count];            }else{                return [self.dataArr[firstSelectRow][@"sub"] count];            }        }    }else{        if (secondSelectRow == -1) {            return 0;        }else{            return [self.dataArr[firstSelectRow][@"sub"][secondSelectRow][@"sub"] count];        }    }}/** 自定义cell */-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"DropCell"];    cell.textLabel.font = [UIFont systemFontOfSize:14];    if (self.tableCount == 1) {        cell.textLabel.text = self.dataArr[indexPath.row][@"label"];    }else if (self.tableCount == 2){        NSInteger firstSelectRow = ((UITableView *)self.tableViewArr[0]).indexPathForSelectedRow.row;        if (tableView == self.tableViewArr[0]) {            cell.textLabel.text = self.dataArr[indexPath.row][@"name"];        }else if (tableView == self.tableViewArr[1]){            cell.textLabel.text = self.dataArr[firstSelectRow][@"subcategories"][indexPath.row];        }    }else if (self.tableCount == 3){         NSInteger firstSelectRow = ((UITableView *)self.tableViewArr[0]).indexPathForSelectedRow.row;         NSInteger secondSelectRow = ((UITableView *)self.tableViewArr[1]).indexPathForSelectedRow.row;        if (tableView == self.tableViewArr[0]) {            cell.textLabel.text = self.dataArr[indexPath.row][@"name"];        }else if (tableView == self.tableViewArr[1]){            cell.textLabel.text = self.dataArr[firstSelectRow][@"sub"][indexPath.row][@"name"];        }else if (tableView == self.tableViewArr[2]){           cell.textLabel.text =  self.dataArr[firstSelectRow][@"sub"][secondSelectRow][@"sub"][indexPath.row];        }    }    return cell;}/** 点击 */-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{    UITableView *secondTableView = self.tableViewArr[1];    UITableView *thirdTableView = self.tableViewArr[2];    if (self.tableCount == 1) {        [self saveSelects];        [self dismiss];        [_delegate dropMenuView:self didSelectName:self.dataArr[indexPath.row][@"label"]];    }else if (self.tableCount == 2){        if (tableView == self.tableViewArr[0]) {            if (!secondTableView.superview) {                [self.tableViewUnderView addSubview:secondTableView];            }            [secondTableView reloadData];            [self adjustTableViews];        }else if (tableView == self.tableViewArr[1]){            [self saveSelects];            [self dismiss];             NSInteger firstSelectRow = ((UITableView *)self.tableViewArr[0]).indexPathForSelectedRow.row;             [_delegate dropMenuView:self didSelectName:self.dataArr[firstSelectRow][@"subcategories"][indexPath.row]];        }    }else if (self.tableCount == 3){        NSInteger firstSelectRow = ((UITableView *)self.tableViewArr[0]).indexPathForSelectedRow.row;        NSInteger secondSelectRow = ((UITableView *)self.tableViewArr[1]).indexPathForSelectedRow.row;        if (tableView == self.tableViewArr[0]) {            if (!secondTableView.superview) {                [self.tableViewUnderView addSubview:secondTableView];            }            [self adjustTableViews];            [secondTableView reloadData];        }else if (tableView == self.tableViewArr[1]){            if (!thirdTableView.superview) {                [self.tableViewUnderView addSubview:thirdTableView];            }            [self adjustTableViews];            [thirdTableView reloadData];        }else if (tableView == self.tableViewArr[2]){            [self saveSelects];            [self dismiss];            [_delegate dropMenuView:self didSelectName:self.dataArr[firstSelectRow][@"sub"][secondSelectRow][@"sub"][indexPath.row]];        }    }}#pragma mark - 记录 选择状态-(void)saveSelects{    [self.tableViewArr enumerateObjectsUsingBlock:^(UITableView *tableView, NSUInteger idx, BOOL * _Nonnull stop) {        selects[idx] = tableView.superview ? tableView.indexPathForSelectedRow.row : -1;    }];}#pragma mark - 视图消失- (void)dismiss{    if(self.superview) {        self.show = !self.show;        [self endEditing:YES];        [UIView animateWithDuration:.25f animations:^{            self.alpha = .0f;        } completion:^(BOOL finished) {            [self.tableViewUnderView.subviews enumerateObjectsUsingBlock:^(UIView *obj, NSUInteger idx, BOOL *stop) {                [obj removeFromSuperview];            }];            [self removeFromSuperview];            [UIView animateWithDuration:0.2 animations:^{                if (self.arrowView) {                    self.arrowView.transform = CGAffineTransformMakeRotation(0);                }            }];        }];    }}/** 底部按钮, 视图消失 */-(void)clickCancelButton:(UIButton *)button{    [self dismiss];}/** 懒加载 */-(NSArray *)tableViewArr{    if (_tableViewArr == nil) {        _tableViewArr = @[[[UITableView alloc] init], [[UITableView alloc] init], [[UITableView alloc] init]];        for (UITableView *tableView in _tableViewArr) {            [tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"DropCell"];            tableView.delegate = self;            tableView.dataSource = self;            tableView.frame = CGRectMake(0, 0, 0, 0);            tableView.backgroundColor = [UIColor whiteColor];            tableView.tableFooterView = [[UIView alloc] init];            tableView.showsVerticalScrollIndicator = NO;            tableView.rowHeight = self.rowHeightNum;        }    }    return _tableViewArr;}@end

三 调用控件MenuScreeningView

.h文件

#import <UIKit/UIKit.h>@interface MenuScreeningView : UIView#pragma mark - 筛选菜单消失-(void)menuScreeningViewDismiss;@end

.m文件

#import "MenuScreeningView.h"#import "DropMenuView.h"#define kWidth [UIScreen mainScreen].bounds.size.width#define kHeight [UIScreen mainScreen].bounds.size.height@interface MenuScreeningView ()<DropMenuViewDelegate>@property (nonatomic, strong) UIButton *oneLinkageButton;@property (nonatomic, strong) UIButton *twoLinkageButton;@property (nonatomic, strong) UIButton *threeLinkageButton;@property (nonatomic, strong) DropMenuView *oneLinkageDropMenu;@property (nonatomic, strong) DropMenuView *twoLinkageDropMenu;@property (nonatomic, strong) DropMenuView *threeLinkageDropMenu;@property (nonatomic, strong) NSArray *addressArr;@property (nonatomic, strong) NSArray *categoriesArr;@property (nonatomic, strong) NSArray *sortsArr;@end@implementation MenuScreeningView- (instancetype)initWithFrame:(CGRect)frame{    self = [super initWithFrame:frame];    if (self) {        self.oneLinkageButton = [UIButton buttonWithType:UIButtonTypeCustom];        self.oneLinkageButton.frame = CGRectMake(0, 0, kWidth/3, 36);        [self setUpButton:self.oneLinkageButton withText:@"一级"];        self.oneLinkageDropMenu = [[DropMenuView alloc] init];        self.oneLinkageDropMenu.arrowView = self.oneLinkageButton.imageView;        self.oneLinkageDropMenu.delegate = self;        self.twoLinkageButton = [UIButton buttonWithType:UIButtonTypeCustom];        self.twoLinkageButton.frame = CGRectMake(kWidth/3, 0, kWidth/3, 36);        [self setUpButton:self.twoLinkageButton withText:@"二级"];        self.twoLinkageDropMenu = [[DropMenuView alloc] init];        self.twoLinkageDropMenu.arrowView = self.twoLinkageButton.imageView;        self.twoLinkageDropMenu.delegate = self;        self.threeLinkageButton = [UIButton buttonWithType:UIButtonTypeCustom];        self.threeLinkageButton.frame = CGRectMake(2 * kWidth/3, 0,  kWidth/3, 36);        [self setUpButton:self.threeLinkageButton withText:@"三级"];        self.threeLinkageDropMenu = [[DropMenuView alloc] init];        self.threeLinkageDropMenu.arrowView = self.threeLinkageButton.imageView;        self.threeLinkageDropMenu.delegate = self;        /** 最下面横线 */        UIView *horizontalLine = [[UIView alloc] initWithFrame:CGRectMake(0, self.frame.size.height - 0.6, kWidth, 0.6)];        horizontalLine.backgroundColor = [UIColor colorWithWhite:0.8 alpha:1.000];        [self addSubview:horizontalLine];    }    return self;}#pragma mark - 按钮点击推出菜单 (并且其他的菜单收起)-(void)clickButton:(UIButton *)button{    if (button == self.oneLinkageButton) {        [self.twoLinkageDropMenu dismiss];        [self.threeLinkageDropMenu dismiss];        [self.oneLinkageDropMenu creatDropView:self withShowTableNum:1 withData:self.sortsArr];    }else if (button == self.twoLinkageButton){        [self.oneLinkageDropMenu dismiss];        [self.threeLinkageDropMenu dismiss];        [self.twoLinkageDropMenu creatDropView:self withShowTableNum:2 withData:self.categoriesArr];    }else if (button == self.threeLinkageButton){        [self.oneLinkageDropMenu dismiss];        [self.twoLinkageDropMenu dismiss];        [self.threeLinkageDropMenu creatDropView:self withShowTableNum:3 withData:self.addressArr];    }}#pragma mark - 筛选菜单消失-(void)menuScreeningViewDismiss{    [self.oneLinkageDropMenu dismiss];    [self.twoLinkageDropMenu dismiss];    [self.threeLinkageDropMenu dismiss];}#pragma mark - 协议实现-(void)dropMenuView:(DropMenuView *)view didSelectName:(NSString *)str{    if (view == self.oneLinkageDropMenu) {        [self.oneLinkageButton setTitle:str forState:UIControlStateNormal];        [self buttonEdgeInsets:self.oneLinkageButton];    }else if (view == self.twoLinkageDropMenu){        [self.twoLinkageButton setTitle:str forState:UIControlStateNormal];        [self buttonEdgeInsets:self.twoLinkageButton];    }else if (view == self.threeLinkageDropMenu){        [self.threeLinkageButton setTitle:str forState:UIControlStateNormal];        [self buttonEdgeInsets:self.threeLinkageButton];    }}#pragma mark - 设置Button-(void)setUpButton:(UIButton *)button withText:(NSString *)str{    [button addTarget:self action:@selector(clickButton:) forControlEvents:UIControlEventTouchUpInside];    [self addSubview:button];    [button setTitle:str forState:UIControlStateNormal];    button.titleLabel.font =  [UIFont systemFontOfSize:11];    button.titleLabel.lineBreakMode = NSLineBreakByTruncatingTail;    [button setTitleColor:[UIColor colorWithWhite:0.3 alpha:1.000] forState:UIControlStateNormal];    [button setImage:[UIImage imageNamed:@"downarr"] forState:UIControlStateNormal];    [self buttonEdgeInsets:button];    UIView *verticalLine = [[UIView alloc]init];    verticalLine.backgroundColor = [UIColor colorWithWhite:0.9 alpha:1.0];    [button addSubview:verticalLine];    verticalLine.frame = CGRectMake(button.frame.size.width - 0.5, 3, 0.5, 30);}-(void)buttonEdgeInsets:(UIButton *)button{    [button setTitleEdgeInsets:UIEdgeInsetsMake(0, -button.imageView.bounds.size.width + 2, 0, button.imageView.bounds.size.width + 10)];    [button setImageEdgeInsets:UIEdgeInsetsMake(0, button.titleLabel.bounds.size.width + 10, 0, -button.titleLabel.bounds.size.width + 2)];}#pragma mark - 懒加载-(NSArray *)addressArr{    if (_addressArr == nil) {        NSDictionary *dic = [NSDictionary dictionaryWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"address.plist" ofType:nil]];        _addressArr = dic[@"address"];    }    return _addressArr;}-(NSArray *)categoriesArr{    if (_categoriesArr == nil) {        _categoriesArr = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"categories.plist" ofType:nil]];    }    return _categoriesArr;}-(NSArray *)sortsArr{    if (_sortsArr == nil) {        _sortsArr =  [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"sorts.plist" ofType:nil]];    }    return _sortsArr;}@end

四 调用

     MenuScreeningView *menuScreening = [[MenuScreeningView alloc] initWithFrame:CGRectMake(0, 64, kWidth, 36)];    [self.view addSubview:menuScreening];    menuScreening.backgroundColor = [UIColor whiteColor];

五 效果图

多级下拉菜单.gif

六 demo下载

因为数据源 无法上次上传[简书], 所以上传个demo, 细节方面, 可能有未注意地方,仅供参考.
传送门 : https://github.com/Lucifer0103/LinkageMenu.git

以 上 !