ios - 在 Xcode 6 和 Swift 中的视图之间进行类似 Snapchat 的滑动导航）

Question

我一直在尝试使用滑动手势识别器和嵌入的导航控制器在我的应用程序中的视图控制器之间实现滑动导航，但它看起来甚至与 Snapchat 的导航不相近。

实现此类功能的最有效和最合适的方法是什么？

我真的是 Swift 和编程的新手，我会很感激每一个有用的评论。

score 20 · Accepted Answer

简短的版本是在控制器内部使用带有滚动视图的容器视图控制器。然后，您为应用程序中所需的每个屏幕创建单独的视图控制器，并使这些视图控制器的父级容器视图控制器。

可以在此处找到带有示例代码的 github 存储库。

score 8 · Accepted Answer

你需要一个页面浏览控制器。这最初是为了展示教程和东西，但你也可以把视图控制器放在那里。那里有大量的教程，基本上你必须应用一些逻辑来告诉程序接下来要显示什么视图控制器。

这是一个非常高级的示例，但它可能对您有所帮助：

https://github.com/cwRichardKim/RKSwipeBetweenViewControllers

score 4 · Accepted Answer

我不喜欢 lbrendanl 给出的版本，因为它不使用约束。我们不能像我们想要的那样定制它。这是相同的版本，但有限制：

scrollView 是一个绑定到控制器的 IBOutlet，有 4 个约束，控制器视图的每一侧都有一个常量为 0。

contentView 也是一个 IBOutlet 作为 scrollView 的子视图添加到具有 4 个约束的 scrollView 上，每边都有一个常量为 0。它还具有等高约束和等宽约束。宽度相等约束在运行时被移除，仅用于平息 IB。这个view代表了scrollView的contentView。

更新 iOS 9

 func setupDetailViewControllers() {
    var previousController: UIViewController?
    for controller in self.controllers {
        addChildViewController(controller)
        addControllerInContentView(controller, previousController: previousController)
        controller.didMoveToParentViewController(self)
        previousController = controller
    }
}

func addControllerInContentView(controller: UIViewController, previousController: UIViewController?) {
    contentView.addSubview(controller.view)
    controller.view.translatesAutoresizingMaskIntoConstraints = false

    // top
    controller.view.topAnchor.constraintEqualToAnchor(contentView.topAnchor).active = true

    // bottom
    controller.view.bottomAnchor.constraintEqualToAnchor(contentView.bottomAnchor).active = true

    // trailing
    trailingContentViewConstraint?.active = false
    trailingContentViewConstraint = controller.view.trailingAnchor.constraintEqualToAnchor(contentView.trailingAnchor)
    trailingContentViewConstraint?.active = true

    // leading
    let leadingAnchor = previousController?.view.trailingAnchor ?? contentView.leadingAnchor
    controller.view.leadingAnchor.constraintEqualToAnchor(leadingAnchor).active = true

    // width
    controller.view.widthAnchor.constraintEqualToAnchor(scrollView.widthAnchor).active = true
}

