ios 标题为 UIImage 的导航栏

Navigation bar with UIImage for title

提问by Darx

I want to customize my app's look by using a logo image as the navigation bar's title, instead of plain text. When I use this code

我想通过使用徽标图像作为导航栏的标题而不是纯文本来自定义我的应用程序的外观。当我使用此代码时

let logo = UIImage(named: "logo.png")
self.navigationItem.titleView = logo;

I get the error "UIImage is not convertible to UIView". How can I do this correctly?

我收到错误“UIImage 无法转换为 UIView”。我怎样才能正确地做到这一点？

回答by Hyman

Put it inside an UIImageView

把它放在一个 UIImageView

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

回答by Fernando S. Kroes

I use this. It works in iOS 8

我用这个。它适用于 iOS 8

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    let image = UIImage(named: "YOURIMAGE")
    navigationItem.titleView = UIImageView(image: image)
}

And here is an example how you can do it with CGRect.

这是一个如何使用 CGRect 实现的示例。

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 38, height: 38))
    imageView.contentMode = .ScaleAspectFit
    let image = UIImage(named: "YOURIMAGE")
    imageView.image = image
    navigationItem.titleView = imageView
}

Hope this will help.

希望这会有所帮助。

回答by vp2698

For swift 4 and you can adjust imageView size

对于 swift 4，您可以调整 imageView 大小

 let logoContainer = UIView(frame: CGRect(x: 0, y: 0, width: 270, height: 30))

 let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 270, height: 30))
 imageView.contentMode = .scaleAspectFit
 let image = UIImage(named: "your_image")
 imageView.image = image
 logoContainer.addSubview(imageView)
 navigationItem.titleView = logoContainer

回答by Cons Bulaquena

I tried @Hyman's answer above, the logo did appear however the image occupied the whole Navigation Bar. I wanted it to fit.

我尝试了上面@Hyman 的回答，确实出现了徽标，但是图像占据了整个导航栏。我想让它合身。

Swift 4, Xcode 9.2

斯威夫特 4，Xcode 9.2

1.Assign value to navigation controller, UIImage. Adjust size by dividing frame and Image size.

1.赋值给导航控制器，UIImage。通过分割帧和图像大小来调整大小。

func addNavBarImage() {

        let navController = navigationController!

        let image = UIImage(named: "logo-signIn6.png") //Your logo url here
        let imageView = UIImageView(image: image)

        let bannerWidth = navController.navigationBar.frame.size.width
        let bannerHeight = navController.navigationBar.frame.size.height

        let bannerX = bannerWidth / 2 - (image?.size.width)! / 2
        let bannerY = bannerHeight / 2 - (image?.size.height)! / 2

        imageView.frame = CGRect(x: bannerX, y: bannerY, width: bannerWidth, height: bannerHeight)
        imageView.contentMode = .scaleAspectFit

        navigationItem.titleView = imageView
    }

1. Add the function right under viewDidLoad()

       addNavBarImage() 
   

2. 在下面添加功能 viewDidLoad()

       addNavBarImage() 
   

Note on the image asset. Before uploading, I adjusted the logo with extra margins rather than cropped at the edges.

注意图像资产。在上传之前，我用额外的边距调整了徽标，而不是在边缘裁剪。

Final result:

最后结果：

回答by Photon Point

You can use custom UINavigationItem so, you only need to change "Navigation Item" as YourCustomClass on the Main.storyboard.

您可以使用自定义 UINavigationItem，因此您只需要将 Main.storyboard 上的“Navigation Item”更改为 YourCustomClass。

In Swift 3

在斯威夫特 3

class FixedImageNavigationItem: UINavigationItem {

private let fixedImage : UIImage = UIImage(named: "your-header-logo.png")!
private let imageView : UIImageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 50, height: 37.5))

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    imageView.contentMode = .scaleAspectFit
    imageView.image = fixedImage
    self.titleView = imageView

}

}

回答by Gagandeep Gambhir

Here is a handy function for Swift 4.2, shows an image with title text:-

这是 Swift 4.2 的一个方便的函数，显示带有标题文本的图像：-

override func viewDidLoad() {

    super.viewDidLoad()

    //Sets the navigation title with text and image
    self.navigationItem.titleView = navTitleWithImageAndText(titleText: "Dean Stanley", imageName: "online")
}

