OC 简单实现类似美团外卖选单是的双列表联动效果

1.创建MenuAndItemsView,代码如下：

/**左边菜单对右边内容的宽度比例*/
#define PROPORTION 1/5
@class MenuAndItemsView;
@protocol MenuAndItemsViewDelegate <NSObject>

@optional
/**左边的列表被点击*/
- (void)menuAndItemsView:(MenuAndItemsView *)view didClickMenuAtIndexPath:(NSIndexPath *)indexPath;
/**右边的列表被点击*/
- (void)menuAndItemsView:(MenuAndItemsView *)view didClickItemAtIndexPaht:(NSIndexPath *)indexPath;
@end

@interface MenuAndItemsView : UIView
/**菜单列表*/
@property (nonatomic, strong)UITableView *menuTab;
/**内容列表*/
@property (nonatomic, strong)UITableView *itemTab;
/**菜单*/
@property (nonatomic, strong)NSArray *menuArray;
/**内容*/
@property (nonatomic, strong)NSArray *itemsArray;
/**代理*/
@property (nonatomic, weak)id<MenuAndItemsViewDelegate>delegate;
/**初始化*/
- (instancetype)initWithFrame:(CGRect)frame andMenu:(NSArray *)menuArray items:(NSArray *)itemsArray;
@end

#import "MenuAndItemsView.h"
@interface MenuAndItemsView ()<UITableViewDelegate,UITableViewDataSource>

@end

@implementation MenuAndItemsView
- (instancetype)initWithFrame:(CGRect)frame andMenu:(NSArray *)menuArray items:(NSArray *)itemsArray {
    if ([super initWithFrame:frame]) {
        self.menuArray = menuArray;
        self.itemsArray = itemsArray;
        
        [self addSubview:self.menuTab];
        [self addSubview:self.itemTab];
    }
    return self;
}
#pragma mark - UITableViewDelegate UITableViewDataSource
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    if (tableView == self.menuTab) {
        return 80;
    }else {
        return 120;
    }
}
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    if (tableView == self.menuTab) {
        return 1;
    }else {
        return self.itemsArray.count;
    }
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    if (tableView == self.menuTab) {
        return self.menuArray.count;
    }else {
        NSDictionary *itemDic = self.itemsArray[section];
        NSArray *items = itemDic.allValues.firstObject;
        return items.count;
    }
}
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {
    if (tableView == self.itemTab) {
        NSDictionary *itemDic = self.itemsArray[section];
        return itemDic.allKeys.firstObject;
    }
    return nil;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    if (tableView == self.menuTab) {
        UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
        if (!cell) {
            cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"menuCell"];
            if (indexPath.row == 0) {
                cell.backgroundColor = [UIColor whiteColor];
            }else {
                cell.backgroundColor = [UIColor groupTableViewBackgroundColor];
            }
            cell.textLabel.text = self.menuArray[indexPath.row];
            cell.selectionStyle = UITableViewCellSelectionStyleNone;
        }
        return cell;
    }else {
        UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
        if (!cell) {
            cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"itemCell"];
            cell.selectionStyle = UITableViewCellSelectionStyleNone;
            cell.backgroundColor = [UIColor whiteColor];
            NSDictionary *itemDic = self.itemsArray[indexPath.section];
            NSArray *items = itemDic.allValues.firstObject;
            cell.textLabel.text = items[indexPath.row];
        }
        return cell;
    }
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
   
    if (tableView == self.menuTab) {
        //设置背景颜色
        for (NSIndexPath *index in tableView.indexPathsForVisibleRows) {
            UITableViewCell *cell = [tableView cellForRowAtIndexPath:index];
            if (index == indexPath) {
                cell.backgroundColor = [UIColor whiteColor];
            }else {
                cell.backgroundColor = [UIColor groupTableViewBackgroundColor];
            }
        }
        //设置滚动
        NSIndexPath *index = [NSIndexPath indexPathForRow:0 inSection:indexPath.row];
        [self.itemTab scrollToRowAtIndexPath:index atScrollPosition:UITableViewScrollPositionTop animated:YES];
        //代理
        if ([self.delegate respondsToSelector:@selector(menuAndItemsView:didClickMenuAtIndexPath:)]) {
            [self.delegate menuAndItemsView:self didClickMenuAtIndexPath:indexPath];
        }
    }else {
        if ([self.delegate respondsToSelector:@selector(menuAndItemsView:didClickItemAtIndexPaht:)]) {
            [self.delegate menuAndItemsView:self didClickItemAtIndexPaht:indexPath];
        }
    }
}
- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section {
    //根据右边列表即将展示的header来改变左边列表的选中状态
    NSIndexPath *index = [NSIndexPath indexPathForRow:section inSection:0];
    [self.menuTab scrollToRowAtIndexPath:index atScrollPosition:UITableViewScrollPositionMiddle animated:YES];
    for (NSIndexPath *indexPath in self.menuTab.indexPathsForVisibleRows) {
        UITableViewCell *menuCell = [self.menuTab cellForRowAtIndexPath:indexPath];
        if (index == indexPath) {
            menuCell.backgroundColor = [UIColor whiteColor];
        }else {
            menuCell.backgroundColor = [UIColor groupTableViewBackgroundColor];
        }
    }
}
#pragma mark - 懒加载视图
- (UITableView *)menuTab {
    if (!_menuTab) {
        _menuTab = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, self.frame.size.width * PROPORTION, self.frame.size.height) style:UITableViewStylePlain];
        _menuTab.backgroundColor = [UIColor groupTableViewBackgroundColor];
        _menuTab.delegate = self;
        _menuTab.dataSource = self;
        _menuTab.separatorStyle = UITableViewCellSeparatorStyleNone;
    }
    return _menuTab;
}

