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];