how to create a navbar like tinder's in swift 2

Question

How can I create a navigation Bar that will cycle through 3 Views and will scale the view's icon just like Tinder's? http://i3.mirror.co.uk/news/technology-science/technology/article6812543.ece/ALTERNATES/s615b/Tinder-update.jpg

Answer 1

This Framework provides the exact Navbar like Tinder and is for Swift 2.

pod 'SLPagingViewSwift'

Easy to implement:

// Make views for the navigation bar
var img1 = UIImage(named: "gear")
img1 = img1?.imageWithRenderingMode(.AlwaysTemplate)
var img2 = UIImage(named: "profile")
img2 = img2?.imageWithRenderingMode(.AlwaysTemplate)
var img3 = UIImage(named: "chat")
img3 = img3?.imageWithRenderingMode(.AlwaysTemplate)

var items = [UIImageView(image: img1), UIImageView(image: img2), UIImageView(image: img3)]
var controllers = [ctr1, ctr2, ctr3]
controller = SLPagingViewSwift(items: items, controllers: controllers, showPageControl: false)

Then you can make your own behaviors:

// Tinder Like
controller?.pagingViewMoving = ({ subviews in
    for v in subviews {
        var lbl = v as UIImageView
        var c = gray

        if(lbl.frame.origin.x > 45 && lbl.frame.origin.x < 145) {
            c = self.gradient(Double(lbl.frame.origin.x), topX: Double(46), bottomX: Double(144), initC: orange, goal: gray)
        }
        else if (lbl.frame.origin.x > 145 && lbl.frame.origin.x < 245) {
            c = self.gradient(Double(lbl.frame.origin.x), topX: Double(146), bottomX: Double(244), initC: gray, goal: orange)
        }
        else if(lbl.frame.origin.x == 145){
            c = orange
        }
        lbl.tintColor = c
    }
})

For further spectators: I have forked the Framework and updated it to Swift 3.

SLPagingViewSwift Swift 3

To install my fork:

pod 'SLPagingViewSwift-Swift3', :git => 'https://github.com/davidseek/SLPagingViewSwift-Swift-3-Tinder-Twitter.git'

Edit

To build your UI with the Interface Builder, you have to set your UIViewController als global objects, otherwise TableViews will use the delegates because of a weak property. Create a Swift file and enter the names of your controllers:

var one: ViewControllerOne?
var two: ViewControllerTwo?
var three: ViewControllerThree?

Then you instantiate the controllers in your controller class or AppDelegate and call everything:

func load() {
    appDelegate.window = UIWindow(frame: UIScreen.main.bounds)

    self.setupViews()
    self.setItems()

    let items = [UIImageView(image: bla),
                 UIImageView(image: bli),
                 UIImageView(image: blubb)]

    let controllers = [one!,
                       two!,
                       three!]

    controller = SLPagingViewSwift(items: items, controllers: controllers, showPageControl: false)

    self.setupController() 
    self.setRoot()
}

func setupViews()  {
    one = main.instantiateViewController(withIdentifier: "ViewControllerOne") as? ViewControllerOne
    two = main.instantiateViewController(withIdentifier: "ViewControllerTwo") as? ViewControllerTwo
    three = main.instantiateViewController(withIdentifier: "ViewControllerThree") as? ViewControllerThree
}

func setRoot() {
    nav = UINavigationController(rootViewController: controller)
    appDelegate.window?.rootViewController = nav
    appDelegate.window?.backgroundColor = UIColor.black
    appDelegate.window?.makeKeyAndVisible()
}

func setupController() {
    controller.pagingViewMoving = ({ subviews in
        if let imageViews = subviews as? [UIImageView] {
            for imgView in imageViews {
                var c = cachedGray
                let originX = Double(imgView.frame.origin.x)

                if (originX > 95 && originX < 195) {
                    c = gradient(originX, topX: 96, bottomX: 194, initC: cachedOrange, goal: cachedGray)
                }
                else if (originX > 195 && originX < 245) {
                    c = gradient(originX, topX: 196, bottomX: 294, initC: cachedGray, goal: cachedOrange)
                }
                else if(originX == 195){
                    c = cachedOrange
                }
                imgView.tintColor = c
            }
        }
    })
}

In my example you could use an empty view as initial view controller at the storyboard and call load() in the viewDidLoad(). Then your controller would be loaded.

Here is a working test project with Tinder style and 3 ViewControllers from Storyboard