导航栏右栏按钮项目间距答案

【问题标题】：navigation bar right bar button items spacing导航栏右栏按钮项目间距
【发布时间】：2015-12-04 02:18:36
【问题描述】：

我创建了一个从情节提要、titleView 和代码中添加的左栏按钮项和三个右栏按钮项。

代码如下：

override func viewDidLoad() {
    super.viewDidLoad()

    var screenWidth = UIScreen.mainScreen().bounds.width
    // custom title view
    var navBarWidth: CGFloat = self.navigationController!.navigationBar.frame.size.width
    let customTitleView = UIView(frame: CGRectMake(0, 0, navBarWidth, 44))
    titleLabel = UILabel(frame: CGRectMake(20, 0, navBarWidth, 40))
    titleLabel.text = conversationName
    if let titleFont = UIFont(name: "Roboto-Regular", size: 20) {
        titleLabel.font = titleFont
    }
    titleLabel.textColor = UIColor.whiteColor()

    customTitleView.addSubview(titleLabel)
    self.navigationItem.titleView = customTitleView

    // right bar buttons
    var searchImage = UIImage(named: "search")!
    var clipImage = UIImage(named: "clip")!
    var pencilImage = UIImage(named: "pencil")!

    var searchBtn = UIBarButtonItem(image: searchImage, style: UIBarButtonItemStyle.Plain, target: self, action: Selector("searchBtnPressed"))
    searchBtn.tintColor = UIColor.whiteColor()
    var clipBtn = UIBarButtonItem(image: clipImage, style: UIBarButtonItemStyle.Plain, target: self, action: Selector("clipBtnPressed"))
    clipBtn.tintColor = UIColor.whiteColor()
    var pencilBtn = UIBarButtonItem(image: pencilImage, style: UIBarButtonItemStyle.Plain, target: self, action: Selector("pencilBtnPressed"))
    pencilBtn.tintColor = UIColor.whiteColor()

    self.navigationItem.setRightBarButtonItems([pencilBtn, clipBtn, searchBtn], animated: false)
}

我的问题是我想改变右按钮之间的间距，但我不知道怎么做。

我尝试在它们之间添加一个固定按钮，但它只是增加了现有空间。

有人可以帮助我吗？谢谢。

【问题讨论】：

导航栏忽略间距。使用 UIBarButton containerView 初始化器
在 iOS 上使用 Roboto 字体？异端！ ;D
@RicardoSánchez-Sáez 它是在 PRD 中指定的。

标签： ios swift uibarbuttonitem uinavigationitem

【解决方案1】：

我这样解决了我的问题：

var searchImage = UIImage(named: "search-selected")!
var clipImage = UIImage(named: "clip")!
var pencilImage = UIImage(named: "pencil")!

let searchBtn: UIButton = UIButton.buttonWithType(UIButtonType.Custom) as! UIButton
searchBtn.setImage(searchImage, forState: UIControlState.Normal)
searchBtn.addTarget(self, action: "searchBtnPressed", forControlEvents: UIControlEvents.TouchUpInside)
searchBtn.frame = CGRectMake(0, 0, 30, 30)
let searchBarBtn = UIBarButtonItem(customView: searchBtn)

let clipBtn: UIButton = UIButton.buttonWithType(UIButtonType.Custom) as! UIButton
clipBtn.setImage(clipImage, forState: UIControlState.Normal)
clipBtn.addTarget(self, action: "clipBtnPressed", forControlEvents: UIControlEvents.TouchUpInside)
clipBtn.frame = CGRectMake(0, 0, 30, 30)
let clipBarBtn = UIBarButtonItem(customView: clipBtn)

let pencilBtn: UIButton = UIButton.buttonWithType(UIButtonType.Custom) as! UIButton
pencilBtn.setImage(pencilImage, forState: UIControlState.Normal)
pencilBtn.addTarget(self, action: "pencilBtnPressed", forControlEvents: UIControlEvents.TouchUpInside)
pencilBtn.frame = CGRectMake(0, 0, 30, 30)
let pencilBarBtn = UIBarButtonItem(customView: pencilBtn)

self.navigationItem.setRightBarButtonItems([pencilBarBtn, clipBarBtn, searchBarBtn], animated: false)

现在看起来不错，

Swift 4.1 更新

