iOS 三級(jí)下拉菜單功能實(shí)現(xiàn)
更新時(shí)間：2017年03月11日 10:03:07 作者：Mr_Lucifer
多級(jí)下拉菜單在很多APP中都能應(yīng)用到，這篇文章主要介紹了iOS 多級(jí)下拉菜單功能實(shí)現(xiàn)，具有一定的參考價(jià)值，有興趣的可以了解下。
前言
App 常用控件 -- 多級(jí)下拉菜單, 如團(tuán)購(gòu)類(lèi), 房屋類(lèi), 對(duì)數(shù)據(jù)進(jìn)行篩選. 有一級(jí), 二級(jí), 三級(jí), 再多就不會(huì)以這種樣式,呈現(xiàn)給用戶(hù)了. 作者就簡(jiǎn)單聊一下 多級(jí)下拉菜單
一 目標(biāo)
- 默認(rèn)顯示一個(gè) TableView, 點(diǎn)擊數(shù)據(jù)后, 添加第二個(gè)TableView, 并實(shí)現(xiàn)大小變化
- 第二次打開(kāi)下拉菜單. 保存上次選中數(shù)據(jù)
二 菜單控件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; /** 控件設(shè)置 @param view 提供控件 位置信息 @param tableNum 顯示TableView數(shù)量 @param arr 使用數(shù)據(jù) */ -(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
/** 保存 選擇的數(shù)據(jù)(行數(shù)) */
NSInteger selects[3];
}
@property (nonatomic, assign) BOOL show; // 按鈕點(diǎn)擊后 視圖顯示/隱藏
@property (nonatomic, assign) CGFloat rowHeightNum; // 設(shè)置 rom 高度
/* 底層取消按鈕 */
@property (nonatomic, strong) UIButton *cancelButton;
/** 表視圖數(shù)組 */
@property (nonatomic, strong) NSArray *tableViewArr;
/** 表視圖的 底部視圖 */
@property (nonatomic, strong) UIView *tableViewUnderView;
/** 顯示 TableView 數(shù)量 */
@property (nonatomic, assign) NSInteger tableCount;
/** 數(shù)據(jù) */
@property (nonatomic, strong) NSArray *dataArr;
@end
@implementation DropMenuView
- (instancetype)init
{
self = [super init];
if (self) {
/** 數(shù)據(jù)初始化 */
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];
/** 默認(rèn)設(shè)置為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數(shù)量
self.tableCount = tableNum;
// 數(shù)據(jù)
self.dataArr = arr;
for (UITableView *tableView in self.tableViewArr) {
[tableView reloadData];
}
// 初始位置 設(shè)置
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{
/** 什么也不選擇時(shí)候, 再次點(diǎn)擊按鈕 消失視圖 */
[self dismiss];
}
}
#pragma mark - 加載選中的TableView
-(void)loadSelects{
[self.tableViewArr enumerateObjectsUsingBlock:^(UITableView *tableView, NSUInteger idx, BOOL * _Nonnull stop) {
// 刷新TableView數(shù)據(jù)
[tableView reloadData];
// 選中TableView某一行
[tableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:selects[idx] inSection:0] animated:NO scrollPosition:UITableViewScrollPositionNone];
// 加 !idx 是因?yàn)?循環(huán)第一次 idx == 0 方法不執(zhí)行, 所以需要循環(huán)一次 加載一個(gè)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 數(shù)量
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協(xié)議
/** 行數(shù) */
-(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;
}
// 可以將 方法提出來(lái), 如果有需要 可以設(shè)置為協(xié)議實(shí)現(xiàn)封裝, 作者僅提取一個(gè), 其他均在 TableView自身協(xié)議中寫(xiě)
-(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;
}
/** 點(diǎn)擊 */
-(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 - 記錄 選擇狀態(tài)
-(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
三 調(diào)用控件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:@"一級(jí)"];
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:@"二級(jí)"];
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:@"三級(jí)"];
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 - 按鈕點(diǎn)擊推出菜單 (并且其他的菜單收起)
-(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 - 協(xié)議實(shí)現(xiàn)
-(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 - 設(shè)置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
四 調(diào)用
MenuScreeningView *menuScreening = [[MenuScreeningView alloc] initWithFrame:CGRectMake(0, 64, kWidth, 36)]; [self.view addSubview:menuScreening]; menuScreening.backgroundColor = [UIColor whiteColor];
五 效果圖
六 demo下載
因?yàn)閿?shù)據(jù)源 無(wú)法上次上傳[簡(jiǎn)書(shū)], 所以上傳個(gè)demo, 細(xì)節(jié)方面, 可能有未注意地方,僅供參考.
傳送門(mén) : LinkageMenu_jb51.rar
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
iOS應(yīng)用UI開(kāi)發(fā)中的字體和按鈕控件使用指南
這篇文章主要介紹了iOS應(yīng)用UI開(kāi)發(fā)中的字體和按鈕控件使用指南,分別簡(jiǎn)單講解了UILabel和UIButton的用法,需要的朋友可以參考下2016-01-01
這篇文章主要為大家詳細(xì)介紹了iOS通過(guò)UISwitch控制搖一搖，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-06-06
大家都經(jīng)常使用微信聊天功能，在沒(méi)事的時(shí)候就會(huì)想微信聊天輸入框的實(shí)現(xiàn)過(guò)程，很無(wú)聊吧。今天小編抽空給大家分享iOS實(shí)現(xiàn)聊天輸入框功能，感興趣的朋友跟隨腳本之家小編一起看看吧2018-02-02
iOS中創(chuàng)建表格類(lèi)視圖WBDataGridView的實(shí)例代碼
這篇文章主要介紹了iOS中創(chuàng)建表格類(lèi)視圖WBDataGridView的實(shí)例代碼,需要的朋友可以參考下2017-02-02
iOS仿網(wǎng)易簡(jiǎn)單頭部滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了iOS仿網(wǎng)易簡(jiǎn)單頭部滾動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-05-05
iOS block循環(huán)引用詳解及常見(jiàn)誤區(qū)
這篇文章主要介紹了iOS block循環(huán)引用詳解和應(yīng)用，常見(jiàn)誤區(qū)詳解，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2021-08-08
這篇文章主要介紹了IOS接入facebook詳解，對(duì)接入第三方SDK感興趣的同學(xué)，可以參考下2021-04-04
關(guān)于iOS推送的那些事，你知道多少？本文帶著大家一起了解iOS推送，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要給大家介紹了關(guān)于iOS富文本的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
IOS文件的簡(jiǎn)單讀寫(xiě)實(shí)例詳解
這篇文章主要介紹了IOS文件的簡(jiǎn)單讀寫(xiě)實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-07-07