之前一直想要找的分页效果一直找不到，就自己写了一个
大神求点评，先上效果图和层次图
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，新建的群，平时聊聊天，有时间逛都会收集一些代码放群共享，欢迎大神指点～
