一个便于使用的 iOS分页标题视图 LBPageMenu

LBPageMenu

效果图

默认滚动风格

拉伸风格

拉伸风格指定宽度 （默认20）

实现思路

将下面滚动的大scrollView 传入到标题视图中，监听大的scrollview的滚动，实现标题的滚动和知识条的滚动

关键逻辑

普通跟手滚动逻辑

就是 计算出当前大scrollView移动的距离x占移动一页的距离y的比例，
x / (一页的宽度) - （floorf）(x / (一页的宽度) = 一页净移动的距离 z
当前页面移动的比例为 q = z/y,
q 即为当前页面移动的比例，
在根据两个按钮之间的差值，计算出即时的按钮的位置，宽度即可

    UIButton *fromButton = self.buttons[fromIndex];
    UIButton *toButton = self.buttons[toIndex];
    
    // 2个按钮之间的距离
    CGFloat xDistance = toButton.center.x - fromButton.center.x;
    // 2个按钮宽度的差值
    CGFloat wDistance = toButton.frame.size.width - fromButton.frame.size.width;
    
    CGRect newFrame = self.tracker.frame;
    CGPoint newCenter = self.tracker.center;
    
    newCenter.x = fromButton.center.x + xDistance * progress;
    newFrame.size.width = fromButton.frame.size.width + wDistance * progress;
    self.tracker.frame = newFrame;
    self.tracker.center = newCenter;

拉伸跟手滚动逻辑

拉伸跟手逻辑稍微复杂
主要的有一点，开始滚动页面的时候指示条逐渐变长，是滚动到页面正中间的时候，指示条的宽度达到最长，将两个按钮都包括进去，随后逐渐变短， 根据这一逻辑来计算即时的位置和宽度

      NSInteger baseIndex = floorf(offsetProgress);
        if (baseIndex > self.buttons.count - 1 && baseIndex < 0) {
            return;
        }
        CGFloat progressStrech = offsetProgress - baseIndex;
        CGRect leftFrame = self.buttons[baseIndex].frame;
        CGRect rightFrame = self.buttons[baseIndex + 1].frame;
        CGFloat leftWidth = CGRectGetWidth(leftFrame);
        CGFloat rightWidth = CGRectGetWidth(rightFrame);
        CGFloat leftX = CGRectGetMinX(leftFrame);
        CGFloat rightX = CGRectGetMinX(rightFrame);
        ///最大宽度就是两个按钮的宽度之和加上间隙
        CGFloat maxWidth = CGRectGetMinX(rightFrame) - leftX + CGRectGetWidth(rightFrame);
        CGFloat targetX;
        CGFloat targetWidth;
        //前50%，只增加width；后50%，移动x并减小width
        /*注意，下面的*2 的来历是
        我们走的比例都要和0.5去比，看
        占0.5的多少比例 即 /0.5 = * 2
        因为我们都是以滚动到页面的中点为界限的，这时候的
        总的比例不是1， 而是0.5
        */
        if (progressStrech <= 0.5) {
             
            targetX = CGRectGetMinX(leftFrame);
            targetWidth = [self interpolationFrom:leftWidth to:maxWidth percent:progressStrech * 2];
        } else {
            targetX = [self interpolationFrom:leftX to:rightX percent:(progressStrech - 0.5)*2];
            targetWidth = [self interpolationFrom:maxWidth to:rightWidth percent:(progressStrech - 0.5)*2];
        }
        CGRect frame = self.tracker.frame;
        frame.origin.x = targetX;
            frame.size.width = targetWidth;
              self.tracker.frame = frame;

使用方法

pod ‘LBPageMenu’

#pragma mark - lazy load

- (LBPageMenu *)menu
{
    if (!_menu) {
        LBPageMenuConfiguration *configuration = [[LBPageMenuConfiguration alloc] init];
        configuration.unSelectedTitleColor = [UIColor cyanColor];
        configuration.selectedTittleColor = [UIColor magentaColor];
        ///指示条滚动风格，这里配置拉伸风格（默认是普通滚动）
        configuration.indicatorStyle = LBPageMenuIndicatorStyleStetch;
        _menu = [[LBPageMenu alloc] initWithFrame:CGRectMake(0, 100, CGRectGetWidth(self.view.bounds), 50) configuration:configuration];
        _menu.delegate = self;
        _menu.backgroundColor = [UIColor lightGrayColor];
    }
    return _menu;
}

- (UIScrollView *)scrollView
{
    if (!_scrollView) {
        _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 200, CGRectGetWidth(self.view.bounds), CGRectGetHeight(self.view.bounds) - 300)];
        _scrollView.contentSize = CGSizeMake(CGRectGetWidth(self.view.bounds) * self.titleArray.count, 0);
        _scrollView.delegate = self;
        _scrollView.pagingEnabled = YES;
    }
    return _scrollView;
}

///展示数据
   self.titleArray = @[@"标题", @"中秋节", @"祝你快乐",@"啦啦啦",@"标题", @"中秋节", @"祝你快乐",@"啦啦啦",@"标题", @"中秋节", @"祝你快乐",@"啦啦啦",@"标题", @"中秋节", @"祝你快乐",@"啦啦啦"];
    [self.view addSubview:self.scrollView];
    [self.view addSubview:self.menu];

    self.menu.bridgeScrollView = self.scrollView;
    [self.menu setItems:self.titleArray selectedItemIndex:0];

如果对您有帮助，欢迎star
demo