ZJScrollPageView

OC版本的简单方便的集成网易新闻, 腾讯视频, 头条 等首页的滑块视图联动的效果, segmentVIew, scrollViewController

Swift版本的请点击这里

注意，如果您需要查看详细的注释，可以下载Swift版本里面，这里很多地方就没有把注释移过来

---

使用示例效果

---

可以简单快速灵活的实现上图中的效果

---

书写思路移步

简书1

要求

• iOS 7.0+

安装

• ### 直接将下载文件的ZJScrollPageView文件夹下的文件拖进您的项目中，然后#import "ZJScrollPageView.h"即可使用

如果使用CocoaPods，在您项目的Podfile文件中添加pod ZJScrollPageView(未更新)

使用

特别说明

因为大家可能会复用同一个controller来显示内容

• 在对应的controller的viewWillAppear()等生命周期里面，可以根据不同的title来显示不同的内容或刷新视图

  • 请注意：如果您希望所有的子控制器的view的系统生命周期方法被正确调用
  • 请重写父控制器的'shouldAutomaticallyForwardAppearanceMethods'方法并返回NO
  • 当然，如果您不执行此操作，子控制器的生命周期方法将不会被正确调用
  • 如果您仍然想利用子控制器的生命周期方法，请使用'ZJScrollPageViewChildVcDelegate'提供的代理方法
  • 或者'ZJScrollPageViewDelegate'提供的代理方法

---

更新说明

• 2016/05/26 添加了一个通知ScrollPageViewDidShowThePageNotification，您可以监听此通知来获取当前显示的页数，使用示例可参考 ZJSegmentStyle.h中的说明
• 2016/05/27 添加了一个style属性 segmentViewBounces，用于设置segmentView是否有弹性
• 2016/05/27 添加了一个style属性 scrollContentView，用于设置contentView是否能滑动
• 2016/06/12 增加了一个分类，提供了 scrollPageParentViewController 属性，方便在每个界面获取到父控制器。
• 2016/06/29 更改了初始化方法，改为使用代理来传递相关的自控制器，方便动态更新。
• 2016/06/30 新增了子控制器遵守的协议 ZJScrollPageViewChildVcDelegate，用于页面出现时加载数据。
• 2016/08/21 增加了可以显示图片，和设置图片的不同位置的功能。

* 2016/10/28 修复一直的bug，保证了子控制器的生命周期方法被正确调用。

可以设置的style效果

/** 是否显示遮盖 默认为NO */
@property (assign, nonatomic, getter=isShowCover) BOOL showCover;
/** 是否显示滚动条 默认为NO*/
@property (assign, nonatomic, getter=isShowLine) BOOL showLine;
/** 是否缩放标题 默认为NO*/
@property (assign, nonatomic, getter=isScaleTitle) BOOL scaleTitle;
/** 是否滚动标题 默认为YES 设置为NO的时候所有的标题将不会滚动, 并且宽度会平分 和系统的segment效果相似 */
@property (assign, nonatomic, getter=isScrollTitle) BOOL scrollTitle;
/** segmentView是否有弹性 默认为NO*/
@property (assign, nonatomic, getter=isSegmentViewBounces) BOOL segmentViewBounces;
/** 是否颜色渐变 默认为NO*/
@property (assign, nonatomic, getter=isGradualChangeTitleColor) BOOL gradualChangeTitleColor;
/** 是否显示附加的按钮 默认为NO*/
@property (assign, nonatomic, getter=isShowExtraButton) BOOL showExtraButton;
/** 内容view是否能滑动 默认为YES*/
@property (assign, nonatomic, getter=isScrollContentView) BOOL scrollContentView;
/** 设置附加按钮的背景图片 默认为nil*/
@property (strong, nonatomic) NSString *extraBtnBackgroundImageName;
/** 滚动条的高度 默认为2 */
@property (assign, nonatomic) CGFloat scrollLineHeight;
/** 滚动条的颜色 */
@property (strong, nonatomic) UIColor *scrollLineColor;
/** 遮盖的颜色 */
@property (strong, nonatomic) UIColor *coverBackgroundColor;
/** 遮盖的圆角 默认为14*/
@property (assign, nonatomic) CGFloat coverCornerRadius;
/** 遮盖的高度 默认为28*/
@property (assign, nonatomic) CGFloat coverHeight;
/** 标题之间的间隙 默认为15.0 */
@property (assign, nonatomic) CGFloat titleMargin;
/** 标题的字体 默认为14 */
@property (strong, nonatomic) UIFont *titleFont;
/** 标题缩放倍数, 默认1.3 */
@property (assign, nonatomic) CGFloat titleBigScale;
/** 标题一般状态的颜色 */
@property (strong, nonatomic) UIColor *normalTitleColor;
/** 标题选中状态的颜色 */
@property (strong, nonatomic) UIColor *selectedTitleColor;
/** segmentVIew的高度, 这个属性只在使用ZJScrollPageVIew的时候设置生效 */
@property (assign, nonatomic) CGFloat segmentHeight;

一. 使用 ScrollPageView，提供了各种效果的组合，但不能修改 segmentView 和 ContentView 的相对位置，两者是结合在一起使用的。

