mrhlo / PagedContent

Easy to use library to display content with multiple sections

PagedContent - Easy to use library to display content with multiple sections

PagedContent is an iOS implementation of Android's ViewPager purely written in Swift. It allows to place content in "pages" in order to show one part of the content while hiding others. It uses a menu-based navigation to go through the different parts of the content.

Usage

The easiest way to use the component is to embed the PagedContentViewController in your view controller using a container view, or to initialize a PagedContentViewController in your parent view controller and adding it's view to your main view.

To setup each page of the content, you must create a PagedContentTab object with a title and a UIView object which will be the content of that page; and pass a list of these objects to the PagedContentViewControler. An example of this is as the following:

let backgroundColors = [UIColor.blue, UIColor.red, UIColor.yellow, UIColor.brown, UIColor.cyan, UIColor.green, UIColor.black]
        
        let tabs = ["view1", "view2", "view3", "view4"].enumerated().map { index, title -> PagedContentTab in
            
            let view = UIView()
            view.backgroundColor = backgroundColors[index]
            return PagedContentTab(title: title, view: view)
        }
pagedContentViewController?.update(tabs: tabs)

Tabs with image and title:

To setup the tab menu with title and images you just have to pass an additional UIImage object when initializing the PagedContentTab, as the following:

PagedContentTab(title: title, 
image: UIImage(named: "icon"), 
view: view)

Tabs only with image:

You can also setup the tab menu with only images, and for that you have to initialize the PagedContentTab with a UIImage, instead of a title.

PagedContentTab(image: UIImage(named: "icon"), 
				view: view)

You can also set a custom size for the image by passing the imageSize parameter when initializing the PagedContentTab object, otherwise the size of the UIImage object will be used.

Styling

If you don't do any styling, the library will use the default theme for the menu which looks like the following:

You can change the styling of the menu using a PagedContentTabTheme object and calling the update(with theme: PagedContentTabTheme) function of the PagedContentViewController. You can set the following properties:

• Background Color
• Text color
• Selected Color (This applies to both text and the bottom line)
• Border color (Set to clear if you don't want any borders)
• Font
• Selected Font (Default is the normal font)
• Padding between tab buttons
• Full width or not (setting to full width makes the buttons take up as many space as they can based on the width of the menu and the number of buttons)

You can also set multiple selected colors if you want different colors for different tabs by passing a list of colors as the selectedColors parameter.

The height of the tab menu is by default 44 pts. You can change the height by changing the menuHeight property of the PagedContentViewController.

Requirements

• iOS 8.0+
• Xcode 8.0+

TODO

• Add additional styling options
• Add setup option with view controllers for each content page instead of views
• Add a contribution guide