iOS 自定义形状导航栏

Posted 2023-03-13

【中文标题】iOS 自定义形状导航栏

【英文标题】：iOS custom shape navigation bar

【发布时间】：2013-11-09 16:31:09

【问题描述】：

我想开发具有自定义导航栏的应用，如下图所示：

我认为我需要继承 UINavigationBar 并将按钮添加到导航栏的中心，但我真的不知道如何使导航栏看起来像图像上的那样。你能给我建议我应该怎么做吗，任何类型的文档的链接都很棒！

关于 navBar 的类似问题对我没有帮助：

ios back button in the bar Use custom Navigation Bar in iOS Custom Navigation Bar in iOS 5 rogcar

编辑：

接下来我的想法是：让自定义导航栏高度比默认大小略大，并添加带有箭头的背景图片，并在边缘添加一些透明度。

【参考方案1】：

如果您想要一个按钮（您可能确实想要），您可以通过继承UINavigationBar 来完全实现它。你应该记住UINavigationBar 中的height 是只读属性。

样式但不可点击：

假设我们将导航栏子类化并在那里添加按钮。你可以这样做，它会看起来很棒。例如：

- (void)drawRect:(CGRect)rect

    self.backgroundColor = [UIColor lightGrayColor];
    UIButton *myButton = [[UIButton alloc] initWithFrame:CGRectMake(self.frame.size.width/2-50, 0 , 100, 100)];
    [myButton setBackgroundColor:[UIColor lightGrayColor]];
    [myButton setTitle:@"Normal" forState:UIControlStateNormal];
    [myButton setTitle:@"Highlighted" forState:UIControlStateHighlighted];
    [self addSubview:myButton];
    [self sendSubviewToBack:myButton];

但是您将面临一个问题，即您的按钮在UINvaigationBar 下方不可粘贴。 （我在答案底部贴了一张图片）

所以显然没有你想要遵循的路径。甚至不要尝试。

样式但不可点击 2：

您可以在导航栏子类中覆盖此方法

- (CGSize) sizeThatFits:(CGSize)size  
  return CGSizeMake(custom_width, custom_height);

然后例如使用UIBezierPath 对其进行屏蔽

正确（可点击）方式：

您必须为您的UINavigationBar 创建一个视图棒。我将在这里做的（如果你希望它出现在每个屏幕上）是：

创建一个可以绘制的UIViewController 类别（例如 - 这是最简单的方法）UIButton。 为这个“UIButton”设置任何你想要的样式（如果你想要的话 将操作固定到“UIButton”：[btn addTarget:self action:@selector(menuShow:) forControlEvents:UIControlEventTouchUpInside]; menuShow: 方法应该在你的 category 中声明 您可以在每次想要重绘视图控制器时调用绘图按钮。

如您所见，会有两个单独的视图：UINavigationBar 和 UIButton。这允许您在这个小按钮下设置内容并使其可点击。

那么为什么不隐藏导航栏，而使用不同的视图呢？因为 iOS7 ;) 例如，当 Apple 在 iOS7 中更改它时，您必须重建您的伪 NavigationBar，只有额外的视图，您不需要做任何事情。

【讨论】：

谢谢，这正是我要找的！

这对我来说将是一个完美的解决方案，但我可以澄清一下吗？ “制作一个可以绘制（例如 - 这是最简单的方法）UIButton 的 UIViewController 类别。”这是否意味着 UIViewController 类别会覆盖 -drawRect 或类似的东西？并且是在您的 AppDelegate 中导入的类别，还是您将 UINavigationBar 子类化并将其导入那里？谢谢！

不-您不应该在类别中覆盖此方法（任何方法）-调试是一种恐怖:)这里的情况是类别包含 ecery 肌动蛋白需要在UIViewController 和 pin 上绘制一些东西瞄准那里。为什么？避免在 VC 之间复制和粘贴代码。

【参考方案2】：

您不需要继承 UINavigationBar。创建 UIView 添加 UIImageView 作为背景，并添加所需形状的图像，添加按钮。

子类 UINavigationController 隐藏 UINavigationBar，添加自定义导航栏。

【讨论】：

你不需要继承 UINavigationController。 “显示导航栏”有一个选项。

【参考方案3】：

首先使用隐藏导航栏 -

self.navigationController.navigationBarHidden = YES;

然后创建具有所需高度的 UIView，navigationBar 的高度为 44px。然后创建背景图像视图，所需 UIButton 的对象并将创建的 UIView 上的所有对象添加为子视图。它看起来像 navigationBar。谢谢。

【参考方案4】：

您可以将自定义形状的视图添加为导航栏上的 titleView。 只要确保 clipsToBounds 设置为 NO，它就不会被剪裁。