一個scrollView聯(lián)動tableview的組件，網(wǎng)上基本都是橫向滑動，因項目需要寫了豎向滑動組件，記錄一下。組件主要功能實現(xiàn)了基于scrollView的菜單標(biāo)題對應(yīng)tableview的段頭標(biāo)題。

(低仿支付寶點擊首頁“更多”跳轉(zhuǎn)頁的其中一個組件)

2018-01-05 17_29_12.gif

以下為所有實現(xiàn)代碼

#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;
/** 數(shù)據(jù)源 */
@property (nonatomic,copy)NSArray *dataArr;
/** 列表 */
@property (nonatomic, strong) UITableView *tableView;
/** 頭部視圖 */
@property (nonatomic, strong) UIView *headView;
/** 當(dāng)前選中按鈕 */
@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 - 系統(tǒng)回調(diào)
- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self headView];
    [self tableView];
    NSArray *arr = @[@"嘿嘿", @"哦你空間", @"額網(wǎng)管", @"歐力銀行卡", @"潘", @"大發(fā)發(fā)發(fā)的", @"屁也很高", @"氣味兒", @"平均分"];
    self.dataArr = arr;
    [self createsUpScrollView:arr];
}

#pragma mark - private methods
/** 設(shè)置頂部標(biāo)簽欄 */
- (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];
        // 確保選中的時候不能被點擊而重復(fù)請求
        [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];
    }
    
    // 指示器（此處有點傻，如果不設(shè)置初始坐標(biāo)，初次不會顯示指示器）
    UIView *bottonView = [[UIView alloc]init];
    bottonView.xmg_height = 2;
    bottonView.xmg_x = 8;
    bottonView.xmg_width = 28;
    bottonView.tag = -12; // 區(qū)分按鈕
    bottonView.xmg_y = menuH - 2;
    bottonView.backgroundColor = textLineColor;
    [self.cateListScrollView addSubview:bottonView];
    self.iundicatyorView = bottonView;
    // 設(shè)置滑動范圍
    self.cateListScrollView.contentSize = CGSizeMake(widthContentSize + space, menuH);
}

#pragma mark - incident response
/** 點擊標(biāo)題按鈕 */
- (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;
    }];
    // 根據(jù)下標(biāo)滑動tableView對應(yīng)位置
    [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的時候調(diào)用此方法
- (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;
    }];
}

// 段頭即將出現(xiàn)
- (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