如何在swift 2中创建像tinder一样的导航栏

Question

如何创建一个循环浏览3个视图的导航栏，并像Tinder一样缩放视图的图标？ http://i3.mirror.co.uk/news/technology-science/technology/article6812543.ece/ALTERNATES/s615b/Tinder-update.jpg

Answer 1

This Framework提供精确的Navbar，如Tinder，适用于 Swift 2。

pod 'SLPagingViewSwift'

  

易于实施：

// 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)

  

然后你可以做出自己的行为：

// 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
    }
})

对于更多观众：我已经将框架分叉并将其更新为 Swift 3。

SLPagingViewSwift Swift 3

安装我的前叉：

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

修改

要使用Interface Builder构建UI，您必须设置UIViewController als全局对象，否则TableView将使用委托，因为属性较弱。创建一个Swift文件并输入控制器的名称：

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

然后在控制器类或AppDelegate中实例化控制器并调用所有内容：

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
            }
        }
    })
}

在我的示例中，您可以在故事板上使用空视图作为初始视图控制器，并在load()中调用viewDidLoad()。然后你的控制器就会加载。

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