navigation bar right bar button items spacing
33,687
Solution 1
I solved my problem in this way:
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)
Now it looks good,
Update for 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)
Solution 2
For 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]
Replace ViewController
with your view controller
Solution 3
Set testButton.frame
doesn't help.
This solution is correct for me!
rightButton.imageEdgeInsets = UIEdgeInsets(top: 3, left: 10, bottom: 7, right: 0)
Solution 4
This solution is in 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];
Solution reference by @mikle94. His answer is in Swift.
Solution 5
// 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
Author by
mkz
Updated on July 09, 2022Comments
-
mkz almost 2 years
I have created a with left bar button item added from storyboard, titleView and three right bar button items from code.
Here is the code:
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) }
My problem is that I want to change the spacing between right buttons but I don't know how.
I've tried to add a fixedButton between them but it just increased the existing space.
Can some one help me? Thanks.