代码之家 › 专栏 › 技术社区 › dmo

带水平滑动的自定义选项卡栏菜单

xcode swift

-1

dmo · 技术社区 · 6 年前

只是一个关于实现的快速问题。

我正在尝试重新创建:

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

我想知道是否必须使用uicollectionview从头开始,有一个内置的xcode方法,或者有一个在线库。

注意:我不是要在底部创建一个标签栏菜单,而是在导航控制器导航栏下面的顶部创建水平滑动功能。Instagram在搜索选项卡下也有这个功能。

谢谢您!

2 回复 | 直到 6 年前

Nader 6 年前

您可以使用 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)
    }
}

对于选项卡菜单,可以通过实现 UIScrollViewDelegate 在里面 MainSwipeViewController

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

contentOffset 是每次刷卡的间隔,每次刷卡都会增加一个。这将帮助您在菜单中设置蓝色条的动画。

Vishal Kevadiya 6 年前

您可以按照以下方式设置蓝色条的动画

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