ZJScrollPageView
OC版的简单方便的集成网易新闻, 腾讯视频, 头条 等首页的滑块视图联动的效果, segmentVIew, scrollViewController
swift版本的请点这里
注意,如果您需要查看详细的注释, 可以下载swift版本里面, 这里很多地方就没有把注释移过来了
使用示例效果
可以简单快速灵活的实现上图中的效果
书写思路移步
简书1
Requirements
- iOS 7.0+
Installation
- ###直接将下载文件的ZJScrollPageView文件夹下的文件拖进您的项目中然后#import "ZJScrollPageView.h"就可以使用了
使用cocoaPods, 在你项目的Podfile文件里面添加 pod ZJScrollPageView(未更新)
usage
特别说明
因为大家可能会复用同一个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;
}
这是我写的<iOS自定义控件剖析>这本书籍中的一个demo, 如果你希望知道具体的实现过程和其他的一些常用效果的实现, 那么你应该能轻易在网上下载到免费的盗版书籍.
当然作为本书的写作者, 还是希望有人能支持正版书籍. 如果你有意购买书籍, 在这篇文章中, 介绍了书籍中所有的内容和书籍适合阅读的人群, 和一些试读章节, 以及购买链接. 在你准备购买之前, 请一定读一读里面的说明. 否则, 如果不适合你阅读, 虽然书籍售价35不是很贵, 但是也是一笔损失.
如果你希望联系到我, 可以通过简书联系到我
License
ScrollPageView is released under the MIT license. See LICENSE for details.