iOS開發: 使用UITableView製做N級下拉菜單

時間  2019-11-16
標籤 ios 開發 使用 uitableview 製做 下拉菜單 欄目 iOS 简体版
原文   原文鏈接

前言

  • demo地址: github.com/963527512/M…, 若是有更好的辦法, 請留言
  • 前段時間在作項目的時候, 遇到了一個N級下拉菜單的需求, 可無限層級的展開和閉合, 下面是效果圖

效果圖

  • 其中每個UITableViewCell左右兩部分擁有不一樣的功能git

    • 左半部分我放了一個按鈕, 用來控制每一個選項的選中狀態
    • 右半部分控制菜單的展開和閉合

  • 下面是我在作這個功能時的思路, 使用的是MVCgithub

建立控制器, 並添加數據

第一步, 建立一個新的項目, 並添加幾個類

  • 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數組

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程