分頁控制器，這個還不夠？

之前一直想要找的分頁效果一直找不到，就自己寫了一個

大神求點評，先上效果圖和層次圖

xxxx.gif
segment.png

其他不說了，直接上代碼吧
新建一個控制器，繼承UIViewController，下面是.h文件，定義一些屬性只是為了封裝而已

#import <UIKit/UIKit.h>

@interface SegmentVC : UIViewController

/**導(dǎo)航欄標(biāo)題->不需要的在viewDidload里面修改一下就好*/
@property (nonatomic, strong) NSString *headTitle;

/**未選擇按鈕字體顏色 -> 默認(rèn)[UIColor lightGrayColor]*/
@property (nonatomic, strong) UIColor *behindTitleColor;

/**當(dāng)前選中字體顏色 默認(rèn)藍(lán)色*/
@property (nonatomic, strong) UIColor *selectTitleColor;

/**滑動線條的顏色 默認(rèn)藍(lán)色*/
@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;
//文字?jǐn)?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的字體默認(rèn)設(shè)為灰色 2.再添加一個view，view的高和寬跟label一樣，設(shè)置view不顯示超出本身frame多視圖：clipsToBounds = YES 3.在view里面添加一個midView，midView的高和寬等于整個頂部視圖frame 4.在midView里添加5個hightLable，frame和text分別跟前面5個label一樣，默認(rèn)顏色藍(lán)色（當(dāng)前所選分頁的字體顏色） 5.在最上面再添加3個按鈕

感覺說的一塌糊涂，小白見諒。如果需要代碼的話可以加群：515385179，新建的群，平時聊聊天，有時間逛都會收集一些代碼放群共享，歡迎大神指點～

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,699評論 4贊 61
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,351評論 25贊 708
  • 2014.10.02 廈門大學(xué)的同學(xué)來找我跟小冉玩，我們出去吃飯看電影聊天，在泉州這座寂寞的城市走走停停，心情也起...
    枚橙roro閱讀 339評論 0贊 1
  • 一直想記錄一些東西，為了某些無處安放的情緒，希望簡書可以幫我達(dá)成愿望
    葉彌兒閱讀 160評論 0贊 0
  • 1、iconfont批量下載： var icons = document.querySelectorAll('.p...
    jeatime6閱讀 614評論 0贊 0

友情鏈接更多精彩內(nèi)容