具有水平滑动的自定义标签栏菜单答案

【问题标题】：Custom Tab Bar Menu with horizontal swipe具有水平滑动的自定义标签栏菜单
【发布时间】：2018-05-19 17:24:35
【问题描述】：

只是一个关于实施的简单问题。

我正在尝试重新创建：

https://i.imgur.com/lFXKFXl.mp4

我想知道我是否必须使用 UICollectionView 从头开始，有一个内置的 Xcode 方法，或者某个地方有一个在线库。

注意：我不是想在底部创建标签栏菜单，而是在导航控制器导航栏下方的顶部创建具有水平滑动功能的菜单。 Instagram 在搜索标签下方也有此功能。

谢谢！

【问题讨论】：

我的建议是你可以使用一些库..这些是一些选项github.com/…

标签： swift xcode

【解决方案1】：

您可以通过以下方式为蓝色条设置动画

 func scrollViewDidScroll(_ scrollView: UIScrollView) {
  blueBarViewLeadingConstraint.constant = scrollView.contentOffset.x / (scrollView.bounds.width / (TabBarView.frame.size.width / numberOfTab)) 
}

【讨论】：

【解决方案2】：

您可以使用UIScrollView 并向其添加子视图控制器。我对 UIViewController 做了一个扩展，它可以让你轻松创建滑动视图。

extension UIViewController {
    public func addViewControllerToContainer(viewController: UIViewController, count: CGFloat = 0, container: UIScrollView, heightDecrease: CGFloat = 0, startIndex: CGFloat = 0) {

        let multiplier: CGFloat = count

        addChildViewController(viewController)
        container.addSubview(viewController.view)
        container.contentSize.width += viewController.view.frame.width
        container.contentSize.height = viewController.view.frame.height - heightDecrease

        container.frame = CGRect(x: viewController.view.frame.origin.x, y: viewController.view.frame.origin.y, width: viewController.view.frame.width, height: viewController.view.frame.height - heightDecrease)
        container.frame.origin.y += heightDecrease

        container.contentOffset.x = container.frame.width * startIndex

        viewController.view.frame.size.width = container.frame.width
        viewController.view.frame.size.height = container.frame.height
        viewController.view.frame.size.height -= heightDecrease
        viewController.view.frame.origin.x = container.frame.width * multiplier

    }

    public func addViewControllersToContainer(viewControllers: [UIViewController], container: UIScrollView, heightDecrease: CGFloat = 0, startIndex: CGFloat) {
        var count: CGFloat = 0
        for viewController in viewControllers {
            addViewControllerToContainer(viewController: viewController, count: count, container: container, heightDecrease: heightDecrease, startIndex: startIndex)
            count += 1
        }
    }    
}


class MainSwipeViewController: UIViewController {

    let viewControllers: [UIViewController] = [VC1, VC2, VC3] // view controllers swiped between
    let startIndex: CGFloat = 0  // which viewController to begin at (0 means first)

    let mainScrollView: UIScrollView = {
        let scrollView = UIScrollView()
        scrollView.backgroundColor = .lightGray
        scrollView.isPagingEnabled = true
        scrollView.showsHorizontalScrollIndicator = false
        scrollView.bounces = false
        scrollView.contentInsetAdjustmentBehavior = .never
        scrollView.backgroundColor = UIColor.clear
        return scrollView
    }()

    private func addViewControllers(_ vc: UIViewController, viewControllers: [UIViewController], startIndex: CGFloat = 0) {
        view.addSubview(mainScrollView)
        addViewControllersToContainer(viewControllers: viewControllers, container: mainScrollView, startIndex: startIndex)
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        addViewControllers(self, viewControllers: viewControllers, startIndex: startIndex)
    }
}

至于标签栏菜单，您可以通过在MainSwipeViewController 中实现UIScrollViewDelegate 轻松创建它

extension MainSwipeViewController: UIScrollViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let contentOffset = scrollView.contentOffset.x / view.frame.width       
    }
}

contentOffset 是滑动的间隔，每次滑动都会增加一。这将帮助您为菜单中的蓝色条设置动画。

【讨论】：