Code Monkey home page Code Monkey logo

pagedcontent's Introduction

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

pagedcontent's People

Contributors

mrhlo avatar

Stargazers

 avatar  avatar Haluk Ates avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.