iOS - 在导航栏标题中添加图像和文本

Question

我希望创建一个类似于附图中的导航栏。

导航栏的标题将由图像和文本组合而成。

1. 是否应该按最佳实践来处理？

2. 如何处理呢？

- Darrell

Answer 1

正如这个答案所示，最简单的解决方案是将文本添加到您的图像中，并将该图像添加到导航栏中，如下所示：

var image = UIImage(named: "logo.png")
self.navigationItem.titleView = UIImageView(image: image)

但是如果你需要分别添加文本和图像（例如在本地化的情况下），你可以将导航栏的标题视图设置为包含图像和文本的UIView，并将它们添加到其中，然后将navigationItem的标题视图设置为该UIView，例如（假设导航栏是导航控制器的一部分）：

// Only execute the code if there's a navigation controller 
if self.navigationController == nil {
    return
}

// Create a navView to add to the navigation bar
let navView = UIView()

// Create the label
let label = UILabel()
label.text = "Text"
label.sizeToFit()
label.center = navView.center
label.textAlignment = NSTextAlignment.Center

// Create the image view
let image = UIImageView()
image.image = UIImage(named: "Image.png")
// To maintain the image's aspect ratio:
let imageAspect = image.image!.size.width/image.image!.size.height
// Setting the image frame so that it's immediately before the text:
image.frame = CGRect(x: label.frame.origin.x-label.frame.size.height*imageAspect, y: label.frame.origin.y, width: label.frame.size.height*imageAspect, height: label.frame.size.height)
image.contentMode = UIViewContentMode.ScaleAspectFit

// Add both the label and image view to the navView
navView.addSubview(label)
navView.addSubview(image)

// Set the navigation bar's navigation item's titleView to the navView
self.navigationItem.titleView = navView

// Set the navView's frame to fit within the titleView
navView.sizeToFit()

- Lyndsey Scott

---

@NaveedAhmad。谢谢女士，不是男士 :) - Awais Fayyaz

Answer 2

使用水平的 UIStackView 应该会更加简洁和易于操作。

请将下面的扩展添加到 UIViewController 中。

extension UIViewController {
    func setTitle(_ title: String, andImage image: UIImage) {
        let titleLbl = UILabel()
        titleLbl.text = title
        titleLbl.textColor = UIColor.white
        titleLbl.font = UIFont.systemFont(ofSize: 20.0, weight: .bold)
        let imageView = UIImageView(image: image)
        let titleView = UIStackView(arrangedSubviews: [imageView, titleLbl])
        titleView.axis = .horizontal
        titleView.spacing = 10.0
        navigationItem.titleView = titleView
    }
}

然后在您的视图控制器中使用它：

setTitle("yourTitle", andImage: UIImage(named: "yourImage"))

（如果您想将文本和图标一起居中对齐，请执行此操作。如果您希望文本居中对齐并将图标放置在左侧，则只需添加一个宽度约束等于图标宽度的空UIView）

- Developeder

---

@AwaisFayyaz，你能提供更多细节吗？ - Developeder

我复制粘贴了你的代码并运行了它。但是标题没有显示出来。我正在我的导航控制器的根视图控制器中编写这段代码。 - Awais Fayyaz

这个完美地运作了。非常感谢。对于一些人来说，标题可能不会显示，因为文本颜色是白色的。 - Dinithi De Silva

非常棒且“迅捷”的解决方案，而且非常简单。谢谢！ - nja

更优雅的解决方案 - Danilo

Answer 3

这是我对Swift 4的建议，因为被接受的答案对我没有用（大部分内容都在屏幕外）：

// .. in ViewController
var navBar = CustomTitleView()

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)


    // =================== navBar =====================
    navBar.loadWith(title: "Budget Overview", leftImage: Images.pie_chart)
    self.navigationItem.titleView = navBar

}

