分页控制器，这个还不够？

之前一直想要找的分页效果一直找不到，就自己写了一个

大神求点评，先上效果图和层次图

xxxx.gif segment.png

其他不说了，直接上代码吧
新建一个控制器，继承UIViewController，下面是.h文件，定义一些属性只是为了封装而已

#import <UIKit/UIKit.h>

@interface SegmentVC : UIViewController

/**导航栏标题->不需要的在viewDidload里面修改一下就好*/
@property (nonatomic, strong) NSString *headTitle;

/**未选择按钮字体颜色 -> 默认[UIColor lightGrayColor]*/
@property (nonatomic, strong) UIColor *behindTitleColor;

/**当前选中字体颜色 默认蓝色*/
@property (nonatomic, strong) UIColor *selectTitleColor;

/**滑动线条的颜色 默认蓝色*/
@property (nonatomic, strong) UIColor *pageLineColor;

@end

新建两个空白控制器做测试用，下面是.m的头文件和宏定义以及私有属性

#import "SegmentVC.h"
#import "TestViewController1.h"
#import "TestViewController2.h"

#define PageCount 5
#define kButton_h 50
#define kTag 1000

#define KSCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height
#define KSCREEN_WIDTH [UIScreen mainScreen].bounds.size.width

@interface SegmentVC ()<UIScrollViewDelegate>

/**分页里面的滚动视图*/
@property (nonatomic, strong) UIScrollView *scrollView;
/**选中按钮*/
@property (nonatomic, strong) UIButton *selectBtn;
/**选中按钮显示的视图*/
@property (nonatomic, strong) UIView *selectView;
/**颜色字体添加的视图*/
@property (nonatomic, strong) UIView *mainView;
/**当前视图页数*/
@property (nonatomic, assign) NSInteger currentPages;

//存放控制器view
@property (nonatomic, strong) NSArray *viewAry;
//文字数组
@property (nonatomic, strong) NSArray *titleAry;

/**底部滚动视图条*/
@property (nonatomic, strong) UIView *pageLine;

@end

懒加载和viewDidLoad

- (UIView *)pageLine {
    if (_pageLine == nil) {
        self.pageLine = [[UIView alloc]init];
        _pageLine.backgroundColor = self.pageLineColor ? self.pageLineColor : [UIColor blueColor];
    }
    return _pageLine;
}

- (UIScrollView *)scrollView {
    if (!_scrollView) {
        /**如果需要修改滚动视图frame在这修改*/
        _scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, kButton_h+64, KSCREEN_WIDTH, KSCREEN_HEIGHT-64-kButton_h)];
        _scrollView.pagingEnabled = YES;
        _scrollView.delegate = self;
        _scrollView.bounces = NO;
        _scrollView.showsVerticalScrollIndicator = NO;
        _scrollView.showsHorizontalScrollIndicator = NO;
        _scrollView.contentSize = CGSizeMake(KSCREEN_WIDTH * PageCount, KSCREEN_HEIGHT-64-kButton_h);
        
        _scrollView.backgroundColor = [UIColor orangeColor];
    }
    return _scrollView;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    self.navigationItem.title = self.headTitle;
    self.automaticallyAdjustsScrollViewInsets = NO;
    [self.view addSubview:self.scrollView];
    
    //假设控制器以及分页文字
    self.viewAry = @[[TestViewController1 new],[TestViewController2 new],[TestViewController1 new],[TestViewController2 new],[TestViewController1 new]];
    self.titleAry = @[@"测试一",@"测试二",@"测试三",@"测试四",@"测试五"];
    
    //设置控制的每一个子控制器
    [self setupChildViewControll];
    //设置分页按钮
    [self setupPageButton];
}

设置控制的每一个子控制器

- (void)setupChildViewControll {
    for (int i = 0; i < self.viewAry.count; i ++) {
        UIViewController *viewC = self.viewAry[i];
        [self addChildViewController:viewC];
        [_scrollView addSubview:viewC.view];
        viewC.view.frame = CGRectMake(KSCREEN_WIDTH * i, 0, KSCREEN_WIDTH, KSCREEN_HEIGHT);
    }
}

设置分页按钮以及底部滚动条

