UIPageViewController+UIScrollVie

今日头条版面分为滚动的标题+滚动的详情页，标题控件用UISCrollView来写，详情页就交给UIPageViewController来控制了。

1、自定义一个HeadScrollView继承于UIScrollView

.h文件：

@protocol HeadScrollViewDelegate <NSObject>

@required
// 翻页
- (void)turnPageWithIndex:(NSInteger)index;

@end

@interface HeadScrollView : UIScrollView

@property (nonatomic,weak) id<HeadScrollViewDelegate> hDeledate;

- (instancetype)initWithTitleArray:(NSArray *)titleArray;

// 滑动page，head滑动
- (void)slideHeadWithIndex:(NSInteger)index;

@end

.m文件

@interface HeadScrollView ()

@property (nonatomic,copy) NSArray *titleArray;
@property (nonatomic,strong) NSMutableArray *buttonArray;// 按钮组
@property (nonatomic,strong) UIView *bottomLine;// 指示线

@end

@implementation HeadScrollView

- (instancetype)initWithTitleArray:(NSArray *)titleArray
{
    self = [super init];
    if (self) {
        self.titleArray = titleArray;
        [self initSubviews];
    }
    return self;
}

- (void)initSubviews{
    self.showsHorizontalScrollIndicator = NO;
    [self.titleArray enumerateObjectsUsingBlock:^(NSString *  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
        [button setTitle:obj forState:(UIControlStateNormal)];
        if (idx == 0) {
            [button setTitleColor:kHexColor(0xFFAE00) forState:(UIControlStateNormal)];
        } else {
            [button setTitleColor:kHexColor(0x484848) forState:(UIControlStateNormal)];
        }
        button.titleLabel.font = [UIFont systemFontOfSize:19];
        [button addTarget:self action:@selector(buttonClick:) forControlEvents:(UIControlEventTouchUpInside)];
        [self.buttonArray addObject:button];
        [self addSubview:button];
        [button mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(self);
            make.left.equalTo(self.mas_left).offset(kScreenWidth/5.f * idx);
            make.height.mas_equalTo(kScale(48));
            make.width.mas_equalTo(kScreenWidth/5.f);
        }];
    }];
    
    self.bottomLine = [[UIView alloc] init];
    self.bottomLine.backgroundColor = kHexColor(0xFFAE00);
    [self addSubview:self.bottomLine];
    UIButton *tempButton = self.buttonArray[0];
    [self.bottomLine mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(CGSizeMake(kScale(42), 2));
        make.centerX.equalTo(tempButton);
        make.top.equalTo(tempButton.mas_bottom);
    }];
}

#pragma mark -- action

- (void)buttonClick:(UIButton *)sender{
    // 指示线移动
    [self.bottomLine mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(CGSizeMake(kScale(42), 2));
        make.centerX.equalTo(sender);
        make.top.equalTo(sender.mas_bottom);
    }];
    // 标题改颜色
    [self.buttonArray enumerateObjectsUsingBlock:^(UIButton *  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        [obj setTitleColor:kHexColor(0x484848) forState:(UIControlStateNormal)];
    }];
    [sender setTitleColor:kHexColor(0xFFAE00) forState:(UIControlStateNormal)];
    // page翻页
    if (self.hDeledate && [self.hDeledate respondsToSelector:@selector(turnPageWithIndex:)]) {
        [self.hDeledate turnPageWithIndex:[self.buttonArray indexOfObject:sender]];
    }
}

// 滑动page，head滑动
- (void)slideHeadWithIndex:(NSInteger)index{
    // 指示线移动
    UIButton *tempButton = self.buttonArray[index];
    [self.bottomLine mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(CGSizeMake(kScale(42), 2));
        make.centerX.equalTo(tempButton);
        make.top.equalTo(tempButton.mas_bottom);
    }];
    // 标题改颜色
    [self.buttonArray enumerateObjectsUsingBlock:^(UIButton *  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        [obj setTitleColor:kHexColor(0x484848) forState:(UIControlStateNormal)];
    }];
    [tempButton setTitleColor:kHexColor(0xFFAE00) forState:(UIControlStateNormal)];
}

#pragma mark -- 懒加载

- (NSMutableArray *)buttonArray{
    if (!_buttonArray) {
        _buttonArray = [[NSMutableArray alloc] init];
    }
    return _buttonArray;
}


@end

2、 主界面：

- (void)viewDidLoad {
    [super viewDidLoad];
    [self initNavi];// 导航栏设置
    [self initSubviews];// 界面设置
}