func navTitleWithImageAndText(titleText: String, imageName: String) -> UIView {

    // Creates a new UIView
    let titleView = UIView()

    // Creates a new text label
    let label = UILabel()
    label.text = titleText
    label.sizeToFit()
    label.center = titleView.center
    label.textAlignment = NSTextAlignment.center

    // Creates the image view
    let image = UIImageView()
    image.image = UIImage(named: imageName)

    // Maintains the image's aspect ratio:
    let imageAspect = image.image!.size.width / image.image!.size.height

    // Sets the image frame so that it's immediately before the text:
    let imageX = label.frame.origin.x - label.frame.size.height * imageAspect
    let imageY = label.frame.origin.y

    let imageWidth = label.frame.size.height * imageAspect
    let imageHeight = label.frame.size.height

    image.frame = CGRect(x: imageX, y: imageY, width: imageWidth, height: imageHeight)

    image.contentMode = UIView.ContentMode.scaleAspectFit

    // Adds both the label and image view to the titleView
    titleView.addSubview(label)
    titleView.addSubview(image)

    // Sets the titleView frame to fit within the UINavigation Title
    titleView.sizeToFit()

    return titleView

}

回答by Ronaldoh1

this worked for me in Sept 2015 - Hope this helps someone out there.

这在 2015 年 9 月对我有用 - 希望这可以帮助那里的人。

// 1
    var nav = self.navigationController?.navigationBar
    // 2 set the style 
    nav?.barStyle = UIBarStyle.Black
    nav?.tintColor = UIColor.yellowColor()
    // 3
    let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 40, height: 40))
    imageView.contentMode = .ScaleAspectFit
    // 4
    let image = UIImage(named: "logo.png")
    imageView.image = image
    // 5
    navigationItem.titleView = imageView

回答by danfordham

If you'd prefer to use autolayout, and want a permanent fixed image in the navigation bar, that doesn't animate in with each screen, this solution works well:

如果您更喜欢使用自动布局，并希望在导航栏中有一个永久固定的图像，并且不会在每个屏幕上都显示动画，则此解决方案效果很好：

class CustomTitleNavigationController: UINavigationController {

override func viewDidLoad() {
    super.viewDidLoad()

    let logo = UIImage(named: "MyHeaderImage")

    let imageView = UIImageView(image:logo)
    imageView.contentMode = .scaleAspectFit
    imageView.translatesAutoresizingMaskIntoConstraints = false

    navigationBar.addSubview(imageView)

    navigationBar.addConstraint (navigationBar.leftAnchor.constraint(equalTo: imageView.leftAnchor, constant: 0))
    navigationBar.addConstraint (navigationBar.rightAnchor.constraint(equalTo: imageView.rightAnchor, constant: 0))
    navigationBar.addConstraint (navigationBar.topAnchor.constraint(equalTo: imageView.topAnchor, constant: 0))
    navigationBar.addConstraint (navigationBar.bottomAnchor.constraint(equalTo: imageView.bottomAnchor, constant: 0))
}

回答by Narine Balasanyan

I have written this for iOS 10 & iOS 11 and it worked for me:

我已经为 iOS 10 和 iOS 11 编写了这个，它对我有用：

extension UINavigationBar {
    func setupNavigationBar() {
        let titleImageWidth = frame.size.width * 0.32
        let titleImageHeight = frame.size.height * 0.64
        var navigationBarIconimageView = UIImageView()
        if #available(iOS 11.0, *) {
            navigationBarIconimageView.widthAnchor.constraint(equalToConstant: titleImageWidth).isActive = true
            navigationBarIconimageView.heightAnchor.constraint(equalToConstant: titleImageHeight).isActive = true
        } else {
            navigationBarIconimageView = UIImageView(frame: CGRect(x: 0, y: 0, width: titleImageWidth, height: titleImageHeight))
        }
        navigationBarIconimageView.contentMode = .scaleAspectFit
        navigationBarIconimageView.image = UIImage(named: "image")
        topItem?.titleView = navigationBarIconimageView
    }
}

回答by oscar castellon

Works for me in swift 4 (square image 40x40)

适用于我的 swift 4（方形图像 40x40）

let imageView = UIImageView()
imageView.frame.size.width = 40
imageView.frame.size.height = 40
imageView.contentMode = .scaleAspectFit
let image = UIImage(named: "YOUR_IMAGE_NAME")
imageView.image = image
navigationItem.titleView = imageView

If you want other measures, try

如果您想要其他措施，请尝试

let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 50, height: 100.5)))
imageView.contentMode = .scaleAspectFit
let image = UIImage(named: "YOUR_IMAGE_NAME")
imageView.image = image
navigationItem.titleView = imageView

I hope it serves you. It works for me.

我希望它为你服务。这个对我有用。