如何基于设备原点设置导航返回按钮的X轴位置?
如何从设备原点设置导航返回按钮的X轴位置?
你遇到的问题其实是因为UIBarButtonItem默认带有系统内边距,直接给自定义按钮设置x:0并不会让它贴到屏幕最左侧——系统会自动给导航栏左侧按钮添加间距,用来和屏幕边缘区分开。下面给你几个可行的解决方案:
方案1:调整BarButtonItem的内边距
最简单的方式是给UIBarButtonItem设置负的左侧内边距,把按钮向左“拉”到屏幕原点位置:
static func backButton(navigationItem: UINavigationItem) { // Back Button let btnBack = UIButton(frame: CGRect(x: 0, y: 0, width: 40, height: 22)) btnBack.setImage(UIImage(named:"icn-back"), for: .normal) btnBack.addTarget(self, action: #selector(NavBar.backBtn), for: .touchUpInside) let leftBtn = UIBarButtonItem(customView: btnBack) leftBtn.tintColor = UIColor(red: 30/255, green: 104/255, blue: 140/255, alpha: 1.0) // 设置负内边距抵消系统默认间距 leftBtn.contentEdgeInsets = UIEdgeInsets(top: 0, left: -16, bottom: 0, right: 0) navigationItem.leftBarButtonItem = leftBtn }
注:-16是常见的系统默认左侧间距值,你可以根据实际效果微调这个数值。
方案2:用容器View包裹按钮
有时候系统会重置自定义按钮的frame,这时候可以用一个容器View来包裹按钮,通过调整按钮在容器内的位置来实现左移:
static func backButton(navigationItem: UINavigationItem) { // Back Button let btnBack = UIButton(frame: CGRect(x: -16, y: 0, width: 40, height: 22)) btnBack.setImage(UIImage(named:"icn-back"), for: .normal) btnBack.addTarget(self, action: #selector(NavBar.backBtn), for: .touchUpInside) // 创建容器View,避免系统修改按钮frame let containerView = UIView(frame: CGRect(x: 0, y: 0, width: 40, height: 22)) containerView.addSubview(btnBack) let leftBtn = UIBarButtonItem(customView: containerView) leftBtn.tintColor = UIColor(red: 30/255, green: 104/255, blue: 140/255, alpha: 1.0) navigationItem.leftBarButtonItem = leftBtn }
方案3:全局自定义NavigationBar(适合全APP统一风格)
如果你的APP所有页面都需要这种无间距的返回按钮,可以自定义UINavigationBar,重写布局方法来强制调整左侧按钮位置:
class CustomNavigationBar: UINavigationBar { override func layoutSubviews() { super.layoutSubviews() // 遍历子视图,找到左侧按钮的容器 for subview in subviews { let className = NSStringFromClass(subview.classForCoder) if className.contains("UINavigationBarLeadingView") { // 把容器的x坐标设为0,贴到屏幕左边缘 subview.frame = CGRect(x: 0, y: subview.frame.origin.y, width: subview.frame.width, height: subview.frame.height) } } } }
使用时,在导航控制器初始化时指定自定义的NavigationBar:
let navController = UINavigationController(navigationBarClass: CustomNavigationBar.self, toolbarClass: nil)
注意事项
- 不同iOS版本的系统内边距可能略有差异,建议在多个版本的模拟器/真机上测试效果;
- 调整位置时要确保按钮的点击区域足够大(至少44x44pt,符合iOS人机交互规范),避免用户难以点击;
- 如果导航栏开启了半透明效果(
translucent = true),可能需要微调Y轴位置来保证视觉对齐。
内容的提问来源于stack exchange,提问作者Ayush Agrawal
相关产品推荐
相关产品推荐

