SJPageViewController
示例
要运行示例项目,首先克隆仓库,然后在 Example 目录中运行 pod install
。
安装
SJPageViewController 通过 CocoaPods 提供。安装它,只需将以下行添加到您的 Podfile 中
pod 'SJPageViewController/ObjC'
# or
pod 'SJPageViewController/Swift'
作者
[email protected], [email protected]
许可证
SJPageViewController 在 MIT 许可证下提供。有关更多信息,请参阅 LICENSE 文件。
SJPageViewController
顶部下拉时,headerView 跟随移动
顶部下拉时,headerView 固定在顶部
顶部下拉时,headerView 同比放大
普通模式
自定义导航栏控制透明度
快速开始
- 导入头文件
#import <SJPageViewController/SJPageViewController.h>
- 添加
pageViewController
属性
@interface SJViewController ()<SJPageViewControllerDelegate, SJPageViewControllerDataSource>
@property (nonatomic, strong) SJPageViewController *pageViewController;
@end
- 创建
pageViewController
对象
# 参数 options 可以传入设置 nil, 当前传入参表示为设置页面之间的间隔为3
_pageViewController = [SJPageViewController pageViewControllerWithOptions:@{SJPageViewControllerOptionInterPageSpacingKey:@(3)}];
_pageViewController.dataSource = self;
_pageViewController.delegate = self;
_pageViewController.view.frame = self.view.bounds;
[self addChildViewController:_pageViewController];
[self.view addSubview:_pageViewController.view];
- 实现
SJPageViewControllerDataSource
数据源方法
# 返回控制器的数量
- (NSUInteger)numberOfViewControllersInPageViewController:(SJPageViewController *)pageViewController {
return 3;
}
# 返回`index`对应的控制器
- (UIViewController *)pageViewController:(SJPageViewController *)pageViewController viewControllerAtIndex:(NSInteger)index {
return SJDemoTableViewController.new;
}
以上步骤,即创建了一个简单的pageViewController
,下面为如何配置HeaderView
配置 HeaderView
5.1 设置 HeaderView
- (nullable __kindof UIView *)viewForHeaderInPageViewController:(SJPageViewController *)pageViewController {
UIView *headerView = [UIView.alloc initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 375)];
headerView.backgroundColor = UIColor.purpleColor;
return headerView;
}
5.2 设置HeaderMode
- (SJPageViewControllerHeaderMode)modeForHeaderWithPageViewController:(SJPageViewController *)pageViewController {
///
/// SJPageViewControllerHeaderModeTracking
/// - 顶部下拉时, headerView 跟随移动
///
/// SJPageViewControllerHeaderModePinnedToTop
/// - 顶部下拉时, headerView 固定在顶部
///
/// SJPageViewControllerHeaderModeAspectFill
/// - 顶部下拉时, headerView 同比放大
///
return SJPageViewControllerHeaderModePinnedToTop;
}
5.3 设置HeaderView
上拉时固定在顶部悬浮的高度(示例图中的绿色区域)
///
/// 在顶部悬浮保留的高度
///
- (CGFloat)heightForHeaderPinToVisibleBoundsWithPageViewController:(SJPageViewController *)pageViewController {
return 44;
}
SJPageMenuBar
几个样式
快速开始
- 导入头文件
#import <SJPageViewController/SJPageMenuBar.h>
#import <SJPageViewController/SJPageMenuItemView.h>
- 添加
pageMenuBar
属性
@interface SJViewController ()<SJPageMenuBarDataSource, SJPageMenuBarDelegate>
@property (nonatomic, strong) SJPageMenuBar *pageMenuBar;
@end
- 创建
pageMenuBar
对象
SJPageMenuBar *pageMenuBar = [SJPageMenuBar.alloc initWithFrame:CGRectZero];
pageMenuBar.dataSource = self;
pageMenuBar.delegate = self;
[self.view addSubview:pageMenuBar];
[pageMenuBar mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.offset(0);
make.left.right.offset(0);
make.height.offset(60);
}];
_pageMenuBar = pageMenuBar;
// 内容
pageMenuBar.contentInsets = UIEdgeInsetsMake(0, 12, 0, 12);
// 分布模式. 这里设置为等间隔分布
pageMenuBar.distribution = SJPageMenuBarDistributionEqualSpacing;
pageMenuBar.minimumZoomScale = 0.8;
pageMenuBar.maximumZoomScale = 1.0;
// 显示底部线
pageMenuBar.showsScrollIndicator = YES;
// 线宽的布局模式, 这里设置为指定宽度
pageMenuBar.scrollIndicatorLayoutMode = SJPageMenuBarScrollIndicatorLayoutModeSpecifiedWidth;
// 指定宽度为`12`, 高度为`2`
pageMenuBar.scrollIndicatorSize = CGSizeMake(12, 2);
- 添加
item
var views = [SJPageMenuItemView]()
for index in 0...5 {
let itemView = SJPageMenuItemView.init(frame: .zero)
itemView.text = "标题"
}
self.pageMenuBar.itemViews = views