iOS:如何在自定义MapBox导航控制器中添加MBFloatingButton及自定义按钮
嘿,我来帮你解决这两个MapBox导航控制器的自定义按钮需求,分步骤给你说明:
要实现浮动按钮的添加,你可以在自定义的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("浮动按钮触发啦!") } }
有两种常用方式可以实现,根据你的场景灵活选择:
方式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
相关产品推荐
相关产品推荐

