ios 如何将图像放在 UIViewController 的导航栏的中心？

How to put an image in the center of navigationBar of a UIViewController?

提问by sensorario

I have this snippet of code used in viewDidLoad of a UIViewController. I'va no errors. Images exists. I get the background but not the image. Image is a sort of logo.

我在 UIViewController 的 viewDidLoad 中使用了这段代码。我没有错误。图像存在。我得到了背景，但没有得到图像。图像是一种标志。

if ([self.navigationController.navigationBar respondsToSelector:@selector(setBackgroundImage:forBarMetrics:)] ) {

    /* Background of navigationBar. */
    UIImage * navigationBarImage = [UIImage imageNamed:@"01_navbar_portrait.png"];
    [self.navigationController.navigationBar setBackgroundImage:navigationBarImage forBarMetrics:UIBarMetricsDefault];

    /* Image in navigationBar */
    UIImage * logoInNavigationBar = [UIImage imageNamed:@"01_logo.png"];
    UIImageView * logoView = [[UIImageView alloc] init];
    [logoView setImage:logoInNavigationBar];
    self.navigationController.navigationItem.titleView = logoView;

}

回答by jhabbott

The UINavigationControllermanages the navigation bar by looking at the navigationItemproperty of the top-most view controller on the navigation stack. So to change the view to a logo, you need to set this up in the view controller that uses the logo (i.e. the root view controller or another one that gets pushed on the stack).

该UINavigationController管理通过查看导航栏navigationItem导航堆栈上的最顶层视图控制器的性能。因此，要将视图更改为徽标，您需要在使用徽标的视图控制器中进行设置（即根视图控制器或另一个被推入堆栈的视图控制器）。

Do something like this in viewDidLoadof your view controller:

在viewDidLoad你的视图控制器中做这样的事情：

UIImage* logoImage = [UIImage imageNamed:@"logo.png"];
self.navigationItem.titleView = [[UIImageView alloc] initWithImage:logoImage];

In your case, you are setting the wrong navigation item:

在您的情况下，您设置了错误的导航项：

// Oops...
self.navigationController.navigationItem.titleView = logoView;
// Should be this:
self.navigationItem.titleView = logoView;

回答by AG29

First we have to create a view which have size as same as navigation bar then add an image view and set set its frame as it looks center in the navigation bar.It works for all ios version and it automatically takes frame size as per device (retina or normal) and works like magic.

首先，我们必须创建一个与导航栏大小相同的视图，然后添加一个图像视图并将其框架设置为在导航栏中看起来居中。它适用于所有 ios 版本，并根据设备自动采用框架大小（视网膜或正常）并且像魔术一样工作。

UIView *headerView = [[UIView alloc] init];
headerView.frame = CGRectMake(0, 0, 320, 44);

UIImageView *imgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Header.png"]];
imgView.frame = CGRectMake(75, 0, 150, 44);
imgView.contentMode = UIViewContentModeScaleAspectFit;

[headerView addSubview:imgView];

navigationCtrl.navigationBar.topItem.titleView = headerView;

[headerView release];
[imgView release];

回答by Esqarrouth

Swift:

迅速：

var logoImage:UIImage = UIImage(named: "logo_text")!
self.navigationItem.titleView = UIImageView(image: logoImage)

回答by Andrew

extension UINavigationController {
func addLogoImage(image: UIImage, navItem: UINavigationItem) {
    let imageView = UIImageView(image: image)
    imageView.contentMode = .scaleAspectFit
    imageView.translatesAutoresizingMaskIntoConstraints = false

    let view = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 44))
    view.addSubview(imageView)

    navItem.titleView = view
    imageView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    imageView.heightAnchor.constraint(equalTo: view.heightAnchor).isActive = true
    imageView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true

    view.heightAnchor.constraint(equalTo: navigationBar.heightAnchor).isActive = true
    view.centerXAnchor.constraint(equalTo: navigationBar.centerXAnchor).isActive = true
    view.centerYAnchor.constraint(equalTo: navigationBar.centerYAnchor).isActive = true
}
}

Here's what I'm using.

这是我正在使用的。

Of course, you might need a bit more constraints, so as to not clash with the right and left bar button items.

当然，您可能需要更多约束，以免与左右栏按钮项发生冲突。

回答by beOn

Perhaps not what you meant, but I ran into this page looking for a way to provide a centered background imagefor the navigation bar, so in case you're here for that... here's one way.

也许不是你的意思，但我跑到这个页面寻找一种为导航栏提供居中背景图像的方法，所以如果你在这里......这是一种方法。

Stealing a little bit from another answer, you can break your image into foreground and background, then build a new image that stretches the background and centers the foreground, and then set that as your nav bar's background image. Building the image works like so:

从另一个答案中窃取一点，您可以将图像分解为前景和背景，然后构建一个拉伸背景并使前景居中的新图像，然后将其设置为导航栏的背景图像。构建图像的工作方式如下：

// build an image by stretching the bg, then merging it with the fg
CGSize barSize = self.navController.navigationBar.frame.size;
UIImage *fg = [UIImage imageNamed:@"some_fg"];
UIImage *bg = [[UIImage imageNamed:@"some_bg"]
               resizableImageWithCapInsets:UIEdgeInsetsMake(0.f,1.f,0.f,1.f)];
UIGraphicsBeginImageContextWithOptions(barSize, NO, 0.0);
[bg drawInRect:CGRectMake(0, 0, barSize.width, barSize.height)];
[fg drawInRect:CGRectMake((barSize.width-fg.size.width)/2.f,
                          0,
                          fg.size.width,
                          fg.size.height)];
// grab the merged images
UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

回答by manujmv

You just specify it's frame by

你只需指定它的框架

logoView.frame = CGRectMake(initialize frame here);

Then use the following

然后使用以下

[self.navigationItem setTitleView:logoView];

回答by Steve B

func centeredNavBarImage (){
    let navcontroller = navigationController!
    let image = #imageLiteral(resourceName: "yourImage")
    let imageView = UIImageView(image:image)

    let bannerWidth = navcontroller.navigationItem.accessibilityFrame.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

}

This is a modified code from https://youtu.be/bLkuu_fmlsU

这是来自https://youtu.be/bLkuu_fmlsU的修改代码

The bannerWidth takes into account a refresh button item I have on the right side of the navbar. Seems to work.

bannerWidth 考虑了我在导航栏右侧的刷新按钮项目。似乎工作。

Run the function on ViewDidLoad

在 ViewDidLoad 上运行该函数