UIPageViewController+UIScrollView制作今日头条版面

今日头条版面分为滚动的标题+滚动的详情页，标题控件用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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,905评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,140评论 2赞 379
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,791评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,483评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,476评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,516评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,905评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,560评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,778评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,338评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,925评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2赞 342