iOS開發: 使用UITableView製作N級下拉選單

冰凌天發表於2018-01-22

iOSUIView

前言

demo地址: github.com/963527512/M…, 如果有更好的辦法, 請留言
前段時間在做專案的時候, 遇到了一個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-08-24
純css製作導航下拉選單
2018-05-01
CSS
第一週_作業3（三級下拉選單）
2017-09-10
在Excel中製作下拉選單的3種方法
2016-06-21
Excel
CSS 二級下拉選單
2019-01-29
CSS
CSS二級下拉選單
2018-07-11
CSS
jQuery 二級下拉選單
2017-03-16
jQuery
IOS開發製作簡單的計算器
2021-09-09
iOS
簡述iOS開發framework製作與使用
2017-05-14
iOSFramework
Excel2010工作表下拉選單的製作
2016-11-21
Excel
iOS開發系列--UITableView全面解析
2014-08-23
iOSUIView
iOS開發之UITableView聯動實現城市選擇器
2016-11-09
iOSUIView
JavaScript二級下拉選單詳解
2018-08-11
JavaScript
jQuery與CSS二級下拉選單
2018-07-14
jQueryCSS
JS實現級聯下拉選單
2009-03-15
JS
jquery實現四級級聯下拉選單
2020-12-10
jQuery
iOS開發-UITableView的重用機制
2024-07-09
iOSUIView
推薦10個 CSS3 製作的創意下拉選單效果
2014-02-12
CSSS3
select下拉選單二級聯動
2017-04-04
[開發教程] 第32講：Bootstrap導航選單裡的下拉選單
2019-05-11
boot
下拉選單
2006-05-22
點選標題下拉展開二級子標題導航選單
2017-04-07
淘寶頁面實現（包括級聯選單，下拉選單，框架）
2012-12-10
框架
10個優秀的 HTML5 & CSS3 下拉選單製作教程
2014-09-07
HTMLCSSS3
Swift iOS: UITableView的使用
2017-02-28
SwiftiOSUIView
[iOS]關於檢視下拉選單的猜想
2016-08-11
iOS
線上直播原始碼，開發一個下拉選單元件
2023-10-17
原始碼元件
android短視訊開發，自定義下拉選單
2022-05-24
Android
CSS三級下拉導航選單詳解
2018-09-09
CSS
JavaScript 動畫效果緩慢二級下拉選單
2019-01-27
JavaScript動畫
css實現的二級下拉選單效果
2017-03-31
CSS
css二級下拉選單程式碼例項
2017-04-09
CSS
純CSS二級下拉導航選單實
2017-04-16
CSS
jquery二級下拉導航選單詳解
2017-04-11
jQuery
直播平臺製作，vue el-dropdown下拉框單選有對鉤高亮
2023-05-05
Vue
jquery實現的點選二級下拉導航選單
2017-03-20
jQuery
vue下拉選單
2019-07-24
Vue
html - 下拉選單
2017-09-26
HTML

iOS開發: 使用UITableView製作N級下拉選單

前言

建立控制器, 並新增資料

第一步, 建立一個新的專案, 並新增幾個類

第二步, 在LTMenuItemViewController中, 設定tableView的資料來源和cell

第三步, 設定選項模型, 新增輔助屬性

第四步, 設定展開閉合時, 需要顯示的資料

第五步, 控制latestShowMenuItems中資料的方法

第六步, 通過tableView代理中cell的點選方法, 處理選單的展開閉合操作

第七步, 新增展開閉合的伸縮動畫效果

第八步, 選項的選中效果

第九步, 使用遞迴進行 全選和反選 操作

第十步, 使用已選擇資料

相關文章

第五步, 控制`latestShowMenuItems`中資料的方法

第九步, 使用遞迴進行全選和反選操作