iOS Tinder/Twitter 类似滑块分页导航和菜单

Question

我正在寻找示例/教程/框架来解释如何做一个像 Tinder.app 和 Twitter.app 一样左右滑动的导航栏/控制器 我不是在谈论 Tinder 的面部滑动功能，我是在谈论顶部菜单以及我们可以完全向左或向右滑动以顺利进入应用程序的其他屏幕（如个人资料、时刻等）的视图

我正在四处寻找，但在那之前没有发现任何真正有趣的东西，我希望你能指出一些事情。

Answer 1

恐怕这个问题的完整解决方案远远超出了一个问题的范围。

但是，为了帮助您，我认为值得研究 this - 这是一个指向 Cocoa Controls 的链接，这是一个人们构建准备就绪的网站，您可以直接放入您的应用程序中。 （这确实是一个很酷的网站）。

该特定链接指向MSSlidingPanelController。我认为这正是您正在寻找的。源代码清晰可见，因此您可以准确了解获得所需效果所需的内容。

这里有一些其他的examples。希望这会有所帮助。

Answer 2

MSSlidingPanelController 不是您想要的。这些是“抽屉视图”，只允许用户滑动到某个抽屉。

TwitterPagingViewer 和 SwiftPagingNav 与 Twitter 上的完全一样，只是更复杂。

Tinder 似乎在使用带有隐藏点的 UIPageViewController，这是通过删除这些方法来完成的：

presentationCountForPageViewController
presentationIndexForPageViewController

这是一个很好的教程：

https://www.youtube.com/watch?v=8bltsDG2ENQ

这是一个很棒的回购：

https://github.com/goktugyil/EZSwipeController

Answer 3

如果你在 Swift 中需要它，我已经创建了这个

（它也适用于任何屏幕分辨率，而不是像其他示例一样仅适用于 iPhone 4/5/5s）

https://github.com/aubrey/SwiftPagingNav

class PageViewController: UIViewController, UIScrollViewDelegate {

var scrollView:UIScrollView!
var pageControl:UIPageControl!
var navbarView:UIView!

var navTitleLabel1:UILabel!
var navTitleLabel2:UILabel!
var navTitleLabel3:UILabel!

var view1:UIView!
var view2:UIView!
var view3:UIView!


override func viewDidLoad() {
    super.viewDidLoad()

    self.view.backgroundColor = UIColor.lightGrayColor()

    //Creating some shorthand for these values
    var wBounds = self.view.bounds.width
    var hBounds = self.view.bounds.height

    // This houses all of the UIViews / content
    scrollView = UIScrollView()
    scrollView.backgroundColor = UIColor.clearColor()
    scrollView.frame = self.view.frame
    scrollView.pagingEnabled = true
    scrollView.showsHorizontalScrollIndicator = false
    scrollView.delegate = self
    scrollView.bounces = false
    self.view.addSubview(scrollView)

    self.scrollView.contentSize = CGSize(width: self.view.bounds.size.width * 3, height: hBounds/2)

    //Putting a subview in the navigationbar to hold the titles and page dots
    navbarView = UIView()
    self.navigationController?.navigationBar.addSubview(navbarView)

    //Paging control is added to a subview in the uinavigationcontroller
    pageControl = UIPageControl()
    pageControl.frame = CGRect(x: 0, y: 35, width: 0, height: 0)
    pageControl.backgroundColor = UIColor.whiteColor()
    pageControl.numberOfPages = 3
    pageControl.currentPage = 0
    pageControl.currentPageIndicatorTintColor = UIColor(red:0.325, green:0.667, blue:0.922, alpha: 1)
    pageControl.pageIndicatorTintColor = UIColor.whiteColor()
    self.navbarView.addSubview(pageControl)


    //Titles for the nav controller (also added to a subview in the uinavigationcontroller)
    //Setting size for the titles. FYI changing width will break the paging fades/movement
    var titleSize = CGRect(x: 0, y: 8, width: wBounds, height: 20)

    navTitleLabel1 = UILabel()
    navTitleLabel1.frame = titleSize
    navTitleLabel1.text = "Home"
    navTitleLabel1.textAlignment = NSTextAlignment.Center
    self.navbarView.addSubview(navTitleLabel1)

    navTitleLabel2 = UILabel()
    navTitleLabel2.frame = titleSize
    navTitleLabel2.text = "Discover"
    navTitleLabel2.textAlignment = NSTextAlignment.Center
    self.navbarView.addSubview(navTitleLabel2)

    navTitleLabel3 = UILabel()
    navTitleLabel3.frame = titleSize
    navTitleLabel3.text = "Activity"
    navTitleLabel3.textAlignment = NSTextAlignment.Center
    self.navbarView.addSubview(navTitleLabel3)

    //Views for the scrolling view
    //This is where the content of your views goes (or you can subclass these and add them to ScrollView)

    view1 = UIView()
    view1.backgroundColor = UIColor(red:0.325, green:0.667, blue:0.922, alpha: 1)
    view1.frame = CGRectMake(0, 0, wBounds, hBounds)
    self.scrollView.addSubview(view1)
    self.scrollView.bringSubviewToFront(view1)

    //Notice the x position increases per number of views
    view2 = UIView()
    view2.backgroundColor = UIColor(red:0.231, green:0.529, blue:0.757, alpha: 1)
    view2.frame = CGRectMake(wBounds, 0, wBounds, hBounds)
    self.scrollView.addSubview(view2)
    self.scrollView.bringSubviewToFront(view2)

    //Notice the x position increases yet again (wBounds * 2)
    view3 = UIView()
    view3.backgroundColor = UIColor(red:0.529, green:0.600, blue:0.647, alpha: 1)
    view3.frame = CGRectMake(wBounds * 2, 0, wBounds, hBounds)
    self.scrollView.addSubview(view3)
    self.scrollView.bringSubviewToFront(view3)
}

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    navbarView.frame = CGRect(x: 0, y: 0, width: self.view.bounds.width, height: 44)
}


func scrollViewDidScroll(scrollView: UIScrollView) {

    var xOffset: CGFloat = scrollView.contentOffset.x

    //Setup some math to position the elements where we need them when the view is scrolled

    var wBounds = self.view.bounds.width
    var hBounds = self.view.bounds.height
    var widthOffset = wBounds / 100
    var offsetPosition = 0 - xOffset/widthOffset

    //Apply the positioning values created above to the frame's position based on user's scroll

    navTitleLabel1.frame = CGRectMake(offsetPosition, 8, wBounds, 20)
    navTitleLabel2.frame = CGRectMake(offsetPosition + 100, 8, wBounds, 20)
    navTitleLabel3.frame = CGRectMake(offsetPosition + 200, 8, wBounds, 20)

    //Change the alpha values of the titles as they are scrolled

    navTitleLabel1.alpha = 1 - xOffset / wBounds

    if (xOffset <= wBounds) {
        navTitleLabel2.alpha = xOffset / wBounds
    } else {
        navTitleLabel2.alpha = 1 - (xOffset - wBounds) / wBounds
    }
    navTitleLabel3.alpha = (xOffset - wBounds) / wBounds


}


func scrollViewDidEndDecelerating(scrollView: UIScrollView) {

    var xOffset: CGFloat = scrollView.contentOffset.x

    //Change the pageControl dots depending on the page / offset values

    if (xOffset < 1.0) {
        pageControl.currentPage = 0
    } else if (xOffset < self.view.bounds.width + 1) {
        pageControl.currentPage = 1
    } else {
        pageControl.currentPage = 2
    }

}

}