You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

iOS:如何在自定义MapBox导航控制器中添加MBFloatingButton及自定义按钮

嘿,我来帮你解决这两个MapBox导航控制器的自定义按钮需求,分步骤给你说明:

一、给自定义MapBox导航控制器添加MBFloatingButton

要实现浮动按钮的添加,你可以在自定义的MBNavigationViewController子类里通过代码创建并配置,步骤如下:

  • 先确保已经导入MapboxNavigation库,然后创建自定义导航控制器类
  • 在viewDidLoad方法里初始化MBFloatingButton,设置标题、点击事件和样式
  • 用AutoLayout给按钮设置合适的位置(建议避开底部安全区,避免被系统控件遮挡)

示例代码:

import MapboxNavigation

class CustomNavVC: MBNavigationViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 初始化浮动按钮
        let floatBtn = MBFloatingButton()
        floatBtn.setTitle("快捷操作", for: .normal)
        floatBtn.addTarget(self, action: #selector(floatBtnClicked), for: .touchUpInside)
        
        // 自定义按钮样式(可选)
        floatBtn.backgroundColor = .systemGreen
        floatBtn.tintColor = .white
        floatBtn.layer.cornerRadius = floatBtn.frame.height / 2 // 改成圆形按钮
        
        // 添加到视图
        view.addSubview(floatBtn)
        
        // 布局按钮:右下角,距离右侧和底部安全区各20pt
        floatBtn.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            floatBtn.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
            floatBtn.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -20)
        ])
    }
    
    @objc private func floatBtnClicked() {
        // 这里写按钮点击后的业务逻辑
        print("浮动按钮触发啦!")
    }
}
二、给MBNavigationViewController添加自定义导航栏按钮

有两种常用方式可以实现,根据你的场景灵活选择:

方式1:在自定义导航控制器子类里直接设置

如果是自定义的MBNavigationViewController,可以在viewDidLoad里直接修改导航栏的按钮:

override func viewDidLoad() {
    super.viewDidLoad()
    
    // 创建右侧自定义按钮(用图标示例)
    let customRightBtn = UIBarButtonItem(image: UIImage(systemName: "gear"), style: .plain, target: self, action: #selector(settingBtnClicked))
    
    // 添加到导航栏右侧
    navigationItem.rightBarButtonItem = customRightBtn
    
    // 如需左侧自定义按钮,类似这样设置
    let customLeftBtn = UIBarButtonItem(title: "返回", style: .plain, target: self, action: #selector(backBtnClicked))
    navigationItem.leftBarButtonItem = customLeftBtn
}

@objc private func settingBtnClicked() {
    print("设置按钮被点击")
}

@objc private func backBtnClicked() {
    dismiss(animated: true)
}

方式2:初始化导航控制器时通过NavigationOptions配置

如果是在外部初始化MBNavigationViewController,可以通过NavigationOptions来配置导航栏按钮,这种方式更适合动态设置的场景:

// 假设你已经定义了路线的起点和终点
let startPoint = Waypoint(coordinate: CLLocationCoordinate2D(latitude: 39.9, longitude: 116.3))
let endPoint = Waypoint(coordinate: CLLocationCoordinate2D(latitude: 39.9, longitude: 116.4))
let routeOptions = NavigationRouteOptions(waypoints: [startPoint, endPoint])

// 配置导航选项
let navOptions = NavigationOptions()
navOptions.navigationBarOptions.rightBarButtonItems = [
    UIBarButtonItem(title: "更多", style: .plain, target: self, action: #selector(moreBtnClicked))
]

// 创建并展示导航控制器
let navVC = MBNavigationViewController(for: routeOptions, navigationOptions: navOptions)
present(navVC, animated: true)

注意:如果你的自定义按钮需要和MapBox导航的原生逻辑交互(比如暂停导航、查看路线详情),可以直接调用MBNavigationViewController的相关方法来实现。

内容的提问来源于stack exchange,提问作者ketaki Damale

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.26 10:17:12