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

Posted 2023-04-13

【中文标题】iOS Tinder/Twitter 类似滑块分页导航和菜单

【英文标题】：iOS Tinder/Twitter like slider paging navigation and menu

【发布时间】：2014-10-31 03:19:50

【问题描述】：

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

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

【问题讨论】：

像一个 UIPageViewController？

@DanielGalasko 是的，但是一个非常复杂的，能够处理导航栏。

这是一个很棒的回购：github.com/goktugyil/EZSwipeController

【参考方案1】：

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

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

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

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

【讨论】：

我就是这么想的。但感谢非常有趣的链接！仔细查看后，这是我需要的类似 Tinder 和 Twitter 的导航，我发现更多与 Twitter 相关的东西，比如这个：cocoacontrols.com/controls/twitterpagingviewer

我已将关于您的回复的问题编辑得更具体，如果我没有更好的链接，我会验证您的答案。非常感谢！

@Sylver 绝对没问题 :)

【参考方案2】：

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

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

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

presentationCountForPageViewController
presentationIndexForPageViewController

这是一个很好的教程：

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

这是一个很棒的回购：

https://github.com/goktugyil/EZSwipeController

【参考方案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
    

【讨论】：

这只能用于静态内容，还是可以将我的预构建视图控制器放入其中？这可能是一个愚蠢的问题，但我想用我的应用程序实现类似的东西，但有些视图将是表格视图，所以我想知道这是否仍然有效，以及我将如何做到这一点

@TimWhiting 这个可能最适合静态，但现在 cocoacontrols 上还有一些其他（更好）的。搜索寻呼导航

完美。正是我想要的，核心代码没有额外的东西