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

Question

我想创建一个类似于附加图像中的导航栏.

导航栏的标题将是图像和文本的组合.

1. 这应该按照任何最佳做法进行吗？

2. 怎么做到呢？

Answer 1

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

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

但是,如果您必须单独添加文本和图像(例如,在本地化的情况下),您可以将导航栏的标题视图设置为包含图像和文本,方法是将它们添加到a 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()

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
    }
}

然后在viewController中使用它：

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

（这会将文本和图标对齐到中心，如果要使文本居中并且图标在左侧，只需添加一个UIView宽度等于图标宽度的空白）