iOS Tinder/Twitter喜欢滑块分页导航和菜单

Question

我正在寻找示例/教程/框架解释如何做一个导航栏/控制器左右滑动像Tinder.app和Twitter.app 我是不是说Tinder的脸上滑动的东西，我说的是顶级菜单，我们可以完全左右滑动来滑动到应用程序的其他屏幕像个人资料，时刻等等的意见

我'我环顾四周，但直到那时才发现真正有趣的东西，我希望你能指出一些东西。

Answer 1

恐怕完整的解决方案已经超出了单个问题的范围。

不过为了试图帮助你，我认为值得研究一下this - 这是一个链接到Cocoa Controls，一个人们准备好去控制的网站，你可以直接进入你的应用程序。 （这真的是一个很酷的网站）。

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

以下是其他一些examples。希望这可以帮助。

Answer 2

如果你需要它斯威夫特，我创建了这个

（它也适用于任何屏幕分辨率VS只是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 
    } 

} 

}

Answer 3

MSSlidingPan elController不是你正在寻找的。这些是“抽屉视图”，它只允许用户滑动到某个抽屉。

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

火种好像是用隐藏点的UIPageViewController，这是由删除这些方法进行：

presentationCountForPageViewController 
presentationIndexForPageViewController 

这里是一个很好的教程：

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

这里是一个伟大回购：

https://github.com/goktugyil/EZSwipeController