itsukiss / TopContentPager

Overview

What is TopContentPager ?

TopContentPager is framework you can make page like Instagram's MyPage simply.

Specifically, This is UIPageViewController with common scrollable headerView and PageSection fixed at the top in all pages.

A big feature of TopContentPager is that there is a common header that can be scrolled to the top.

It is very difficult to implement such an implementation using ordinary UIPageViewController and UITableView. Because the top header also needs to be scrolled along with the UITableView.

Also, because the header at the top is common, if you scroll to the top on any page, you need to scroll to the top on all other pages. There are many other complicated parts regarding scrolling, but I will omit them here. See the Logic section for more details.

TopContentPager makes it easy to create such pages without having to worry about these difficult issues.

Usage

1. Make Base Class

First, you can make base class extended TopContentPagerViewController and add TopContentPagerDataSource to that.

Then, you must add setupWillLoadDataSource() function and bind dataSource in the function.

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

extension CustomTopContentPagerViewController: TopContentPagerDataSource {
    func topContentPagerViewControllerTopContentView(_ viewController: TopContentPagerViewController) -> TopContentView {
        // return common HeaderView in all pages.
        TopView()
    }
    
    func topContentPagerViewControllerViewControllers(_ viewController: TopContentPagerViewController) -> [ContentTableBody] {
        // return ViewControllers for each page.
        [Page1ViewController(), Page2ViewController(), Page3ViewController()]
    }
}

2. Make Content Page

Second, please add TopContentTableBody to every ViewController to use them as page.

You can set pagerItem. (PagerItem has types .text, .image, .textAndImage, .custom)

So, need to set tableView(or collectionView) to scrollView.

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

3. Make TopView

Finally, make TopView extended TopContentView.

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

That's all. you can use TopContentViewController. If you want to customize, you read properties section and sample code.

Logic

View Hierarchy

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

Fix Scrollable Header View Logic

See the gif image below for the logic of scrolling.

Sorry, UIView.TopContentProtocol in the image is old. Now, you can use TopContentView.

Sample

you can get Sample Code. It's in the Sample folder in this repository.

Properties and functions

TopContentPagerViewController

property	access	description
selectedIndex	get, set	current page index
dataSource	get, set	dataSource for topview and pageViewControllers
delegate	get, set	see TopContentPagerDelegate. it is able to make TopMargin on TopView.
viewControllers	get	innner ViewControllers with TableView
selectedViewController	get	current page ViewController
tabHeight	get	PagerItemsView's Height
headerHeight	get	TopView's Height
topMargin	get	TopMarginHeight by delegate

TopContentView

property	access	description
isHideTabView	get, override	flag to hide pagerItemsView
tabView	get, set	PagerItemsView
dataSource	get, set	see TopContentViewDataSource. you can set TopViewHeight if you don't want to use autolayout.
tabViewHeight	get	PagerItemsView's Height
estimateHeight	get	TopView's Height

function	description
updateTab(options: UpdatePagerOptions)	customize PagerItemsView. see UpdatePagerOptions properties in code.
updateLayout()	if you update TopView autolayout, you have to call this method.

PagerItem

case	description
text	you can set page title text. (text and font)
image	you can set page title image. (image, size, and cornerRaius)
textAndImage	you can set page title text on the right side of the image
custom	you can set custom view for page title. you have to make custom view with PageItemView protocol.

Installation

CocoaPods

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

pod "TopContentPager"

Requirements

• Swift 5 or greater
• iOS 11.0 or greater