iOS開發(fā)使用UITableView制作N級(jí)下拉菜單的示例
前言
demo地址: https://github.com/963527512/MultilayerMenu, 如果有更好的辦法, 請(qǐng)留言 前段時(shí)間在做項(xiàng)目的時(shí)候, 遇到了一個(gè)N級(jí)下拉菜單的需求, 可無限層級(jí)的展開和閉合, 下面是效果圖
其中每一個(gè)UITableViewCell左右兩部分擁有不同的功能
- 左半部分我放了一個(gè)按鈕, 用來控制每個(gè)選項(xiàng)的選中狀態(tài)
- 右半部分控制菜單的展開和閉合
下面是我在做這個(gè)功能時(shí)的思路, 使用的是MVC
創(chuàng)建控制器, 并添加數(shù)據(jù)
第一步, 創(chuàng)建一個(gè)新的項(xiàng)目, 并添加幾個(gè)類
LTMenuItemViewController: 繼承自UITableViewController, 多層菜單界面
LTMenuItem: 繼承自 NSObject, 多層菜單的選項(xiàng)模型, 其中有兩個(gè)屬性
-
name: 選項(xiàng)的名稱 subs: 選項(xiàng)的子層級(jí)數(shù)據(jù)
#import <Foundation/Foundation.h> @interface LTMenuItem : NSObject /** 名字 */ @property (nonatomic, strong) NSString *name; /** 子層 */ @property (nonatomic, strong) NSArray<LTMenuItem *> *subs; @end
LTMenuItemCell: 繼承自: UITableViewCell, 多層菜單的選項(xiàng)cell 添加數(shù)據(jù)源文件, 存放的就是需要展示的菜單數(shù)據(jù), 項(xiàng)目中應(yīng)從網(wǎng)絡(luò)中獲取, 這里為了方便, 使用文件的形式
第二步, 在LTMenuItemViewController中, 設(shè)置tableView的數(shù)據(jù)源和cell
效果圖如下:
具體代碼如下, 其中數(shù)組轉(zhuǎn)模型使用的第三方庫 MJExtension
#import "LTMenuItemViewController.h"
#import "LTMenuItem.h"
#import "LTMenuItemCell.h"
#import <MJExtension/MJExtension.h>
@interface LTMenuItemViewController ()
/** 菜單項(xiàng) */
@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 - < 基本設(shè)置 >
- (void)setup
{
self.title = @"多級(jí)菜單";
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;
}
第三步, 設(shè)置選項(xiàng)模型, 添加輔助屬性
給 LTMenuItem 類添加幾個(gè)輔助屬性, 用于表示選中和展開閉合
-
isSelected: 用于表示選項(xiàng)的選中狀態(tài) isUnfold: 用來表示本層級(jí)的展開和閉合狀態(tài)isCanUnfold: 用于表示本層級(jí)是否能夠展開, 只有當(dāng)subs屬性的個(gè)數(shù)不為0時(shí), 才取值YESindex: 表示當(dāng)前的層級(jí), 第一層的值為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; /** 當(dāng)前層級(jí) */ @property (nonatomic, assign) NSInteger index; @end
#import "LTMenuItem.h"
@implementation LTMenuItem
/**
指定subs數(shù)組中存放LTMenuItem類型對(duì)象
*/
+ (NSDictionary *)mj_objectClassInArray
{
return @{@"subs" : [LTMenuItem class]};
}
/**
判斷是否能夠展開, 當(dāng)subs中有數(shù)據(jù)時(shí)才能展開
*/
- (BOOL)isCanUnfold
{
return self.subs.count > 0;
}
@end
第四步, 設(shè)置展開閉合時(shí), 需要顯示的數(shù)據(jù)
在控制器 LTMenuItemViewController 中, 當(dāng)前展示的數(shù)據(jù)是數(shù)組 menuItems , 此時(shí)并不好控制應(yīng)該展示在 tableView 中的數(shù)據(jù), 所以添加一個(gè)新的屬性, 用來包含需要展示的數(shù)據(jù)
@interface LTMenuItemViewController () /** 菜單項(xiàng) */ @property (nonatomic, strong) NSMutableArray<LTMenuItem *> *menuItems; /** 當(dāng)前需要展示的數(shù)據(jù) */ @property (nonatomic, strong) NSMutableArray<LTMenuItem *> *latestShowMenuItems; @end
其中 latestShowMenuItems 就是展示在tableView中的數(shù)據(jù)
使用懶加載, 創(chuàng)建 latestShowMenuItems
- (NSMutableArray<LTMenuItem *> *)latestShowMenuItems
{
if (!_latestShowMenuItems) {
self.latestShowMenuItems = [[NSMutableArray alloc] init];
}
return _latestShowMenuItems;
}
修改數(shù)據(jù)源方法, 使用 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;
}
此時(shí)我們只需要控制 latestShowMenuItems 中包含的數(shù)據(jù), 就可以控制頁面的展示, 而 menuItems 中的數(shù)據(jù)不需要增加和減少
第五步, 控制 latestShowMenuItems 中數(shù)據(jù)的方法
現(xiàn)在, latestShowMenuItems 中沒有數(shù)據(jù), 所以界面初始化后將不會(huì)展示任何數(shù)據(jù)
我們接下來就在 latestShowMenuItems 中添加初始化界面時(shí)需要展示的數(shù)據(jù), 并設(shè)置層級(jí)為0
- (void)setupRowCount
{
// 添加需要展示項(xiàng), 并設(shè)置層級(jí), 初始化0
[self setupRouCountWithMenuItems:self.menuItems index:0];
}
/**
將需要展示的選項(xiàng)添加到latestShowMenuItems中
*/
- (void)setupRouCountWithMenuItems:(NSArray<LTMenuItem *> *)menuItems index:(NSInteger)index
{
for (int i = 0; i < menuItems.count; i++) {
LTMenuItem *item = menuItems[i];
// 設(shè)置層級(jí)
item.index = index;
// 將選項(xiàng)添加到數(shù)組中
[self.latestShowMenuItems addObject:item];
}
}
第六步, 通過tableView代理中cell的點(diǎn)擊方法, 處理菜單的展開閉合操作
通過 - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath 方法, 處理菜單的展開閉合操作
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
// 取出點(diǎn)擊的選項(xiàng)
LTMenuItem *menuItem = self.latestShowMenuItems[indexPath.row];
// 判斷是否能夠展開, 不能展開立即返回, 不錯(cuò)任何處理
if (!menuItem.isCanUnfold) return;
// 設(shè)置展開閉合
menuItem.isUnfold = !menuItem.isUnfold;
// 刷新列表
[self.tableView reloadData];
}
在這里, 根據(jù)被點(diǎn)擊數(shù)據(jù)能否展開, 修改了對(duì)應(yīng)的 isUnfold 屬性, 并刷新界面
但此時(shí)由于 latestShowMenuItems 中數(shù)據(jù)沒有數(shù)量變化, 所以子層級(jí)并不能顯示出來
所以我們需要對(duì) latestShowMenuItems 中的數(shù)據(jù)進(jìn)行修改
我們?cè)谶@里修改第五步中的兩個(gè)方法, 如下所示
#pragma mark - < 添加可以展示的選項(xiàng) >
- (void)setupRowCount
{
// 清空當(dāng)前所有展示項(xiàng)
[self.latestShowMenuItems removeAllObjects];
// 重新添加需要展示項(xiàng), 并設(shè)置層級(jí), 初始化0
[self setupRouCountWithMenuItems:self.menuItems index:0];
}
/**
將需要展示的選項(xiàng)添加到latestShowMenuItems中, 此方法使用遞歸添加所有需要展示的層級(jí)到latestShowMenuItems中
@param menuItems 需要添加到latestShowMenuItems中的數(shù)據(jù)
@param index 層級(jí), 即當(dāng)前添加的數(shù)據(jù)屬于第幾層
*/
- (void)setupRouCountWithMenuItems:(NSArray<LTMenuItem *> *)menuItems index:(NSInteger)index
{
for (int i = 0; i < menuItems.count; i++) {
LTMenuItem *item = menuItems[i];
// 設(shè)置層級(jí)
item.index = index;
// 將選項(xiàng)添加到數(shù)組中
[self.latestShowMenuItems addObject:item];
// 判斷該選項(xiàng)的是否能展開, 并且已經(jīng)需要展開
if (item.isCanUnfold && item.isUnfold) {
// 當(dāng)需要展開子集的時(shí)候, 添加子集到數(shù)組, 并設(shè)置子集層級(jí)
[self setupRouCountWithMenuItems:item.subs index:index + 1];
}
}
}
在一開始, 先清空 latestShowMenuItems 中的數(shù)據(jù), 然后添加第一層數(shù)據(jù)
在添加第一層數(shù)據(jù)的時(shí)候, 對(duì)每一個(gè)數(shù)據(jù)進(jìn)行判斷, 判斷是否能展開, 并且是否已經(jīng)展開
如果展開, 添加子類到數(shù)組, 這里用遞歸層層遞進(jìn), 最后將每一層子類展開的數(shù)據(jù)全部添加到 latestShowMenuItems 中, 同時(shí)設(shè)置了每一層數(shù)據(jù)的層級(jí)屬性 index
此時(shí) - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath 方法, 需要做如下修改
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
// 取出點(diǎn)擊的選項(xiàng)
LTMenuItem *menuItem = self.latestShowMenuItems[indexPath.row];
// 判斷是否能夠展開, 不能展開立即返回, 不錯(cuò)任何處理
if (!menuItem.isCanUnfold) return;
// 設(shè)置展開閉合
menuItem.isUnfold = !menuItem.isUnfold;
// 修改latestShowMenuItems中數(shù)據(jù)
[self setupRowCount];
// 刷新列表
[self.tableView reloadData];
}
這時(shí), 我們已經(jīng)可以看到界面上有如下效果
第七步, 添加展開閉合的伸縮動(dòng)畫效果
首先添加一個(gè)屬性 oldShowMenuItems , 用來記錄改變前 latestShowMenuItems 中的數(shù)據(jù)
@interface LTMenuItemViewController () /** 菜單項(xiàng) */ @property (nonatomic, strong) NSMutableArray<LTMenuItem *> *menuItems; /** 當(dāng)前需要展示的數(shù)據(jù) */ @property (nonatomic, strong) NSMutableArray<LTMenuItem *> *latestShowMenuItems; /** 以前需要展示的數(shù)據(jù) */ @property (nonatomic, strong) NSMutableArray<LTMenuItem *> *oldShowMenuItems; @end
修改 - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath 方法, 添加展開動(dòng)畫效果
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
LTMenuItem *menuItem = self.latestShowMenuItems[indexPath.row];
if (!menuItem.isCanUnfold) return;
// 記錄改變之前的數(shù)據(jù)
self.oldShowMenuItems = [NSMutableArray arrayWithArray:self.latestShowMenuItems];
// 設(shè)置展開閉合
menuItem.isUnfold = !menuItem.isUnfold;
// 更新被點(diǎn)擊cell的箭頭指向
[self.tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:(UITableViewRowAnimationAutomatic)];
// 設(shè)置需要展開的新數(shù)據(jù)
[self setupRowCount];
// 判斷老數(shù)據(jù)和新數(shù)據(jù)的數(shù)量, 來進(jìn)行展開和閉合動(dòng)畫
// 定義一個(gè)數(shù)組, 用于存放需要展開閉合的indexPath
NSMutableArray<NSIndexPath *> *indexPaths = @[].mutableCopy;
// 如果 老數(shù)據(jù) 比 新數(shù)據(jù) 多, 那么就需要進(jìn)行閉合操作
if (self.oldShowMenuItems.count > self.latestShowMenuItems.count) {
// 遍歷oldShowMenuItems, 找出多余的老數(shù)據(jù)對(duì)應(yīng)的indexPath
for (int i = 0; i < self.oldShowMenuItems.count; i++) {
// 當(dāng)新數(shù)據(jù)中 沒有對(duì)應(yīng)的item時(shí)
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 {
// 此時(shí) 新數(shù)據(jù) 比 老數(shù)據(jù) 多, 進(jìn)行展開操作
// 遍歷 latestShowMenuItems, 找出 oldShowMenuItems 中沒有的選項(xiàng), 就是需要新增的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)];
}
}
通過判斷新老數(shù)據(jù)的數(shù)量, 已經(jīng)對(duì)應(yīng)的位置, 進(jìn)行刪除和插入操作, 就可以添加對(duì)應(yīng)的動(dòng)畫效果
此時(shí), 效果如下:
第八步, 選項(xiàng)的選中效果
我在cell的左半部分添加了一個(gè)半個(gè)cell寬的透明按鈕, 并設(shè)置了一個(gè)代理方法
當(dāng)點(diǎn)擊透明按鈕時(shí), 調(diào)用代理方法, 修改cell對(duì)應(yīng)的 LTMenuItem 中 isSelected 的值, 來控制選中狀態(tài)
在控制器中指定代理, 并實(shí)現(xiàn)代理方法
- (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];
}
效果如下:
第九步, 使用遞歸進(jìn)行 全選和反選 操作
首先我們?cè)趯?dǎo)航條右側(cè)添加 全選 按鈕, 并實(shí)現(xiàn)對(duì)應(yīng)的點(diǎn)擊方法
#pragma mark - < 點(diǎn)擊事件 >
- (void)allBtnClick:(UIButton *)sender
{
sender.selected = !sender.selected;
[self selected:sender.selected menuItems:self.menuItems];
}
/**
取消或選擇, 某一數(shù)值中所有的選項(xiàng), 包括子層級(jí)
@param selected 是否選中
@param menuItems 選項(xiàng)數(shù)組
*/
- (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];
}
上述的第二個(gè)方法, 就是修改對(duì)應(yīng)數(shù)組中所有的數(shù)據(jù)及子集的選中狀態(tài)
同時(shí)修改該cell的代理方法 - (void)cell:(LTMenuItemCell *)cell didSelectedBtn:(UIButton *)sender 的實(shí)現(xiàn)
#pragma mark - < LTMenuItemCellDelegate >
- (void)cell:(LTMenuItemCell *)cell didSelectedBtn:(UIButton *)sender
{
cell.menuItem.isSelected = !cell.menuItem.isSelected;
// 修改按鈕狀態(tài)
self.allBtn.selected = NO;
[self.tableView reloadData];
}
最終效果如下:
第十步, 使用已選擇數(shù)據(jù)
這里主要是拿到所有已經(jīng)選中的數(shù)據(jù), 并進(jìn)行操作
我只進(jìn)行了打印操作, 如果需要, 可以自己修改
首先添加一個(gè)屬性 selectedMenuItems , 用于存儲(chǔ)已選數(shù)據(jù)
然后通過下列代碼可以獲取所有已經(jīng)選中的數(shù)據(jù)
@interface LTMenuItemViewController () <LTMenuItemCellDelegate> /** 菜單項(xiàng) */ @property (nonatomic, strong) NSMutableArray<LTMenuItem *> *menuItems; /** 當(dāng)前需要展示的數(shù)據(jù) */ @property (nonatomic, strong) NSMutableArray<LTMenuItem *> *latestShowMenuItems; /** 以前需要展示的數(shù)據(jù) */ @property (nonatomic, strong) NSMutableArray<LTMenuItem *> *oldShowMenuItems; /** 已經(jīng)選中的選項(xiàng), 可用于回調(diào) */ @property (nonatomic, strong) NSMutableArray<LTMenuItem *> *selectedMenuItems; /** 全選按鈕 */ @property (nonatomic, strong) UIButton *allBtn; @end
#pragma mark - < 選中數(shù)據(jù) >
- (void)printSelectedMenuItems:(UIButton *)sender
{
[self.selectedMenuItems removeAllObjects];
[self departmentsWithMenuItems:self.menuItems];
NSLog(@"這里是全部選中數(shù)據(jù)\n%@", self.selectedMenuItems);
}
/**
獲取選中數(shù)據(jù)
*/
- (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];
}
}
}
通過遞歸, 一層層拿到所有已經(jīng)選擇的選項(xiàng), 并進(jìn)行打印操作
如果需要另外處理拿到的數(shù)據(jù) 只需要修改 printSelectedMenuItems 方法中的 NSLog(@"這里是全部選中數(shù)據(jù)\n%@", self.selectedMenuItems); 即可
demo地址: https://github.com/963527512/MultilayerMenu
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了IOS多線程實(shí)現(xiàn)多圖片下載(二)的相關(guān)資料,需要的朋友可以參考下2016-03-03
這篇文章主要給大家介紹了關(guān)于iOS中block變量捕獲原理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
這篇文章主要為大家詳細(xì)介紹了IOS安裝CocoaPods教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
詳解iOS中UIButton的三大UIEdgeInsets屬性用法
這篇文章主要介紹了iOS中UIButton的三大UIEdgeInsets屬性用法,分別講解了contentEdgeInsets、imageEdgeInsets和titleEdgeInsets三個(gè)屬性在創(chuàng)建UIButton時(shí)對(duì)樣式的控制,需要的朋友可以參考下2016-04-04
這篇文章主要為大家介紹了iOS小組件開發(fā)WidgetKit功能講解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
iOS?UITextView?實(shí)現(xiàn)類似微博的話題、提及用戶效果
這篇文章主要介紹了iOS?UITextView?實(shí)現(xiàn)類似微博的話題、提及功能,基本思路是使用正則匹配出成對(duì)的#，再利用UITextView的富文本實(shí)現(xiàn)高亮效果,需要的朋友可以參考下2022-06-06
本文是小編給大家收集整理些有關(guān)iOS10適配問題的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
這篇文章主要介紹了iOS微信第三方登錄實(shí)現(xiàn)的全過程，一步一步告訴大家iOS微信實(shí)現(xiàn)第三方登錄的方法，感興趣的小伙伴們可以參考一下2016-01-01
iOS給border設(shè)置漸變色的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于iOS給border設(shè)置漸變色的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了Xcode 8新特性的使用和遇到的坑，非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10