SJPageViewController 0.0.13

SJPageViewController 0.0.13

changsanjiang 维护。



SJPageViewController

CI Status Version License Platform

示例

要运行示例项目,首先克隆仓库,然后在 Example 目录中运行 pod install

安装

SJPageViewController 通过 CocoaPods 提供。安装它,只需将以下行添加到您的 Podfile 中

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

作者

[email protected], [email protected]

许可证

SJPageViewController 在 MIT 许可证下提供。有关更多信息,请参阅 LICENSE 文件。


SJPageViewController

顶部下拉时,headerView 跟随移动

tracking.gif

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

pinnedToTop.gif

顶部下拉时,headerView 同比放大

sacleAspectFill.gif

普通模式

normal.gif

自定义导航栏控制透明度

alpha.gif

快速开始

  1. 导入头文件
#import <SJPageViewController/SJPageViewController.h>
  1. 添加 pageViewController 属性
@interface SJViewController ()<SJPageViewControllerDelegate, SJPageViewControllerDataSource>
@property (nonatomic, strong) SJPageViewController *pageViewController;
@end
  1. 创建 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]; 
  1. 实现 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

几个样式

Mar-04-2020 23-13-16.gif

image.png

快速开始

  1. 导入头文件
#import <SJPageViewController/SJPageMenuBar.h>
#import <SJPageViewController/SJPageMenuItemView.h>
  1. 添加 pageMenuBar 属性
@interface SJViewController ()<SJPageMenuBarDataSource, SJPageMenuBarDelegate>
@property (nonatomic, strong) SJPageMenuBar *pageMenuBar;
@end
  1. 创建 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);
  1. 添加item
    var views = [SJPageMenuItemView]()
    for index in 0...5 {
        let itemView = SJPageMenuItemView.init(frame: .zero)
        itemView.text = "标题"
    }
    self.pageMenuBar.itemViews = views