I want to design naviation view like below image:
I am adding this code
func setupUpHomePageNavigation(title:String, subtitle:String) {
let back_button = UIBarButtonItem(image: #imageLiteral(resourceName: "ic_logo"), style: .plain, target: self, action: #selector(self.btnKbImageClicked))
self.navigationItem.leftBarButtonItems = [back_button]
let space = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: nil, action: nil)
space.width = 0.0
let one = UILabel()
one.text = title
one.textAlignment = .left
one.textColor = UIColor.black
one.backgroundColor = .green
one.font = UIFont.systemFont(ofSize: 15)
one.sizeToFit()
let two = UILabel()
two.text = subtitle
two.textAlignment = .left
two.backgroundColor = .yellow
two.textColor = .darkGray
two.font = UIFont.systemFont(ofSize: 12)
two.textAlignment = .center
two.sizeToFit()
let stackView = UIStackView(arrangedSubviews: [one, two])
stackView.distribution = .equalCentering
stackView.axis = .vertical
stackView.alignment = .leading
stackView.backgroundColor = .red
one.sizeToFit()
two.sizeToFit()
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.widthAnchor.constraint(equalToConstant:150).isActive = true
//self.navigationItem.titleView = titleView
self.navigationItem.leftBarButtonItems = [back_button,space,UIBarButtonItem(customView: stackView)]
let account_button = UIBarButtonItem(image:#imageLiteral(resourceName: "user-silhouette"), style: .plain, target: self, action: #selector(self.btnAccountClicked))
account_button.tintColor = .black
let search_button = UIBarButtonItem(image:#imageLiteral(resourceName: "search (2)"), style: .plain, target: self, action: #selector(self.btnSearchClicked))
search_button.tintColor = .black
self.navigationItem.rightBarButtonItems = [account_button,search_button]
}
What is the "ic_logo" image size ?
I am asking for this because I tried multiple images for navigation bar button and :
using image of minimum 90*90 dimension and then it's 2x and 3x, I am getting above result. I am using the same code of your's. It's just I am changing the image size.
If I will increase the size further the space will increase. Ideally If you want to keep the left bar button icon on the left side the image size needs to be 30*30 or 40*40 and it's multiples. Then the UI will be perfect.
Try changing the "ic_logo" size.