Awesome

<a href="https://www.ramotion.com/agency/app-development/?utm_source=gthb&utm_medium=repo&utm_campaign=preview-transition"><img src="https://github.com/Ramotion/folding-cell/blob/master/header.png"></a>

About

This project is maintained by Ramotion, Inc.<br> We specialize in the designing and coding of custom UI for Mobile Apps and Websites.<br>

Looking for developers for your project?<br> This project is maintained by Ramotion, Inc. We specialize in the designing and coding of custom UI for Mobile Apps and Websites.

Requirements

• iOS 9.0+
• Xcode 9

Licence

Preview-transition is released under the MIT license. See LICENSE for details.

Installation

Just add the Source folder to your project or use CocoaPods like this:

pod "PreviewTransition"

or Carthage users can simply add to their Cartfile:

github "Ramotion/preview-transition"

Usage

1. import PreviewTransition

2. Create UITableViewController inherit, inheriting from PTTableViewController

3. Add UITableViewDelegate methods

public override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return <RowsCount>
}

public override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    return tableView.dequeueReusableCellWithIdentifier(<CellIdentifier>, forIndexPath: indexPath)
}

4. add a ParallaxCell

storyboards: create a cell and inherit from ParallaxCell; don't forget set the identifier <CellIdentifier>

or programmatically: register a cell in viewDidLoad tableView.registerClass(ParallaxCell, forCellReuseIdentifier:<CellIdentifier>)

5. set cell height

6. create image names (image sizes must be equal to screen size or bigger)

let images = [image_name, image_name, image_name, image_name, image_name] // image names

7. set image and text for ParallaxCell

public override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {

    guard let cell = cell as? ParallaxCell else {
      return
    }

    let imageName = images[indexPath.row]

    if let image = UIImage(named: imageName) {
      cell.setImage(image, title: <SetText>)
    }
}

your tableViewController should look like DemoTableViewController

Method public override func tableView(tableView: didSelectRowAtIndexPath indexPath:) we will add later. (step 10)

8. Create UIViewController, inheriting from PTDetailViewController

9. Add action for backButton and call popViewController()

func backButtonHandler() {
    popViewController()
}

10. Push this UIViewController in UITableViewController. Add method

public override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {

  // create viewController
  let <YourViewController> = storyboard?.instantiateViewControllerWithIdentifier(<identifier>)
  if case let viewController as <YourViewController> = viewController {
     pushViewController(viewController)
  }
}

11. Configure UINavigationBar

// transparent background
UINavigationBar.appearance().setBackgroundImage(UIImage(), forBarMetrics: .Default)
UINavigationBar.appearance().shadowImage = UIImage()
UINavigationBar.appearance().translucent = true
UINavigationBar.appearance().tintColor = .whiteColor()

// set font
if let font = UIFont(name: <Font name> , size: 18) {
      UINavigationBar.appearance().titleTextAttributes = [
        NSForegroundColorAttributeName : UIColor.whiteColor(),
        NSFontAttributeName : font
      ]
}

📄 License

Preview Transition is released under the MIT license. See LICENSE for details.

This library is a part of a <a href="https://github.com/Ramotion/swift-ui-animation-components-and-libraries"><b>selection of our best UI open-source projects.</b></a>

If you use the open-source library in your project, please make sure to credit and backlink to https://www.ramotion.com/

📱 Get the Showroom App for iOS to give it a try

Try this UI component and more like this in our iOS app. Contact us if interested.