如何将图像放在UIViewController的navigationBar的中心？

Question

我有一段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;

}

Answer 1

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

在视图控制器的viewDidLoad中执行以下操作：

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

根据您的情况，您设置了错误的导航项目：

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

Answer 2

首先，我们必须创建一个与导航栏大小相同的视图然后添加图像视图并设置其框架为中心在导航栏中。它适用于所有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];

Answer 3

Swift：

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

Answer 4

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

这是我正在使用的。

当然，您可能需要更多的约束，以便不与左右栏按钮项冲突。

Answer 5

也许不是您的意思，但是我碰到了这个页面，寻找一种为导航栏提供居中的背景图像的方法，因此，如果您在这里……那是一种方法。 >

从another answer隐蔽一点，您可以将图像分为前景和背景，然后构建一个新图像以拉伸背景并使前景居中，然后将其设置为导航栏的背景图像。构建图像的方式如下：

// 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();

Answer 6

您只需指定它的边框

Answer 7

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

}

Answer 8

可以像这样通过编程方式完成。