ios开发之级联菜单（两个tableView实现）

一：在ios项目实际开发中经常会看到级联菜单的效果：如图：点击左侧菜单，右侧菜单刷新数据。此篇用两个tableView来实现如图效果：

二：代码：

1:构造数据模型：利用kvc快速构建数据模型

#import <Foundation/Foundation.h>

@interface XMGCategory : NSObject
/** 子类别 */
@property (nonatomic, strong) NSArray *subcategories;
/** 姓名 */
@property (nonatomic, strong) NSString *name;
/** 图标 */
@property (nonatomic, strong) NSString *icon;
/** 高亮图标 */
@property (nonatomic, strong) NSString *highlighted_icon;

+ (instancetype)categoryWithDict:(NSDictionary *)dict;
@end

#import "XMGCategory.h"

@implementation XMGCategory
+ (instancetype)categoryWithDict:(NSDictionary *)dict
{
    XMGCategory *c = [[self alloc] init];
    [c setValuesForKeysWithDictionary:dict];
    return c;
}
@end

2：控制器代码实现：

#import "ViewController.h"
#import "XMGCategory.h"

@interface ViewController () <UITableViewDataSource, UITableViewDelegate>
/** 右边表格 */
@property (weak, nonatomic) IBOutlet UITableView *subcategoryTableView;
/** 左边表格 */
@property (weak, nonatomic) IBOutlet UITableView *categoryTableView;
/** 所有的类别数据 */
@property (nonatomic, strong) NSArray *categories;
@end

@implementation ViewController

#pragma mark -- 懒加载数据源
- (NSArray *)categories
{
    if (!_categories) {
        //1：从plist文件中读取数据
        NSArray *dictArray = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"categories" ofType:@"plist"]];
        //2:构造数据源
        NSMutableArray *categoryArray = [NSMutableArray array];
        for (NSDictionary *dict in dictArray) {
            [categoryArray addObject:[XMGCategory categoryWithDict:dict]];
        }
        
        //3:赋值数据源
        _categories = categoryArray;
    }
    return _categories;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //1：默认选中左边表格的第0行
    [self.categoryTableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:0] animated:NO scrollPosition:UITableViewScrollPositionTop];
    
    //2:给右侧的tableView增加额外的滚动区域：在有导航栏的时候，系统默认会为UIScrollView或是继承它的子控件默认增加64的额外滚动区域，如果有两个继承于UIScrollView的子控件，则系统默认只会为第一个添加到视图上的子控件增加额外的滚动区域。如果想禁止，则实现UIScrollView或是tableView等的ContentInset属性，增加额外的滚动区域，或是在控制器中实现self.automaticallyAdjustsScrollViewInsets = NO;
    self.subcategoryTableView.contentInset = UIEdgeInsetsMake(64, 0, 0, 0);
}

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
    
    NSLog(@"categoryTableView - %@", NSStringFromUIEdgeInsets(self.categoryTableView.contentInset));
    NSLog(@"subcategoryTableView - %@", NSStringFromUIEdgeInsets(self.subcategoryTableView.contentInset));
}

#pragma mark - Table view data source
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    // 左边表格
    if (tableView == self.categoryTableView) return self.categories.count;
    
    // 右边表格
    XMGCategory *c = self.categories[self.categoryTableView.indexPathForSelectedRow.row];
    return c.subcategories.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    // 左边表格
    if (tableView == self.categoryTableView) {
        static NSString *ID = @"category";
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
        
        XMGCategory *c = self.categories[indexPath.row];
        
        // 设置普通图片
        cell.imageView.image = [UIImage imageNamed:c.icon];
        // 设置高亮图片（cell选中 -> cell.imageView.highlighted = YES -> cell.imageView显示highlightedImage这个图片）
        cell.imageView.highlightedImage = [UIImage imageNamed:c.highlighted_icon];
        
        // 设置label高亮时的文字颜色
        cell.textLabel.highlightedTextColor = [UIColor redColor];
        
        cell.textLabel.text = c.name;
        cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
        
        return cell;
    } else {
        // 右边表格
        static NSString *ID = @"subcategory";
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
        
        // 获得左边表格被选中的模型
        XMGCategory *c = self.categories[self.categoryTableView.indexPathForSelectedRow.row];
        cell.textLabel.text = c.subcategories[indexPath.row];
        
        return cell;
    }
}

#pragma mark - <UITableViewDelegate>
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (tableView == self.categoryTableView) {
        [self.subcategoryTableView reloadData];
    }
}

三：知识点总结：

1：级联菜单数据模型的设计：1：左侧表格数据模型中含有右侧表格的数据模型，在定义数据模型时，可用类方法，或是实例方法：类方法实现：alloc创建对象，对象调用KVC快速为属性赋值，利用KVC必须满足属性一一对应，不能少也不多

+ (instancetype)categoryWithDict:(NSDictionary *)dict

{

    XMGCategory *c = [[self alloc] init];

    [c setValuesForKeysWithDictionary:dict];

    return c;

}

2：在构造数据源时：要看清plist根节点是数组还是字典：一般自定义plist数据模型时时，最外层为数组，数组为每一个数据模型的字典：数据源，采用懒加载，懒加载保证只初始化一次，且不用关心何时创建也就是不用考虑代码顺序。从plist中读取数据：

 NSArray *dictArray = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"categories" ofType:@"plist"]];

因为懒加载时，数据源本身就没有初始化，不存在，所以用

 _categories = categoryArray;来对数据源进行赋值，若是初始化了，则可以addObjectFromeArray，或是插入数据：insetObject  atIndexSets

3：tableView默认选中某一行：

 //1：默认选中左边表格的第0行

    [self.categoryTableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:0] animated:NO scrollPosition:UITableViewScrollPositionTop];

 4：给UIscrollView，tableView，UICollectionView增加额外的滚动区域调用：contentInset.

给右侧的tableView增加额外的滚动区域：在有导航栏的时候，系统默认会为UIScrollView或是继承它的子控件默认增加64的额外滚动区域，如果有两个继承于UIScrollView的子控件，则系统默认只会为第一个添加到视图上的子控件增加额外的滚动区域。如果想禁止，则实现UIScrollView或是tableView等的ContentInset属性，增加额外的滚动区域，或是在控制器中实现self.automaticallyAdjustsScrollViewInsets = NO;

self.subcategoryTableView.contentInset = UIEdgeInsetsMake(64, 0, 0, 0);

5:在方法

- (void)viewDidAppear:(BOOL)animated里视图已经出现，在此方法中，也就是视图出现的时候，能正确打印，调试，或是对控件进行一些设置

6：两个tableView，在实现数据源或是代理方法时，要区分不同的tableView：如：

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

    // 左边表格

    if (tableView == self.categoryTableView) return self.categories.count;

       // 右边表格

    XMGCategory *c = self.categories[self.categoryTableView.indexPathForSelectedRow.row];

    return c.subcategories.count;

}

  其中，self.categoryTableView.indexPathForSelectedRow，得到的是当前表格选中的indexPath区域

7：UITableViewCell:当某个cell被选中时，系统会默认显示cell中控件高亮时的状态，取消选中时，显示常态：可以设置cell中的UIimageView，lable高亮时的状态：

      //1： 设置普通图片

        cell.imageView.image = [UIImage imageNamed:c.icon];

        // 设置高亮图片（cell选中 -> cell.imageView.highlighted = YES -> cell.imageView显示highlightedImage这个图片）

        cell.imageView.highlightedImage = [UIImage imageNamed:c.highlighted_icon];       

    // 2：设置label高亮时的文字颜色

        cell.textLabel.highlightedTextColor = [UIColor redColor];