具有奇怪外观的setBackButtonBackgroundImage

Question

在AppDelegate.m中使用它来为我的自定义NavBar:

UIImage *NavigationPortraitBackground = [[UIImage imageNamed:@"gradient_main"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
[[UINavigationBar appearance] setBackgroundImage:NavigationPortraitBackground forBarMetrics:UIBarMetricsDefault];
UIImage *barBackBtnImg = [[UIImage imageNamed:@"btn_nav_default.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:barBackBtnImg forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

结果是:

如你所见,按钮似乎重复了.按钮尺寸为61x30.文本没有居中.如果文本较短(例如菜单),则按钮图像被剪切,如果文本较长,则按钮重复.具有较小图标(30x30)的按钮也存在类似问题.按钮显示正常,但我可以点击图像外的按钮:(

Answer 1

问题的根源在于您提供了一个没有UIEdgeInsets的可调整大小的图像,并且未指定调整大小样式.UIBarButtonItem上的文本实际上是居中的!如果你测量文本两边的距离,你会发现它是一样的.

如果您查看为UIBarButtonItem提供的图像:

[[UIImage imageNamed:@"btn_nav_default.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];

你告诉iOS @"btn_nav_default.png"是一个可调整大小的图像,它应该平铺.它基本上是复制您的图像并将它们并排放置,直到覆盖整个宽度.如果你看看UIImage的文档,你会发现resizableImageWithCapInsets的默认行为是tile.您需要调用resizableImageWithCapInsets:resizingMode:并传入UIImageResizingModeStretch调整大小模式.

话虽这么说,这还不够.之后你会看到整个图像被拉伸,完全摧毁你漂亮的圆角.您需要提供UIEdgeInsets,告诉UIImage"您无法延伸此部分".在这种情况下,提供UIEdgeInsets的UIEdgeInsetsMake(0.0f, 10.0f, 0.0f, 10.0f)(或类似的东西)会工作.

如果您对长篇解释不感兴趣,请复制粘贴此代码(不保证这会编译...):

[[UIImage imageNamed:@"btn_nav_default.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0.0f, 10.0f, 0.0f, 10.0f) resizingMode:UIImageResizingModeStretch];