let testButton : UIButton = UIButton.init(type: .custom)
testButton.setImage(editImage, for: .normal)
testButton.addTarget(self, action: #selector(didTapCameraButton), for: .touchUpInside)
testButton.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
let addButton = UIBarButtonItem(customView: testButton)

【讨论】：

你可以使用一个函数而不是重复所有的代码。但是，谢谢它的工作！
一个完美的答案我喜欢这个。所以下面我将在目标c中给出答案
正是我想要的，但是我不需要设置框架，所以我离开了那条线。
但是，如果这些条形按钮不是自定义条形按钮，而是由“完成”、“相机”或“编辑”等系统提供的，该怎么办。
仅使用 customView 初始化器而不是带有 image 的初始化器给了我正确的结果，因为图像没有像看起来那样插入。

【解决方案2】：

对于 Swift 3：

let searchBtn: UIButton = UIButton(type: UIButtonType.custom)
searchBtn.setImage(UIImage(named: "search"), for: [])
searchBtn.addTarget(self, action: #selector(ViewController.searchBtnPressed(_:)), for: UIControlEvents.touchUpInside)
searchBtn.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
let searchButton = UIBarButtonItem(customView: searchBtn)

let clipBtn: UIButton = UIButton(type: UIButtonType.custom)
clipBtn.setImage(UIImage(named: "clip"), for: [])
clipBtn.addTarget(self, action: #selector(ViewController.clipBtnPressed(_:)), for: UIControlEvents.touchUpInside)
clipBtn.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
let clipButton = UIBarButtonItem(customView: clipBtn)

let pencilBtn: UIButton = UIButton(type: UIButtonType.custom)
pencilBtn.setImage(UIImage(named: "pencil"), for: [])
pencilBtn.addTarget(self, action: #selector(ViewController.pencilBtnPressed(_:)), for: UIControlEvents.touchUpInside)
pencilBtn.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
let pencilButton = UIBarButtonItem(customView: pencilBtn)

self.navigationItem.rightBarButtonItems = [pencilButton, clipButton, searchButton]

用你的视图控制器替换ViewController

【讨论】：

【解决方案3】：

设置testButton.frame 没有帮助。

这个解决方案对我来说是正确的！

rightButton.imageEdgeInsets = UIEdgeInsets(top: 3, left: 10, bottom: 7, right: 0)

【讨论】：

【解决方案4】：

// create three nav bar buttons
    var searchBtn = UIBarButtonItem(image: searchImage, style: UIBarButtonItemStyle.Plain, target: self, action: Selector("searchBtnPressed"))
    searchBtn.tintColor = UIColor.whiteColor()
    var clipBtn = UIBarButtonItem(image: clipImage, style: UIBarButtonItemStyle.Plain, target: self, action: Selector("clipBtnPressed"))
    clipBtn.tintColor = UIColor.whiteColor()
    var pencilBtn = UIBarButtonItem(image: pencilImage, style: UIBarButtonItemStyle.Plain, target: self, action: Selector("pencilBtnPressed"))
    pencilBtn.tintColor = UIColor.whiteColor()

// create a spacer
  var space = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: self, action: nil)
  space.width = 10

  var buttons = [pencilBtn, space, clipBtn, space, searchBtn]
  navigationItem?.rightBarButtonItems = buttons

【讨论】：

【解决方案5】：

此解决方案在 Objective C

中

UIImage *settingImageName = [UIImage imageNamed:@"Menu_Burger_Icon"];
UIButton * settingButton = [UIButton buttonWithType:UIButtonTypeCustom];
[settingButton setImage:settingImageName forState:UIControlStateNormal];
[settingButton addTarget:self action:@selector(settingsBtnClicked) forControlEvents:UIControlEventTouchUpInside];
settingButton.frame = CGRectMake(0, 0, 30, 30);

UIBarButtonItem *settingBarButton = [[UIBarButtonItem alloc] initWithCustomView:settingButton];

UIImage *notificationImageName = [UIImage imageNamed:@"NotificationON"];
UIButton * notificationButton = [UIButton buttonWithType:UIButtonTypeCustom];
[notificationButton setImage:notificationImageName forState:UIControlStateNormal];
[notificationButton addTarget:self action:@selector(notificationButtonClicked) forControlEvents:UIControlEventTouchUpInside];
notificationButton.frame = CGRectMake(0, 0, 30, 30);
UIBarButtonItem *notificationBarButton = [[UIBarButtonItem alloc] initWithCustomView:notificationButton];

self.navigationItem.rightBarButtonItems  = @[settingBarButton,notificationBarButton];

@mikle94 提供的解决方案参考。他的答案是斯威夫特。

【讨论】：

这对我来说按预期工作，但问题是我想将色调应用到我尝试如下的按钮但它不起作用你可以检查一次。 settingButton.tintColor = [UIColor blackColor]; settingBarButton.tintColor = [UIColor blackColor];
无法使用这种方法设置 tintColor 关于应用 tintColor 的任何想法？

【解决方案6】：

let rightActionButton:UIButton = UIButton()

if #available(iOS 11.0, *) {

    let widthConstraint = rightActionButton.widthAnchor.constraint(equalToConstant: 30)
    let heightConstraint = rightActionButton.heightAnchor.constraint(equalToConstant: 30)
    heightConstraint.isActive = true
    widthConstraint.isActive = true
}
else {
    rightActionButton.frame = CGRect.init(x: 0, y: 0, width: 30, height: 30)
}

rightActionButton.setImage(UIImage.init(named: "3-dots-right-button"), for: .normal)
rightActionButton.addTarget(self, action: #selector(handleRightMenu), for: UIControlEvents.touchUpInside)
rightActionButton.setTitle("", for: .normal)
rightActionButton.tintColor = UIColor(hex:K.NODD_GREEN_HEX)


let rightActionBarButton:UIBarButtonItem = UIBarButtonItem(customView: rightActionButton)

let rightBarButtonItem1 = rightActionBarButton
let rightBarButtonItem2 = UIBarButtonItem(barButtonSystemItem: .action, target: self, action: #selector(handleRight2Menu))

self.navigationItem.rightBarButtonItems = [rightBarButtonItem1,rightBarButtonItem2]

【讨论】：

【解决方案7】：

尝试更改constraintEqualToConstant

[myUIButton.widthAnchor constraintEqualToConstant:24].active = YES;
[myUIButton.heightAnchor constraintEqualToConstant:24].active = YES;

【讨论】：

【解决方案8】：

@mkz 的支持解决方案，通过使用函数来减少代码（Swift 4.2.1）

向函数添加了最重要的参数（注意如何将选择器传递给函数），您可以根据需要添加更多参数。

func makeCustomNavigationButton(imageName: String, action: Selector) -> UIBarButtonItem{

    let image = UIImage(named: imageName)!
    let btn: UIButton = UIButton(type: UIButton.ButtonType.custom)
    btn.setImage(image, for: .normal)
    btn.addTarget(self, action: action, for: .touchUpInside)
    btn.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
    let barBtn = UIBarButtonItem(customView: btn)

    return barBtn
}

如何调用：

let search = self.makeCustomNavigationButton(imageName: "search", action: #selector(searchBtnPressed(_:)))
let clip = self.makeCustomNavigationButton(imageName: "clip", action: #selector(clipBtnPressed(_:)))
let pencil = self.makeCustomNavigationButton(imageName: "pencil", action: #selector(pencilBtnPressed(_:)))
self.navigationItem.rightBarButtonItems = [search, clip, pencil]

【讨论】：

【解决方案9】：

您也可以先在 Storyboard 中进行连接。
我有两个右栏按钮项。

（这是objective-c代码，你可以快速修改。）

首先在视图控制器中创建对它们的引用。

@interface MyViewController ()
    @property (weak, nonatomic) IBOutlet UIButton *smsButton;
    @property (weak, nonatomic) IBOutlet UIButton *checkoutButton;
@end

然后，在 viewDidLoad 中，调整它们的宽度和高度。

// Adjust right bar button item spacing.
self.smsButton.frame = CGRectMake(0, 0, 30, 30);
self.lockButton.frame = CGRectMake(0, 0, 30, 30);

【讨论】：

【解决方案10】：

这是解决这个问题的方法之一。

将 UIBarButtonItem 用作空格

let space = UIBarButtonItem(barButtonSystemItem: .FixedSpace, target: nil, action: nil)
space.width = -20 // adjust as needed
self.navigationItem.rightBarButtonItems = [pencilBtn, clipBtn, searchBtn, space]

【讨论】：