iOS 调整导航按钮左右间距

原创

mob649e816347dd 2023-07-27 14:38:04 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e816347dd的原创作品，请联系作者获取转载授权，否则将追究法律责任

iOS 调整导航按钮左右间距

在 iOS 开发中，导航栏是一个常见的界面元素，它通常包含导航标题和导航按钮。在某些情况下，我们可能需要调整导航按钮的左右间距，以满足设计要求或提升用户体验。本篇文章将介绍如何在 iOS 应用中调整导航按钮的左右间距。

方案一：自定义导航按钮

一种常见的方式是通过自定义导航按钮来调整按钮的间距。我们可以使用 UIBarButtonItem 的 initWithCustomView: 方法创建一个自定义的按钮，并在按钮中设置间距。下面是一个示例代码：

let backButton = UIButton(type: .system)
backButton.setImage(UIImage(named: "back"), for: .normal)
backButton.imageView?.contentMode = .scaleAspectFit
backButton.contentEdgeInsets = UIEdgeInsets(top: 0, left: -10, bottom: 0, right: 10)
backButton.addTarget(self, action: #selector(backButtonTapped), for: .touchUpInside)

let customBackButton = UIBarButtonItem(customView: backButton)
navigationItem.leftBarButtonItem = customBackButton

@objc func backButtonTapped() {
    // 处理返回按钮点击事件
}

在上述代码中，我们使用了一个自定义按钮 backButton，并将其作为 UIBarButtonItem 的 customView。为了调整按钮的布局，我们使用了 contentEdgeInsets 属性来设置按钮的左右间距。

方案二：调整系统返回按钮间距

如果我们使用的是系统返回按钮，并且不想自定义一个按钮，我们可以使用 UIBarButtonItem 的 appearance 方法来全局调整系统返回按钮的间距。下面是一个示例代码：

UINavigationBar.appearance().backIndicatorImage = UIImage(named: "back")
UINavigationBar.appearance().backIndicatorTransitionMaskImage = UIImage(named: "back")

let backButtonInsets = UIEdgeInsets(top: 0, left: -10, bottom: 0, right: 10)
UIBarButtonItem.appearance().setBackButtonTitlePositionAdjustment(backButtonInsets, for: .default)

在上述代码中，我们首先使用 UINavigationBar 的 appearance 方法设置了系统返回按钮的图片。然后，我们使用 UIBarButtonItem 的 appearance 方法调整了按钮的间距。通过设置 setBackButtonTitlePositionAdjustment 方法的参数，我们可以控制返回按钮标题的位置和间距。

方案三：使用自定义导航栏

如果需要更多的自定义能力，我们可以考虑使用自定义导航栏。自定义导航栏可以完全按照设计要求进行布局，并且可以实现更复杂的效果。下面是一个示例代码：

let navigationBar = UINavigationBar(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: 44))
navigationBar.isTranslucent = false
navigationBar.barTintColor = .white
navigationBar.tintColor = .black
navigationBar.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.black]

let backButton = UIButton(type: .system)
backButton.setImage(UIImage(named: "back"), for: .normal)
backButton.imageView?.contentMode = .scaleAspectFit
backButton.contentEdgeInsets = UIEdgeInsets(top: 0, left: -10, bottom: 0, right: 10)
backButton.addTarget(self, action: #selector(backButtonTapped), for: .touchUpInside)

let backButtonContainer = UIView(frame: CGRect(x: 0, y: 0, width: 60, height: 44))
backButtonContainer.addSubview(backButton)
backButton.translatesAutoresizingMaskIntoConstraints = false
backButton.leadingAnchor.constraint(equalTo: backButtonContainer.leadingAnchor).isActive = true
backButton.centerYAnchor.constraint(equalTo: backButtonContainer.centerYAnchor).isActive = true

let navigationItem = UINavigationItem()
navigationItem.title = "导航标题"
navigationItem.leftBarButtonItem = UIBarButtonItem(customView: backButtonContainer)

navigationBar.setItems([navigationItem], animated: false)

view.addSubview(navigationBar)

在上述代码中，我们创建了一个自定义的导航栏 navigationBar，并设置了其样式、背景颜色和标题样式。然后，我们创建了一个自定义的返回按钮 backButton，并将其添加到按钮容器 backButtonContainer 中。最后，我们使用自定义的导航栏项 navigationItem 来显示导航标题和返回按钮。

总结起来，调整导航按钮的左右间距有多种方式，可以根据实际需求选择合适的方案。无论使用