基于scrollView的菜单标题对应tableview的段头标

一个scrollView联动tableview的组件，网上基本都是横向滑动，因项目需要写了竖向滑动组件，记录一下。组件主要功能实现了基于scrollView的菜单标题对应tableview的段头标题。

(低仿支付宝点击首页“更多”跳转页的其中一个组件)

2018-01-05 17_29_12.gif

以下为所有实现代码

#import "ViewController.h"
#import "UIView+XMGExtension.h"
#define kScreenWidth [UIScreen mainScreen].bounds.size.width
#define KscreenHight [UIScreen mainScreen].bounds.size.height
static CGFloat topH = 150.0f;
static CGFloat menuH = 37.0f;
static NSString *const cellIdentifier = @"cellIdentifier";

@interface ViewController ()<UITableViewDelegate, UITableViewDataSource>

/** 顶部滑动视图背景 */
@property (nonatomic,strong)UIScrollView *cateListScrollView;
/** 数据源 */
@property (nonatomic,copy)NSArray *dataArr;
/** 列表 */
@property (nonatomic, strong) UITableView *tableView;
/** 头部视图 */
@property (nonatomic, strong) UIView *headView;
/** 当前选中按钮 */
@property (nonatomic, strong) UIButton *currentBut;
/**红色指示器*/
@property (weak, nonatomic) UIView *iundicatyorView;

@property (nonatomic, strong) NSMutableArray *items;
@end

@implementation ViewController

#pragma mark - lazy
- (NSMutableArray *)items
{
    if (_items == nil) {
        _items = [NSMutableArray array];
    }
    return _items;
}

- (UIView *)headView
{
    if (!_headView) {
        _headView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, topH)];
        UIImageView *imgView = [[UIImageView alloc] init];
        imgView.image = [UIImage imageNamed:@"bg_img"];
        imgView.frame = _headView.frame;
        [_headView addSubview:imgView];
        [self.view addSubview:_headView];
    }
    return _headView;
}

- (UITableView *)tableView
{
    if (!_tableView) {
        _tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, topH + menuH, kScreenWidth, KscreenHight - (topH + menuH)) style:UITableViewStyleGrouped];
        _tableView.delegate = self;
        _tableView.dataSource = self;
        [_tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:cellIdentifier];
        [self.view addSubview:_tableView];
    }
    return _tableView;
}

#pragma mark - 系统回调
- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self headView];
    [self tableView];
    NSArray *arr = @[@"嘿嘿", @"哦你空间", @"额网管", @"欧力银行卡", @"潘", @"大发发发的", @"屁也很高", @"气味儿", @"平均分"];
    self.dataArr = arr;
    [self createsUpScrollView:arr];
}

#pragma mark - private methods
/** 设置顶部标签栏 */
- (void)createsUpScrollView:(NSArray *)array
{
    // 顶部滑动视图
    self.cateListScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, topH, kScreenWidth, menuH)];
    self.cateListScrollView.backgroundColor = [UIColor yellowColor];
    self.cateListScrollView.tag = 3000;
    self.cateListScrollView.showsHorizontalScrollIndicator = NO;
    [self.view addSubview:self.cateListScrollView];

    CGFloat space = 6;
    CGFloat widthContentSize = 0;
    UIColor *textLineColor = [UIColor redColor];
    for (NSInteger i = 0; i < array.count; i++) {
        NSString *pageName = self.dataArr[i];
        NSInteger lenght = [pageName length];
        UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
        btn.frame = CGRectMake(space + widthContentSize, 3, 14*lenght + space , 31);
        btn.tag = i;
        [btn setTitle:pageName forState:UIControlStateNormal];
        [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        // 确保选中的时候不能被点击而重复请求
        [btn setTitleColor:textLineColor forState:UIControlStateDisabled];
        btn.titleLabel.font = [UIFont systemFontOfSize:14];
        [self.cateListScrollView addSubview:btn];
        [self.items addObject:btn];
        // 如果是第一个按钮
        if (i == 0) {
            btn.enabled = NO;
            self.currentBut = btn;
            [btn.titleLabel sizeToFit];
        }
        widthContentSize = 14 * lenght + space + space + widthContentSize;
        [btn addTarget:self action:@selector(selectIndexTableViewAndCollectionView:) forControlEvents:UIControlEventTouchUpInside];
    }
    
    // 指示器（此处有点傻，如果不设置初始坐标，初次不会显示指示器）
    UIView *bottonView = [[UIView alloc]init];
    bottonView.xmg_height = 2;
    bottonView.xmg_x = 8;
    bottonView.xmg_width = 28;
    bottonView.tag = -12; // 区分按钮
    bottonView.xmg_y = menuH - 2;
    bottonView.backgroundColor = textLineColor;
    [self.cateListScrollView addSubview:bottonView];
    self.iundicatyorView = bottonView;
    // 设置滑动范围
    self.cateListScrollView.contentSize = CGSizeMake(widthContentSize + space, menuH);
}