- (void)setupPageButton {
    //最底层label
    for (int i = 0; i < self.titleAry.count; i ++) {
        CGFloat xMargin = KSCREEN_WIDTH / self.titleAry.count * i;
        [self.view addSubview:[self returnLabel:self.titleAry[i]
                                       andFrame:CGRectMake(xMargin, 64, KSCREEN_WIDTH/self.titleAry.count, kButton_h)
                                       andColor:self.behindTitleColor ? self.behindTitleColor : [UIColor lightGrayColor]]];
    }
    //设置上面覆盖视图，以及显示字体文字颜色视图
    _selectView = [[UIView alloc]initWithFrame:CGRectMake(0, 64, KSCREEN_WIDTH/self.titleAry.count, kButton_h)];
    _selectView.userInteractionEnabled = YES;
    _selectView.clipsToBounds = YES;//不显示超出本身frame的视图
    [self.view addSubview:_selectView];
    //添加覆盖视图里的label
    self.mainView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, KSCREEN_WIDTH, kButton_h)];
    self.mainView.userInteractionEnabled = YES;
    for (int i = 0; i < self.titleAry.count; i ++) {
        CGFloat xMargin = KSCREEN_WIDTH / self.titleAry.count * i;
        [self.mainView addSubview:[self returnLabel:self.titleAry[i]
                                         andFrame:CGRectMake(xMargin, 0, KSCREEN_WIDTH/self.titleAry.count, kButton_h)
                                         andColor:self.selectTitleColor ? self.selectTitleColor:[UIColor blueColor]]];
    }
    [_selectView addSubview:self.mainView];
    
    //添加最上面点击按钮
    for (int i = 0; i < self.titleAry.count; i ++) {
        CGFloat xMargin = KSCREEN_WIDTH / self.titleAry.count * i;
        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
        button.frame = CGRectMake(xMargin, 64, KSCREEN_WIDTH/self.titleAry.count, kButton_h);
        button.tag = i + kTag;
        [button addTarget:self action:@selector(pageClick:) forControlEvents:UIControlEventTouchUpInside];
        [self.view addSubview:button];
        if (i == 0) {
            self.selectBtn = button;
        }
    }
    
    //添加下方跟着滚动的线
    CGFloat lineWidth = KSCREEN_WIDTH / self.titleAry.count / 2;
    self.pageLine.frame = CGRectMake(lineWidth / 2, 64 + kButton_h - 2, lineWidth, 2);
    [self.view addSubview:self.pageLine];
}

//准备label
- (UILabel *)returnLabel:(NSString *)title andFrame:(CGRect)rect andColor:(UIColor *)color
{
    UILabel * label = [[UILabel alloc]initWithFrame:rect];
    label.font = [UIFont boldSystemFontOfSize:15];
    label.textColor = color;
    label.text = title;
    label.userInteractionEnabled = YES;
    label.textAlignment = NSTextAlignmentCenter;
    return label;
}

按钮点击事件

- (void)pageClick:(UIButton *)btn {
    self.currentPages = btn.tag - kTag;
    [self gotoCurrentPage];
}
- (void)gotoCurrentPage {
    CGRect frame;
    frame.origin.x = self.scrollView.frame.size.width * self.currentPages;
    frame.origin.y = 0;
    frame.size = _scrollView.frame.size;
    [_scrollView scrollRectToVisible:frame animated:YES];
    
}

代理

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    
    //修改两个视图的frame
    CGRect rect = self.selectView.frame;
    rect.origin.x = (scrollView.contentOffset.x / KSCREEN_WIDTH) * (KSCREEN_WIDTH / self.titleAry.count);
    self.selectView.frame = rect;
    
    CGRect mainRect = self.mainView.frame;
    mainRect.origin.x = - (scrollView.contentOffset.x / KSCREEN_WIDTH) * (KSCREEN_WIDTH / self.titleAry.count);
    self.mainView.frame = mainRect;

    //修改下面线条的frame
    CGRect lineRect = _pageLine.frame;
    lineRect.origin.x = (scrollView.contentOffset.x / KSCREEN_WIDTH) * (KSCREEN_WIDTH / self.titleAry.count) + (KSCREEN_WIDTH / self.titleAry.count / 4);;
    _pageLine.frame = lineRect;
    
    //修改当前按钮
    UIButton *button = [self.view viewWithTag:self.currentPages + kTag];
    if ([self.selectBtn isEqual:button]) {
        return;
    }
    self.selectBtn = button;
}

我简单说一下这个顶部视图的结构吧，说的不好可以随便批评，😂。 1.最底部是5个label，label的字体默认设为灰色 2.再添加一个view，view的高和宽跟label一样，设置view不显示超出本身frame多视图：clipsToBounds = YES 3.在view里面添加一个midView，midView的高和宽等于整个顶部视图frame 4.在midView里添加5个hightLable，frame和text分别跟前面5个label一样，默认颜色蓝色（当前所选分页的字体颜色） 5.在最上面再添加3个按钮

感觉说的一塌糊涂，小白见谅。如果需要代码的话可以加群：515385179，新建的群，平时聊聊天，有时间逛都会收集一些代码放群共享，欢迎大神指点～