如何修改LeftBarButtonItem(左侧导航栏按钮)的尺寸?
嘿,我之前也踩过这个坑!导航栏自带的BarButtonItem对图片的尺寸限制挺死的,直接调图片宽高根本不管用,得换两种思路来解决,我给你捋捋:
方法一:自定义UIButton(最灵活,推荐)
直接用自定义按钮作为BarButtonItem的customView,这样你能完全控制图片和按钮的尺寸,步骤如下:
// 1. 创建自定义按钮 let leftButton = UIButton(type: .custom) // 2. 先把图片缩放到你想要的尺寸(避免系统自动拉伸) if let originalImage = UIImage(named: "your_image_name") { let targetSize = CGSize(width: 32, height: 32) // 这里设置你想要的图片大小 let resizedImage = originalImage.resized(to: targetSize) leftButton.setImage(resizedImage, for: .normal) } // 3. 绑定点击事件 leftButton.addTarget(self, action: #selector(leftBarButtonTapped), for: .touchUpInside) // 4. 设置按钮的整体尺寸(可以用frame或者AutoLayout) leftButton.frame = CGRect(x: 0, y: 0, width: 40, height: 40) // 如果用AutoLayout更适配不同屏幕: // leftButton.translatesAutoresizingMaskIntoConstraints = false // NSLayoutConstraint.activate([ // leftButton.widthAnchor.constraint(equalToConstant: 40), // leftButton.heightAnchor.constraint(equalToConstant: 40) // ]) // 5. 把按钮设置为导航栏左侧按钮 navigationItem.leftBarButtonItem = UIBarButtonItem(customView: leftButton) // 给UIImage加个扩展用来缩放图片 extension UIImage { func resized(to size: CGSize) -> UIImage? { UIGraphicsBeginImageContextWithOptions(size, false, UIScreen.main.scale) defer { UIGraphicsEndImageContext() } draw(in: CGRect(origin: .zero, size: size)) return UIGraphicsGetImageFromCurrentImageContext() } } // 点击事件的实现 @objc private func leftBarButtonTapped() { // 你的按钮逻辑 }
方法二:调整图片渲染模式+内边距(快速解决)
如果不想自定义按钮,可以试试调整图片的渲染模式,再通过imageInsets来控制显示区域:
// 1. 加载图片并设置为原始渲染模式(避免系统把图片变成模板色,导致样式异常) guard let buttonImage = UIImage(named: "your_image_name")?.withRenderingMode(.alwaysOriginal) else { return } // 2. 创建BarButtonItem let leftBarButton = UIBarButtonItem(image: buttonImage, style: .plain, target: self, action: #selector(leftBarButtonTapped)) // 3. 设置内边距,通过调整上下左右的数值来控制图片的显示大小和位置 leftBarButton.imageInsets = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8) // 4. 赋值给导航栏 navigationItem.leftBarButtonItem = leftBarButton // 点击事件 @objc private func leftBarButtonTapped() { // 你的按钮逻辑 }
几个注意点
- 图片本身的分辨率要够,不然缩放后会模糊,建议准备2x和3x的适配图;
- 导航栏默认高度是44pt(大标题模式是96pt),按钮的高度不要超过这个数值,不然会被截断;
- 如果用自定义按钮,记得给按钮加点击事件,不然按钮不会响应触摸。
内容的提问来源于stack exchange,提问作者podgradle
相关产品推荐
相关产品推荐