#pragma mark - incident response
/** 点击标题按钮 */
- (void)selectIndexTableViewAndCollectionView:(UIButton *)button
{
    self.currentBut.enabled = YES;
    button.enabled = NO;
    self.currentBut = button;
    // 指示器跟随滑动显示
    [UIView animateWithDuration:0.25 animations:^{
        self.iundicatyorView.xmg_width = self.currentBut.titleLabel.xmg_width;
        self.iundicatyorView.xmg_centerX = self.currentBut.xmg_centerX;
    }];
    // 根据下标滑动tableView对应位置
    [self.tableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:button.tag] animated:YES scrollPosition:UITableViewScrollPositionTop];
}


#pragma mark - UITableView Delegate/Datasource
// 高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return 200;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 2;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
    cell.textLabel.text = @"👌😁🎲";
    cell.selectionStyle = UITableViewCellSelectionStyleNone;
    return cell;
}

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return self.dataArr.count;
}

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 37.0f;
}

- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section
{
    return 1.0f;
}

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
    return self.dataArr[section];
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // 修改位置
    CGFloat offSetY = scrollView.contentOffset.y;
    if (offSetY > 50.0f) {
        [UIView animateWithDuration:0.2 animations:^{
            self.cateListScrollView.xmg_y = 20;
            self.tableView.xmg_y = 20 + menuH;
            self.tableView.xmg_height = KscreenHight - menuH - 20;
        }];
        
    }else {
        [UIView animateWithDuration:0.25 animations:^{
            self.cateListScrollView.xmg_y = topH;
            self.tableView.xmg_y = topH + menuH;
            self.tableView.xmg_height = KscreenHight - menuH - topH;
        }];
    }
}

// 将要显示新的cell的时候调用此方法
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    // 如果不是用户滚动的,就不要往下走了
    if (!(tableView.isDragging || tableView.isDecelerating || tableView.isTracking)) {
        return;
    }
    // 取出按钮
    UIButton *button = self.items[indexPath.section];
    self.currentBut.enabled = YES;
    button.enabled = NO;
    self.currentBut = button;
    // 指示器跟随滑动
    [UIView animateWithDuration:0.25 animations:^{
        self.iundicatyorView.xmg_width = self.currentBut.titleLabel.xmg_width;
        self.iundicatyorView.xmg_centerX = self.currentBut.xmg_centerX;
    }];
}

// 段头即将出现
- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section
{
    UIButton *button = self.items[section];
    CGFloat buttonW = button.frame.origin.x + button.frame.size.width;
    if (buttonW > kScreenWidth) {
        [UIView animateWithDuration:0.25 animations:^{
            self.cateListScrollView.contentOffset = CGPointMake(buttonW - kScreenWidth, 0);
        }];
    }else {
        self.cateListScrollView.contentOffset = CGPointMake(0, 0);
    }
}

@end