在 Mapbox 的导航视图上添加自定义按钮

Posted 2023-03-15

【中文标题】在 Mapbox 的导航视图上添加自定义按钮

【英文标题】：Add custom button on Mapbox's navigation view

【发布时间】：2018-11-23 06:35:10

【问题描述】：

我正在使用 Mapbox 来允许用户在位置之间导航。我正在使用文档 (https://www.mapbox.com/ios-sdk/navigation/examples/basic/) 中所述的基本导航功能。这给了我如下导航视图。

我想在视图底部添加一个自定义按钮。为此，我尝试了以下代码。

Directions.shared.calculate(options)  (waypoints, routes, error) in

    guard let route = routes?.first else 
        self.showAlertMessage("No possible routes detected")
        return
    

    self.mapNavigationViewController = NavigationViewController(for: route)

    self.mapNavigationViewController.delegate = self

    self.present(self.mapNavigationViewController, animated: true, completion: 

        let customButton = UIButton()
        customButton.setTitle("Press", for: .normal)
        customButton.translatesAutoresizingMaskIntoConstraints = false
        customButton.backgroundColor = .blue
        customButton.contentEdgeInsets = UIEdgeInsets(top: 10, left: 20, bottom: 10, right: 20)

        self.mapNavigationViewController.view.addSubview(customButton)

        customButton.bottomAnchor.constraint(equalTo: self.mapNavigationViewController.view.bottomAnchor, constant: 0).isActive = true
        customButton.leftAnchor.constraint(equalTo: self.mapNavigationViewController.view.leftAnchor, constant: 0).isActive = true
        customButton.rightAnchor.constraint(equalTo: self.mapNavigationViewController.view.rightAnchor, constant: 0).isActive = true

        self.mapNavigationViewController.view.setNeedsLayout()

    )

有了这个，我得到了如下按钮。

现在，接下来要做的是移动地图框的视图，使其底部与自定义按钮的顶部对齐。我怎样才能做到这一点？

【问题讨论】：

自动布局约束

我在以编程方式使用自动布局约束时遇到困难@DaniSpringer

而不是customButton.bottomAnchor.constraint(equalTo: self.mapNavigationViewController.view.bottomAnchor, constant: 0).isActive = true。为什么不customButton.topAnchor.constraint(equalTo: self.mapNavigationViewController.view.bottomAnchor, constant: 0).isActive = true

使用上述替换按钮不显示。

你能写代码来影响地图的约束吗？或者这是你无法控制的？如果是：将地图顶部设置为安全区域顶部，将底部设置为按钮顶部，将按钮底部设置为安全区域底部。

【参考方案1】：

我能够按照这个 Mapbox documentation 完成任务。

【参考方案2】：

为了实现您的目标，您必须更改在库中实现的地图视图的底部约束。这样您就可以将其底部约束设置为等于 customButton 的顶部约束

查看您是否有权访问图书馆的地图视图或其底部约束。