- (UITableView *)itemTab {
    if (!_itemTab) {
        _itemTab = [[UITableView alloc]initWithFrame:CGRectMake(self.frame.size.width * PROPORTION, 0, self.frame.size.width *(1 - PROPORTION), self.frame.size.height) style:UITableViewStylePlain];
        _itemTab.backgroundColor = [UIColor whiteColor];
        _itemTab.delegate = self;
        _itemTab.dataSource = self;
        _itemTab.separatorStyle = UITableViewCellSeparatorStyleSingleLine;
        _itemTab.separatorColor = [UIColor grayColor];
    }
    return _itemTab;
}

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
}
*/

@end

2.使用：

 NSArray *menuArray = @[@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8"];
    NSArray *itemsArray = @[
  @{@"1":@[@"1.1",@"1.2",@"1.3",@"1.4",@"1.5",@"1.6",@"1.7",@"1.8"]},
  @{@"2":@[@"2.1",@"2.2",@"2.3",@"2.4",@"2.5",@"2.6",@"2.7",@"2.8"]},
  @{@"3":@[@"3.1",@"3.2",@"3.3",@"3.4",@"3.5",@"3.6",@"3.7",@"3.8"]},
  @{@"4":@[@"4.1",@"4.2",@"4.3",@"4.4",@"4.5",@"4.6",@"4.7",@"4.8"]},
  @{@"5":@[@"5.1",@"5.2",@"5.3",@"5.4",@"5.5",@"5.6",@"5.7",@"5.8"]},
  @{@"6":@[@"6.1",@"6.2",@"6.3",@"6.4",@"6.5",@"6.6",@"6.7",@"6.8"]},
  @{@"7":@[@"7.1",@"7.2",@"7.3",@"7.4",@"7.5",@"7.6",@"7.7",@"7.8"]},
  @{@"8":@[@"8.1",@"8.2",@"8.3",@"8.4",@"8.5",@"8.6",@"8.7",@"8.8"]}
  ];
    MenuAndItemsView *view = [[MenuAndItemsView alloc]initWithFrame:CGRectMake(0, 0, UI_SCREEN_WIDTH, UI_SCREEN_HEIGHT - HeightForNagivationBarAndStatusBar - HOME_INDICATOR_HEIGHT) andMenu:menuArray items:itemsArray];
    view.delegate = self;
    [self.view addSubview:view];

#pragma makr - MenuAndItemsViewDelegate
- (void)menuAndItemsView:(MenuAndItemsView *)view didClickMenuAtIndexPath:(NSIndexPath *)indexPath{
    NSLog(@"%@",indexPath);
}
- (void)menuAndItemsView:(MenuAndItemsView *)view didClickItemAtIndexPaht:(NSIndexPath *)indexPath{
    NSLog(@"%@",indexPath);
}