概览

什么是 TopContentPager ?

TopContentPager 是一个框架，你可以轻松制作出类似于 Instagram 的 MyPage 的分页。

具体来说，这是一个具有常用可滚动的 headerView 和固定在顶部所有页面的 PageSection 的 UIPageViewController。

TopContentPager 的一个重要特性是有一个可以滚动到顶部的常见标题栏。

使用普通的 UIPageViewController 和 UITableView 实现这样的实现非常困难。因为顶部标题栏也需要随 UITableView 滚动。

此外，因为顶部的标题是共同的，所以如果您在任何页面上滚动到顶部，您还需要在所有其他页面上滚动到顶部。有关滚动的其他复杂部分还有很多，但在此省略。有关详细信息，请参阅 Logic 部分。

TopContentPager 让您能够轻松创建这样的页面，而无需担心这些困难的问题。

用法

1. 创建基类

首先，您可以创建一个扩展 TopContentPagerViewController 的基类，并向其中添加 TopContentPagerDataSource。

然后，您必须在其中添加 setupWillLoadDataSource() 函数并在该函数中绑定 dataSource。

class CustomTopContentPagerViewController: TopContentPagerViewController {
    
    override func setupWillLoadDataSource() {
        super.setupWillLoadDataSource()
        dataSource = self
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

extension CustomTopContentPagerViewController: TopContentPagerDataSource {
    func topContentPagerViewControllerTopContentView(_ viewController: TopContentPagerViewController) -> TopContentView {
        // 共通のHeaderViewを返す
        TopView()
    }
    
    func topContentPagerViewControllerViewControllers(_ viewController: TopContentPagerViewController) -> [ContentTableBody] {
        // PageとなるそれぞれのViewController
        [Page1ViewController(), Page2ViewController(), Page2ViewController()]
    }
}

2. 制作内容页面

其次，请将 TopContentTableBody 添加到每个 ViewController 中以使用它们作为页面。

您可以设置 pagerItem. （PagerItem 有 .text、.image、.textAndImage、.custom 类型）

因此，需要将 tableView 设置为 scrollView。

class Page1ViewController: UIViewController, ContentTableBody {
    
    var pagerItem: PagerItem = .text(.init(title: "ページ1"))
    var scrollView: UIScrollView!
    @IBOutlet weak var tableView: UITableView! {
        didSet {
            scrollView = tableView
        }
    }
}

3. 制作顶部视图

最后，制作 TopView 扩展 TopContentView。

class TopView: TopContentView {    
    // write your custom code
}

这就全部了。你可以使用 TopContentViewController。如果你需要自定义，请阅读属性部分和示例代码。

逻辑

视图层次结构

TopContentViewController.View
├ ScrollView
| ├ ScrollContentView
| └ ContentTableViewController.View
|   └ ContentInnerTableView
|     ├ ContentTopCell
|     | └ （TopContentView) *When you scroll vertically.
|     └ ContentBodyCell
|       └ YourPageViewController.View extended ContentTableBody
└ EscapeView
  └ (TopContentView) *When you scroll horizontally.

修复可滚动头部视图逻辑

见下方的gif图像，了解滚动逻辑。

抱歉，图片中的 UIView.TopContentProtocol 已过时。现在，你可以使用 TopContentView。

示例

你可以获取示例代码。它位于本仓库中的 Sample 文件夹。

属性和函数

TopContentPagerViewController

顶部内容视图

分页项

安装

CocoaPods

TopContentPager 通过 CocoaPods 提供。要安装它，只需将以下行添加到您的 Podfile。

pod "TopContentPager"

需求

• Swift 5 或更高版本
• 适用于 iOS 11.0 或更高版本