Stackview in navigation bar

Question

Is it possible to place UIStackView in NavigationBar programmaticaly using swift? I want to place there StackView with two arranged stackviews. But when i do that , it shows nothing in navigation bar. If it is possible, please provide example. Thanks

Create your own custom navigation from a UIStackView. From my knowledge there is no way to add a stackView to the navigation bar — Ionescu Vlad, Apr 24 '18 at 12:24

score 2 · Answer 1 · answered Apr 24 '18 at 13:49

Finally I found solution

let btnSort   = UIButton(type: .system)
    btnSort.frame =  CGRect(x: 0, y: 0, width: 120, height: 40)
    btnSort.tintColor = UIColor.white
    btnSort.setImage(UIImage(named:"ic_controls_icon.png"), for: .normal)
    btnSort.imageEdgeInsets = UIEdgeInsets(top: 6,left: -10,bottom: 6,right: 34)
    btnSort.titleEdgeInsets = UIEdgeInsets(top: 0,left: 0,bottom: 0,right: 14)
    btnSort.setTitle("SORT", for: .normal)
    btnSort.layer.borderWidth = 1.0
    btnSort.backgroundColor = UIColor.red //--> set the background color and check
    btnSort.layer.borderColor = UIColor.white.cgColor

    let btnControl   = UIButton(type: .system)
    btnControl.frame =  CGRect(x: 0, y: 0, width: 120, height: 40)
    btnControl.tintColor = UIColor.white
    btnControl.setImage(UIImage(named:"ic_controls_icon.png"), for: .normal)
    btnControl.imageEdgeInsets = UIEdgeInsets(top: 6,left: -10,bottom: 6,right: 34)
    btnControl.titleEdgeInsets = UIEdgeInsets(top: 0,left: 0,bottom: 0,right: 14)
    btnControl.setTitle("SORT", for: .normal)
    btnControl.layer.borderWidth = 1.0
    btnControl.backgroundColor = UIColor.red //--> set the background color and check
    btnControl.layer.borderColor = UIColor.white.cgColor

    let view = UIStackView(frame: CGRect(x: 0, y: 0, width: 300, height: 50))
    view.axis = .horizontal
    view.distribution = .fillEqually
    view.spacing = 5
    view.addArrangedSubview(btnSort)
    view.addArrangedSubview(btnControl)

    let mainTitleView = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 50))
    mainTitleView.addSubview(view)


    navigationItem.titleView = mainTitleView

score 2 · Answer 2 · answered Apr 24 '18 at 14:20

You can make any UIView subclass (of which UIStackView is one) the navigation bar's title using your view controller's navigationItem.titleView property.

You can test this out in a playground…

import UIKit
import PlaygroundSupport

let vc = UIViewController()
vc.view.backgroundColor = .white
let nav = UINavigationController(rootViewController: vc)

let topLabel = UILabel()
topLabel.font = UIFont.boldSystemFont(ofSize: 20)
topLabel.text = "Hello"

let bottomLabel = UILabel()
bottomLabel.font = UIFont.systemFont(ofSize: 16)
bottomLabel.text = "World!"

let stackView = UIStackView(arrangedSubviews: [topLabel, bottomLabel])
stackView.axis = .vertical

vc.navigationItem.titleView = stackView

PlaygroundPage.current.liveView = nav.view
PlaygroundPage.current.needsIndefiniteExecution = true

score 0 · Answer 3 · answered Aug 17 '20 at 19:51

var navTitle: String? = "Preview Checklist"
var navSubTitle: String? = "Edit Checklist >"

  lazy var titleStackView: UIStackView = {
    
    let titleLabel = UILabel()
    titleLabel.textAlignment = .left
    titleLabel.text = navTitle
  //titleLabel.font = UIFont(name: "RawlineMedium-Regular", size:CGFloat(15))
    titleLabel.textColor = .white
    
    
    let subtitleLabel = UILabel()
    subtitleLabel.textAlignment = .left
    subtitleLabel.text = navSubTitle
  //subtitleLabel.font = UIFont(name: "RawlineMedium-Regular", size:CGFloat(11))
    subtitleLabel.textColor = .white
    
    let stackView = UIStackView(arrangedSubviews: [ titleLabel, subtitleLabel])
    stackView.axis = .vertical
    stackView.backgroundColor = .blue
    
    return stackView
}()

  override func viewDidLoad() {
    super.viewDidLoad()
    self.navigationItem.titleView = titleStackView
  }

Stackview in navigation bar

3 Answers3