- (void)viewDidLoad {
[super viewDidLoad];
self.title = @"效果示例";

//必要的设置, 如果没有设置可能导致内容显示不正常
self.automaticallyAdjustsScrollViewInsets = NO;

ZJSegmentStyle *style = [[ZJSegmentStyle alloc] init];
//显示遮盖
style.showCover = YES;
style.segmentViewBounces = NO;
// 颜色渐变
style.gradualChangeTitleColor = YES;
// 显示附加的按钮
style.showExtraButton = YES;
// 设置附加按钮的背景图片
style.extraBtnBackgroundImageName = @"extraBtnBackgroundImage";

self.titles = @[@"新闻头条",
                @"国际要闻",
                @"体育",
                @"中国足球",
                @"汽车",
                @"囧途旅游",
                @"幽默搞笑",
                @"视频",
                @"无厘头",
                @"美女图片",
                @"今日房价",
                @"头像",
                ];
// 初始化
CGRect scrollPageViewFrame = CGRectMake(0, 64.0, self.view.bounds.size.width, self.view.bounds.size.height - 64.0);
ZJScrollPageView *scrollPageView = [[ZJScrollPageView alloc] initWithFrame:scrollPageViewFrame segmentStyle:style titles:_titles parentViewController:self delegate:self];
self.scrollPageView = scrollPageView;
// 额外的按钮响应的block
__weak typeof(self) weakSelf = self;


self.scrollPageView.extraBtnOnClick = ^(UIButton *extraBtn){
    weakSelf.title = @"点击了extraBtn";
    NSLog(@"点击了extraBtn");

};
[self.view addSubview:self.scrollPageView];

}

代理方法

- (NSInteger)numberOfChildViewControllers {
return self.titles.count;// 传入页面的总数, 推荐使用titles.count
}

- (UIViewController *)childViewController:(UIViewController *)reuseViewController forIndex:(NSInteger)index {

UIViewController *childVc = reuseViewController;
// 这里一定要判断传过来的是否是nil, 如果为nil直接使用并返回
// 如果不为nil 就创建
if (childVc == nil) {
    childVc = [UIViewController new];

    if (index%2 == 0) {
        childVc.view.backgroundColor = [UIColor redColor];
    } else {
        childVc.view.backgroundColor = [UIColor cyanColor];

    }

}
return childVc;
}

二 使用 ZJScrollSegmentView 和 ZJContentView，提供相同的效果组合，但可以同时分离 segmentView 和 contentView，可以单独设置它们的 frame，使用更灵活。

- (void)viewDidLoad {
[super viewDidLoad];
self.title = @"效果示例";

//必要的设置, 如果没有设置可能导致内容显示不正常
self.automaticallyAdjustsScrollViewInsets = NO;
self.childVcs = [self setupChildVc];
// 初始化
[self setupSegmentView];
[self setupContentView];

}

setupSegmentView

    // 注意: 一定要避免循环引用!!
__weak typeof(self) weakSelf = self;
ZJScrollSegmentView *segment = [[ZJScrollSegmentView alloc] initWithFrame:CGRectMake(0, 64.0, 160.0, 28.0) segmentStyle:style titles:titles titleDidClick:^(UILabel *label, NSInteger index) {

    [weakSelf.contentView setContentOffSet:CGPointMake(weakSelf.contentView.bounds.size.width * index, 0.0) animated:YES];

}];
// 自定义标题的样式
segment.layer.cornerRadius = 14.0;
segment.backgroundColor = [UIColor redColor];
// 当然推荐直接设置背景图片的方式
//    segment.backgroundImage = [UIImage imageNamed:@"extraBtnBackgroundImage"];

self.segmentView = segment;
self.navigationItem.titleView = self.segmentView;

setupContentView

    ZJContentView *content = [[ZJContentView alloc] initWithFrame:CGRectMake(0.0, 64.0, self.view.bounds.size.width, self.view.bounds.size.height - 64.0) segmentView:self.segmentView parentViewController:self delegate:self];
self.contentView = content;
[self.view addSubview:self.contentView];

代理方法

- (NSInteger)numberOfChildViewControllers {
return self.titles.count;
}

- (UIViewController *)childViewController:(UIViewController *)reuseViewController forIndex:(NSInteger)index {
UIViewController *childVc = reuseViewController;
if (childVc == nil) {
    childVc = self.childVcs[index];

    if (index%2 == 0) {
        childVc.view.backgroundColor = [UIColor redColor];
    } else {
        childVc.view.backgroundColor = [UIColor cyanColor];

    }

}
return childVc;
}

这是我写的一本书籍中的一个示例，如果你想知道具体的实现过程和其他一些常用效果的实现，那么你应该能轻松在网上下载到免费的盗版书籍。

当然，作为本书的作者，我仍然希望有人能支持正版书籍。如果你有意购买书籍，可以在这篇文章中了解书籍的所有内容和适合阅读的人群，以及一些试读章节和购买链接。在你准备购买之前，请一定要读一下里面的说明。否则，如果不适合你阅读，虽然书籍售价35元不是很贵，但也是一笔损失。

如果你希望联系到我，可以通过简书联系到我。

许可证

ScrollPageView 在 MIT 许可证下发布。详情请参阅 LICENSE。