以前的答案

    class ContainerViewController: UIViewController {

    @IBOutlet var scrollView: UIScrollView!
    @IBOutlet var contentView: UIView!

    // A strong reference to the width contraint of the contentView
    var contentViewConstraint: NSLayoutConstraint!

    // A computed version of this reference
    var computedContentViewConstraint: NSLayoutConstraint {
        return NSLayoutConstraint(item: contentView, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: scrollView, attribute: .Width, multiplier: CGFloat(controllers.count + 1), constant: 0)
    }

    // The list of controllers currently present in the scrollView
    var controllers = [UIViewController]()

    override func viewDidLoad() {
        super.viewDidLoad()

        initScrollView()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()

    }

    func initScrollView(){
        contentView.setTranslatesAutoresizingMaskIntoConstraints(false)

        contentViewConstraint = computedContentViewConstraint
        view.addConstraint(contentViewConstraint)

        // Adding all the controllers you want in the scrollView
        let controller1 = storyboard!.instantiateViewControllerWithIdentifier("AStoryboardID") as! AnUIControllerViewSubclass
        addToScrollViewNewController(controller)
        let controller2 = storyboard!.instantiateViewControllerWithIdentifier("AnotherStoryboardID") as! AnotherUIControllerViewSubclass
        addToScrollViewNewController(controller2)
    }

    // The main method, adds the controller in the scrollView at the left of the previous controller added
    func addToScrollViewNewController(controller: UIViewController) {
        self.addChildViewController(controller)

        contentView.addSubview(controller.view)

        controller.view.setTranslatesAutoresizingMaskIntoConstraints(false)

        // Setting all the constraints 
        let bottomConstraint = NSLayoutConstraint(item: contentView, attribute: .Bottom, relatedBy: .Equal, toItem: controller.view, attribute: .Bottom, multiplier: 1.0, constant: 0)

        let topConstraint = NSLayoutConstraint(item: contentView, attribute: .Top, relatedBy: .Equal, toItem: controller.view, attribute: .Top, multiplier: 1.0, constant: 0)

        let widthConstraint = NSLayoutConstraint(item: controller.view, attribute: .Width, relatedBy: .Equal, toItem: scrollView, attribute: .Width, multiplier: 1.0, constant: 0)

        var trailingConstraint: NSLayoutConstraint!
        if controllers.isEmpty {
            // Since it's the first one, the trailing constraint is from the controller view to the contentView
            trailingConstraint = NSLayoutConstraint(item: contentView, attribute: .Trailing, relatedBy: .Equal, toItem: controller.view, attribute: .Trailing, multiplier: 1.0, constant: 0)
        }
        else {
            trailingConstraint = NSLayoutConstraint(item: controllers.last!.view, attribute: .Leading, relatedBy: .Equal, toItem: controller.view, attribute: .Trailing, multiplier: 1.0, constant: 0)
        }

        // Setting the new width constraint of the contentView
        view.removeConstraint(contentViewConstraint)
        contentViewConstraint = computedContentViewConstraint

        // Adding all the constraints to the view hierarchy
        view.addConstraint(contentViewConstraint)
        contentView.addConstraints([bottomConstraint, topConstraint, trailingConstraint])
        scrollView.addConstraints([widthConstraint])

        controller.didMoveToParentViewController(self)

        // Finally adding the controller in the list of controllers
        controllers.append(controller)
    }  
}

我过去使用过 lbrendanl 的版本。现在我更喜欢这个。告诉我你对它的想法。

score 3 · Accepted Answer

我建议使用 UIPageViewController 并通过删除这些方法来隐藏点栏：

presentationCountForPageViewController
presentationIndexForPageViewController

这是一个很好的教程：

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

这是一个很好的回购：

https://github.com/goktugyil/EZSwipeController

score 1 · Accepted Answer

1

分页滚动视图，而不是 Snapchat 的 PageViewController。

于 2014-08-06T19:13:50.537 回答

score 1 · Accepted Answer

我有类似的要求，最初是用实现的PageController，但后来我将其更改为UICollectionView每个单元格全屏并且滚动设置为水平。

score 0 · Accepted Answer

您可以尝试使用CATransition来创建滑动动画。以下是如何从一个视图滑动到另一个视图的示例：

    UIView *parentView = [self.view superview];

CATransition *animation = [CATransition animation];
[animation setDuration:0.25];
[animation setType:kCATransitionPush];
[animation setSubtype:kCATransitionFromLeft];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];

[parentView addSubview:yourSecondViewController.view];
[self.view removeFromSuperview];

[[theParentView layer] addAnimation:animation forKey:@"showSecondViewController"];

我在这里找到了一些代码：如何在视图之间实现滑动/滑动动画？

ios - 在 Xcode 6 和 Swift 中的视图之间进行类似 Snapchat 的滑动导航）

7 回答 7

Related

Reference