Home > front end >  Navigation bar display with UIImage and UILabel for title
Navigation bar display with UIImage and UILabel for title

Time:10-26

enter image description here

I want to put navigation bar title with UIImage and UILabel.

let image = UIImage(systemName: "flame")
imageView.tintColor = R.color.fire()
self.navigationItem.titleView = imageView
self.navigationItem.title = "표시한 제품"
self.navigationController?.navigationBar.titleTextAttributes = [.foregroundColor: R.color.myPageMenu]

This is my code, but this code only shows UIImage(systemName: "flame").

CodePudding user response:

Here is how you can add UIImageView and UILabel in the Navigation bar.

File: ViewController.swift

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var navView: UIView!
    @IBOutlet weak var navTitle: UILabel!
    @IBOutlet weak var navImage: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setNavTitleView()
    }

    func setNavTitleView() {
        navTitle.text = "표시한 제품"
        navTitle.textColor = .lightGray
        navImage.image = UIImage(systemName: "flame")
        navImage.tintColor = .red
        navigationController?.navigationBar.backgroundColor = .black
        navigationController?.navigationBar.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.lightGray]
        navigationController?.navigationBar.tintColor = .lightGray
        navigationItem.titleView = navView
    }

}

Storyboard:

enter image description here

Output:

enter image description here

CodePudding user response:

let image = UIImage(systemName: "flame")
let title = "표시한 제품"

let imageView = UIImageView()
imageView.image = image

let textLabel = UILabel()
textLabel.text  = text
textLabel.textAlignment = .center

//Stack View
let stackView   = UIStackView()
stackView.axis  = NSLayoutConstraint.Axis.horizontal
stackView.distribution  = UIStackView.Distribution.equalSpacing
stackView.alignment = UIStackView.Alignment.center
stackView.spacing   = 4.0

stackView.addArrangedSubview(imageView)
stackView.addArrangedSubview(textLabel)

self.navigationItem.titleView = stackView
  • Related