Latest 4.2
License MIT
Platforms ios 9.0
Dependencies Astrolabe/Core

UICollectionView layout for paging navigation with header, which contains titles and selection marker on it.

CI Status


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



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

pod 'Sundial'


1. Getting started

Sundial layout integrated in the same with regular UICollectionViewLayout:

  let collectionView = CollectionView<CollectionViewPagerSource>()

  collectionView.source.pager = self
  collectionView.collectionViewLayout = CollectionViewLayout(hostPagerSource: collectionView.source) { [weak self] in
    return ["Title1", "Title2", "Title3"]

The only thing you need to do is to return array of titles and provide implementation of Selectable protocol. Pager sources of Astrolabe are conforms to this protocols out of box.

1.1 Settings

Sundial provides basic UI and behavior customization over Setting structure:

public struct Settings {
  public var stripHeight: CGFloat
  public var markerHeight: CGFloat
  public var itemMargin: CGFloat
  public var bottomStripSpacing: CGFloat
  public var backgroundColor: UIColor
  public var anchor: Anchor
  public var inset: UIEdgeInsets
  public var alignment: DecorationAlignment
  public var pagesOnScreen: Int
  public var jumpingPolicy: JumpingPolicy

Cool feature of Sundial is ‘jumping’. You can set jumping policy to skip pages when you are switching between pages which located far from each other and it looks like you are switching between neighbors:


1.2 Anchors

Here is the list of possible anchors:

public enum Anchor {
  case content
  case centered
  case fillEqual
  case equal(size: CGFloat)
  case left(offset: CGFloat)
  case right(offset: CGFloat)
Content Centered



Left Fill equal



1.3 Custom decoration views

Here is definition of default decoration view in Sundial layout:

public typealias DecorationView = GenericDecorationView<TitleCollectionViewCell, MarkerDecorationView<TitleCollectionViewCell.Data>, DecorationViewAttributes<TitleCollectionViewCell.Data>>
public typealias CollectionViewLayout = GenericCollectionViewLayout<DecorationView>
public typealias CollapsingCollectionViewLayout = GenericCollapsingCollectionViewLayout<DecorationView>

As you can see here is possible to configure default decoration view itself providing another classes of TitleCell or MarkerCell . Or if necessary for your project decoration view itself if you need to provide another type decoration view conforming DecorationViewPageable protocol. For example:

  typealias CustomDecoration = GenericDecorationView<CustomTitleCollectionViewCell, CustomMarkerDecorationView, DecorationViewAttributes<CustomTitleCollectionViewCell.Data>>
  typealias CustomLayout = GenericCollectionViewLayout<CustomDecoration>


2. Collapsing Header

Sundial also has layout for collapsing header – CollapsingCollectionViewLayout. Creation is almost the same with CollectionViewLayout. The only difference, that you need to provide implemenetations of CollapsingItem protocol.

  let collectionView = CollectionView<CollectionViewPagerSource>()
  typealias Layout = CollapsingCollectionViewLayout

  let items = [controller1, controller2, controllerLoader, controller4, controller5]
  let layout = Layout(items: items, hostPagerSource: collectionView.source) { [weak self] in
      return self?.titles ?? []

Example of CollapsingItem implementation:

class TestViewController: UIViewController, Accessor, CollapsingItem {
  let visible = BehaviorRelay<Bool>(value: false)
  var scrollView: UIScrollView {
    return containerView

Here is the result:


0. Missing points

  1. More anchors
  2. Ability to scroll UICollectionView inside decoration view


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

Latest podspec

    "name": "Sundial",
    "version": "4.2",
    "summary": "Collection view layout for pager header",
    "homepage": "",
    "license": {
        "type": "MIT"
    "authors": {
        "Sergei Mikhan": "[email protected]"
    "source": {
        "git": "",
        "tag": "4.2"
    "platforms": {
        "ios": "9.0"
    "dependencies": {
        "Astrolabe/Core": []
    "source_files": [

Pin It on Pinterest

Share This