class CustomTitleView: UIView
{

var title_label = CustomLabel()
var left_imageView = UIImageView()

override init(frame: CGRect){
    super.init(frame: frame)
    setup()
}

required init?(coder aDecoder: NSCoder){
    super.init(coder: aDecoder)
    setup()
}

func setup(){
    self.addSubview(title_label)
    self.addSubview(left_imageView)

}

func loadWith(title: String, leftImage: UIImage?)
{

    //self.backgroundColor = .yellow

    // =================== title_label ==================
    //title_label.backgroundColor = .blue
    title_label.text = title
    title_label.font = UIFont.systemFont(ofSize: FontManager.fontSize + 5)


    // =================== imageView ===================
    left_imageView.image = leftImage

    setupFrames()
}

func setupFrames()
{

    let height: CGFloat = Navigation.topViewController()?.navigationController?.navigationBar.frame.height ?? 44
    let image_size: CGFloat = height * 0.8

    left_imageView.frame = CGRect(x: 0,
                                  y: (height - image_size) / 2,
                                  width: (left_imageView.image == nil) ? 0 : image_size,
                                  height: image_size)

    let titleWidth: CGFloat = title_label.intrinsicContentSize.width + 10
    title_label.frame = CGRect(x: left_imageView.frame.maxX + 5,
                               y: 0,
                               width: titleWidth,
                               height: height)



    contentWidth = Int(left_imageView.frame.width)
    self.frame = CGRect(x: 0, y: 0, width: CGFloat(contentWidth), height: height)
}


var contentWidth: Int = 0 //if its CGFloat, it infinitely calls layoutSubviews(), changing franction of a width 
override func layoutSubviews() {
    super.layoutSubviews()

    self.frame.size.width = CGFloat(contentWidth)

}

}

- Michael Ros

---

这个很好用。现在我正在尝试将图像和标签左对齐到左侧按钮栏。我应该使用约束来实现吗？谢谢。 - FlimFlam Vir

Answer 4

Swift 4.2 + Interface Builder 解决方案

作为对Lyndsey Scott的回答的跟进，您还可以在Interface Builder中创建一个UIView .xib，使用它来布置标题和图像，然后通过@IBOutlet实时更新它。这对于动态内容、国际化、可维护性等方面非常有用。

创建一个带有 UILabel outlet 的 UIView 子类，并将您的新 .xib 分配给此类：

import UIKit

class FolderTitleView: UIView {

    @IBOutlet weak var title : UILabel!

    /// Create an instance of the class from its .xib
    class func instanceFromNib() -> FolderTitleView {
        return UINib(nibName: "FolderTitleView", bundle: nil).instantiate(withOwner: nil, options: nil)[0] as! FolderTitleView
    }
}

将标签（例如我的示例中的title）连接到您的.xib文件中的插座，然后在UIViewController中执行以下操作：

/// Reference to the title view
var folderTitleView : FolderTitleView?

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    // Set the screen title to match the active folder
    updateTitle()    
}

/// Updates the title of the navigation controller.
func updateTitle() {
    self.title = ""
    if folderTitleView == nil {
        folderTitleView = FolderTitleView.instanceFromNib()
        self.navigationItem.titleView = folderTitleView
    }
    folderTitleView!.title.text = "Listening"
    folderTitleView!.layoutIfNeeded()
}

这将导致一个漂亮的自动居中标题栏，其中包含一个嵌入式图像，您可以轻松地从代码中更新。

- Jason Machacek

Answer 5

// 对我有用

1. 创建一个视图并设置框架
2. 现在在视图中添加图像并设置框架
3. 在添加图像后，在同一视图中添加标签并设置框架

4. 在将图像和标签添加到视图后，将相同的视图添加到navigationItem中

   let navigationView = UIView(frame: CGRect(x: 0, y: 0, width: 50, height: 55))

   let labell: UILabel = UILabel(frame: CGRect(x: -38, y: 25, width: 150, height: 25))
   labell.text = "你的文本"
   labell.textColor = UIColor.black
   labell.font = UIFont.boldSystemFont(ofSize: 10)
   navigationView.addSubview(labell)
   
   let image: UIImage = UIImage(named: ValidationMessage.headerLogoName)!
   let imageView = UIImageView(frame: CGRect(x: -20, y: 0, width: 100, height: 30))
   imageView.contentMode = .scaleAspectFit
   imageView.image = image
   //navigationItem.titleView = imageView
   
   navigationView.addSubview(imageView)
   
   navigationItem.titleView = navigationView
   

- Developer