之前一直想要找的分頁效果一直找不到，就自己寫了一個
大神求點評鸣剪，先上效果圖和層次圖
xxxx.gif
segment.png
其他不說了组底，直接上代碼吧
新建一個控制器，繼承UIViewController西傀，下面是.h文件，定義一些屬性只是為了封裝而已
#import <UIKit/UIKit.h>
@interface SegmentVC : UIViewController
/**導(dǎo)航欄標(biāo)題->不需要的在viewDidload里面修改一下就好*/
@property (nonatomic, strong) NSString *headTitle;
/**未選擇按鈕字體顏色 -> 默認[UIColor lightGrayColor]*/
@property (nonatomic, strong) UIColor *behindTitleColor;
/**當(dāng)前選中字體顏色 默認藍色*/
@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;
/**當(dāng)前視圖頁數(shù)*/
@property (nonatomic, assign) NSInteger currentPages;
//存放控制器view
@property (nonatomic, strong) NSArray *viewAry;
//文字數(shù)組
@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];
//假設(shè)控制器以及分頁文字
self.viewAry = @[[TestViewController1 new],[TestViewController2 new],[TestViewController1 new],[TestViewController2 new],[TestViewController1 new]];
self.titleAry = @[@"測試一",@"測試二",@"測試三",@"測試四",@"測試五"];
//設(shè)置控制的每一個子控制器
[self setupChildViewControll];
//設(shè)置分頁按鈕
[self setupPageButton];
}
設(shè)置控制的每一個子控制器
- (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);
}
}
設(shè)置分頁按鈕以及底部滾動條
- (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]]];
}
//設(shè)置上面覆蓋視圖拥褂，以及顯示字體文字顏色視圖
_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];
}
//準(zhǔn)備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;
//修改當(dāng)前按鈕
UIButton *button = [self.view viewWithTag:self.currentPages + kTag];
if ([self.selectBtn isEqual:button]) {
return;
}
self.selectBtn = button;
}
我簡單說一下這個頂部視圖的結(jié)構(gòu)吧，說的不好可以隨便批評牙寞，??饺鹃。 1.最底部是5個label莫秆，label的字體默認設(shè)為灰色 2.再添加一個view，view的高和寬跟label一樣悔详，設(shè)置view不顯示超出本身frame多視圖：clipsToBounds = YES 3.在view里面添加一個midView镊屎，midView的高和寬等于整個頂部視圖frame 4.在midView里添加5個hightLable，frame和text分別跟前面5個label一樣茄螃，默認顏色藍色（當(dāng)前所選分頁的字體顏色） 5.在最上面再添加3個按鈕
感覺說的一塌糊涂缝驳，小白見諒。如果需要代碼的話可以加群：515385179归苍，新建的群用狱，平時聊聊天，有時間逛都會收集一些代碼放群共享拼弃，歡迎大神指點～
