SJPageViewController

Example

To run the example project, clone the repo, and run pod install from the Example directory first.

Installation

SJPageViewController is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'SJPageViewController/ObjC'
# or  
pod 'SJPageViewController/Swift'

Author

[email protected], [email protected]

License

SJPageViewController is available under the MIT license. See the LICENSE file for more info.

SJPageViewController

顶部下拉时, headerView 跟随移动

顶部下拉时, headerView 固定在顶部

顶部下拉时, headerView 同比放大

普通模式

自定义导航栏控制透明度

快速开始

1. 导入头文件:

#import <SJPageViewController/SJPageViewController.h>

2. 添加 pageViewController 属性

@interface SJViewController ()<SJPageViewControllerDelegate, SJPageViewControllerDataSource>
@property (nonatomic, strong) SJPageViewController *pageViewController;
@end

3. 创建 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]; 

4. 实现 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

几个样式

快速开始

1. 导入头文件:

#import <SJPageViewController/SJPageMenuBar.h>
#import <SJPageViewController/SJPageMenuItemView.h>

2. 添加 pageMenuBar 属性

@interface SJViewController ()<SJPageMenuBarDataSource, SJPageMenuBarDelegate>
@property (nonatomic, strong) SJPageMenuBar *pageMenuBar;
@end

3. 创建 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);

4. 添加item:

    var views = [SJPageMenuItemView]()
    for index in 0...5 {
        let itemView = SJPageMenuItemView.init(frame: .zero)
        itemView.text = "标题"
    }
    self.pageMenuBar.itemViews = views