• Stars
    star
    2,084
  • Rank 22,162 (Top 0.5 %)
  • Language
    Swift
  • License
    MIT License
  • Created over 8 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

:octocat: PreviewTransition is a simple preview gallery UI controller with animated tranisitions. Swift UI library made by @Ramotion

PREVIEW TRANSITION

Preview Transition is a simple preview gallery UI controller with animated tranisitions


We specialize in the designing and coding of custom UI for Mobile Apps and Websites.

Stay tuned for the latest updates:


Twitter Travis Carthage compatible CocoaPods CocoaPods codebeat badge Donate

About

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

Looking for developers for your project?
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)
}
  1. 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>)

  1. set cell height

  2. 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
  1. 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)

  1. Create UIViewController, inheriting from PTDetailViewController

  2. Add action for backButton and call popViewController()

func backButtonHandler() {
    popViewController()
}
  1. 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)
  }
}
  1. 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 selection of our best UI open-source projects.

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.



More Repositories

1

animated-tab-bar

:octocat: RAMAnimatedTabBarController is a Swift UI module library for adding animation to iOS tabbar items and icons. iOS library made by @Ramotion
Swift
11,119
star
2

folding-cell

:octocat: 📃 FoldingCell is an expanding content cell with animation made by @Ramotion
Swift
10,219
star
3

expanding-collection

:octocat: ExpandingCollection is an animated material design UI card peek/pop controller. iOS library made by @Ramotion
Swift
5,551
star
4

folding-cell-android

:octocat: 📃 FoldingCell is a material design expanding content cell inspired by folding paper material made by @Ramotion
Java
4,902
star
5

swift-ui-animation-components-and-libraries

Swift UI libraries, iOS components and animations by @Ramotion
Swift
3,680
star
6

circle-menu

:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Swift UI library made by @Ramotion
Swift
3,437
star
7

paper-onboarding

:octocat: PaperOnboarding is a material design UI slider. Swift UI library by @Ramotion
Swift
3,320
star
8

paper-switch

:octocat: 🎚 RAMPaperSwitch is a Swift material design UI module which paints over the parent view when the switch is turned on. iOS library by @Ramotion
Swift
2,935
star
9

paper-onboarding-android

:octocat: PaperOnboarding is a material design slider made by @Ramotion
Java
2,559
star
10

reel-search

:octocat: 🔍 RAMReel is a UI controller that allows you to choose options from a list. Swift UI library made by @Ramotion
Swift
2,537
star
11

cardslider-android

:octocat: 🃏 Cardslider is a material design UI controller that allows you to swipe through cards with pictures and accompanying descriptions.
Java
2,348
star
12

navigation-stack

:octocat: NavigationStack is a stack-modeled UI navigation controller. Swift UI library made by @Ramotion
Swift
2,308
star
13

android-ui-animation-components-and-libraries

Android UI libraries, components and animations by @ramotion
Java
2,068
star
14

adaptive-tab-bar

:octocat: AdaptiveController is a 'Progressive Reduction' Swift UI module for adding custom states to Native or Custom iOS UI elements. Swift UI component by @Ramotion
Swift
2,033
star
15

expanding-collection-android

:octocat: ExpandingCollection is a material design card peek/pop controller. Android UI Library made by @Ramotion
Java
2,022
star
16

fluid-slider

:octocat:💧 A slider widget with a popup bubble displaying the precise value selected. Swift UI library made by @Ramotion
Swift
1,970
star
17

circle-menu-android

:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Android UI library made by @Ramotion
Java
1,889
star
18

garland-view-android

:octocat: ≡ GarlandView seamlessly transitions between multiple lists of content. Made by @Ramotion
Java
1,838
star
19

aquarelle

:octocat: 🎨 Aquarelle is a watercolor effect component. Javascript library by @Ramotion
JavaScript
1,801
star
20

gliding-collection

:octocat: Gliding Collection is a smooth, flowing, customizable decision for a UICollectionView Swift Controller. iOS library made by @Ramotion
Swift
1,530
star
21

fluid-slider-android

:octocat:💧 A slider widget with a popup bubble displaying the precise value selected. Android library made by @Ramotion
Kotlin
1,424
star
22

cardslider

:octocat: 🃏 Cardslider is a design UI controller that allows you to swipe through cards with pictures and accompanying descriptions.
Swift
1,271
star
23

elongation-preview

:octocat: ElongationPreview is an elegant UI push-pop style view controller. iOS library made by @Ramotion
Swift
898
star
24

navigation-toolbar-android

:octocat: Navigation toolbar is a slide-modeled UI navigation controller made by @Ramotion
Kotlin
820
star
25

navigation-toolbar

:octocat: Navigation toolbar is a slide-modeled UI navigation controller made by @Ramotion
Swift
595
star
26

react-native-circle-menu

:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Reactnative library made by @Ramotion
JavaScript
589
star
27

circular-carousel

List a collection of items in a horizontally scrolling view. A scaling factor controls the size of the items relative to the center.
Swift
582
star
28

direct-select-android

:octocat: ≡ DirectSelect is a selection widget with an ethereal, full-screen modal popup displaying the available choices when the widget is interact with.
Java
532
star
29

garland-view

:octocat: ≡ GarlandView seamlessly transitions between multiple lists of content. Swift UI library made by @Ramotion
Swift
501
star
30

showroom

Swift
167
star
31

vr-menu-demo

Prototype of a menu system in Virtual Reality. Javascript VR library made by @Ramotion
JavaScript
124
star
32

iOS-design-tips

Simple iOS design guidelines that will assist you in selecting the dimensions for your AppStore assets:
HTML
78
star
33

blob-menu

Swift
45
star
34

react-native-expanding-collection

JavaScript
37
star
35

showroom-android

Java
28
star
36

utopia

Swift
15
star
37

animations-web

JavaScript
9
star
38

react-native-fluid-slider

5
star
39

distorsion-blur

Swift
2
star