- (void)initSubviews{
    self.view.backgroundColor = kHexColor(0xF0F0F9);
    NSArray *titleArray = @[@"关注",@"推荐",@"热点",@"视频",@"上海",@"科技",@"国际",@"财经",@"体育",@"汽车"];
    self.headScroll = [[HeadScrollView alloc] initWithTitleArray:titleArray];
    self.headScroll.backgroundColor = [UIColor whiteColor];
    self.headScroll.hDeledate = self;
    [self.view addSubview:self.headScroll];
    [self.headScroll mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.right.equalTo(self.view);
        make.height.mas_equalTo(kScale(50));
    }];
    [self.view layoutIfNeeded];
    self.headScroll.contentSize = CGSizeMake(titleArray.count * kScreenWidth/5.f, kScale(50));
    
    // page
    /*
     *
     style:
     UIPageViewControllerTransitionStylePageCurl: 卷曲样式类似翻书效果
     UIPageViewControllerTransitionStyleScroll: UIScrollView滚动效果
     
     navigationOrientation:
     UIPageViewControllerNavigationOrientationHorizontal: 水平导航方式
     UIPageViewControllerNavigationOrientationVertical: 垂直导航方式
     
     options:
     UIPageViewControllerOptionSpineLocationKey 这个key只有在style是翻书效果UIPageViewControllerTransitionStylePageCurl的时候才有作用, 它定义的是书脊的位置,值对应着UIPageViewControllerSpineLocation这个枚举项,不要定义错了哦.
     UIPageViewControllerOptionInterPageSpacingKey这个key只有在style是UIScrollView滚动效果UIPageViewControllerTransitionStyleScroll的时候才有作用, 它定义的是两个页面之间的间距(默认间距是0).
     
     doubleSided：默认NO（显示一个界面）,设置一个界面；若为yes,则至少设置两个界面
     */

    self.pageIndex = 0;// UIPageViewController控制器里的当前VC下标
    self.pageViewController = [[UIPageViewController alloc] initWithTransitionStyle:UIPageViewControllerTransitionStyleScroll navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal options:nil];
  // UIPageViewControllerDelegate,UIPageViewControllerDataSource
    self.pageViewController.delegate = self;
    self.pageViewController.dataSource = self;
    
    [self.pageViewController setViewControllers:@[[self.dataArray firstObject]] direction:UIPageViewControllerNavigationDirectionForward animated:YES completion:nil];
    
    [self addChildViewController:self.pageViewController];
    [self.view addSubview:self.pageViewController.view];
    [self.pageViewController.view mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.headScroll.mas_bottom).offset(1);
        make.left.right.bottom.equalTo(self.view);
    }];

}

#pragma mark -- 懒加载
- (NSMutableArray *)dataArray{
    if (!_dataArray) {
        _dataArray = [[NSMutableArray alloc] init];
        for (int i = 0; i < 10; i++) {
            // UIPageViewController子控制器
            MinePageViewController *giftVC = [[MinePageViewController alloc] init];
            [self.dataArray addObject:giftVC];
        }
    }
    return _dataArray;
}

代理：

#pragma mark -- UIPageViewControllerDataSource
// 向后滑
- (nullable UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerBeforeViewController:(UIViewController *)viewController{
    
    NSInteger index = [self.dataArray indexOfObject:viewController];
    if (index == 0 || (index == NSNotFound)) {
        return nil;
    }
    index--;
    return [self.dataArray objectAtIndex:index];
}
// 向前滑
- (nullable UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerAfterViewController:(UIViewController *)viewController{
    
    NSInteger index = [self.dataArray indexOfObject:viewController];
    if (index == self.dataArray.count - 1 || (index == NSNotFound)) {
        return nil;
    }
    index++;
    return [self.dataArray objectAtIndex:index];
    
}


#pragma mark -- UIPageViewControllerDelegate
// 将要滑动
- (void)pageViewController:(UIPageViewController *)pageViewController willTransitionToViewControllers:(NSArray<UIViewController *> *)pendingViewControllers {
    
    UIViewController *nextVC = [pendingViewControllers firstObject];
    NSInteger index = [self.dataArray indexOfObject:nextVC];
    self.pageIndex = index;
}
// 结束滑动
- (void)pageViewController:(UIPageViewController *)pageViewController didFinishAnimating:(BOOL)finished previousViewControllers:(NSArray<UIViewController *> *)previousViewControllers transitionCompleted:(BOOL)completed{
    if (completed) {
        [self.headScroll slideHeadWithIndex:self.pageIndex];
    }
}

#pragma mark -- HeadScrollViewDelegate
// 翻页
- (void)turnPageWithIndex:(NSInteger)index{
    
    UIViewController *vc = [self.dataArray objectAtIndex:index];
    if (index > self.pageIndex) {
        [self.pageViewController setViewControllers:@[vc] direction:UIPageViewControllerNavigationDirectionForward animated:YES completion:^(BOOL finished) {
        }];
    } else {
        [self.pageViewController setViewControllers:@[vc] direction:UIPageViewControllerNavigationDirectionReverse animated:YES completion:^(BOOL finished) {
            
        }];
    }
    
    self.pageIndex = index;
}

这样我们就简单的制作完成类似今日头条的板块✌️

注：UIPageViewController用法可以看这篇文章https://www.jianshu.com/p/46c8c585d50b