美文网首页iOS开发随笔iOS Developer
分页控制器,这个还不够?

分页控制器,这个还不够?

作者: _Comma | 来源:发表于2016-12-27 10:10 被阅读91次

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

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

    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,新建的群,平时聊聊天,有时间逛都会收集一些代码放群共享,欢迎大神指点~

    相关文章

      网友评论

        本文标题:分页控制器,这个还不够?

        本文链接:https://www.haomeiwen.com/subject/cpvsvttx.html