Search code examples
iosswiftuibarbuttonitemuinavigationitem

navigation bar right bar button items spacing


I have created a navigation bar 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.


Solution

  • 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,

    Difference between before and after

    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)