如何设计自定义导航栏

Posted

技术标签:

【中文标题】如何设计自定义导航栏【英文标题】:How to design custom navigation bar 【发布时间】:2014-02-25 07:44:23 【问题描述】:

我已经搜索了很多关于如何设计图片中给出的导航。

我已经为UINavigationBar 创建了类别,如以下解决方案中给出的 Custom nav bar styling - ios

可以使用以下代码增加NavigationBar 的大小。

CGFloat navBarHeight = 84.0f;
CGRect frame = CGRectMake(0.0f, 0.0f, 320.0f, navBarHeight);
[self.navigationController.navigationBar setFrame:frame];

但是像(左键、右键、标题)这样的所有内容都会移到栏的底部。

当像下面这样将段控件附加到titleView时

self.navigationItem.titleView = self.segmentedControl;  

所有视图(左键、标题、右键)作为衬垫。

我想要导航栏底部的segment control,如图所示。

【问题讨论】:

您希望在整个应用程序中保持相同吗? 嗨@Aman,我想要一个viewController。 然后将其简单地添加到您的 viewController 【参考方案1】:

@Shankar Shinde 为什么要将分段控制器添加为导航标题视图,您可以使用情节提要在导航栏下方添加:查看下面的屏幕截图

我认为您需要使用以下代码隐藏导航栏并创建类似于附加屏幕截图的视图让我知道它对您有帮助吗?

 [self.navigationController.navigationBar setHidden:YES];

【讨论】:

这是我们的产品设计决定。我做的和你发的一样。如果你有任何想法请帮忙。 我已经通过编码完成了。在视图中添加了所有子视图(左、右和段控制)。该视图作为 viewController 的一部分,例如 [self.view addSubview:...] 编码愉快..:)【参考方案2】:

请查看示例:

https://github.com/boctor/idev-recipes/tree/master/WoodUINavigation

它可以帮助你:)

【讨论】:

嘿 Gaurav,谢谢你的参考,这不是我想要的 :(【参考方案3】:

您可以使用为 navigationItem 提供的 Prompt 首先提示您的navigationItem

self.navigationItem.prompt = @"";

创建一个segmentcontroll

UISegmentedControl *segmentedControl = [[UISegmentedControl alloc] initWithItems:itemArray];
segmentedControl.frame = CGRectMake(35, 200, 250, 50);
segmentedControl.segmentedControlStyle = UISegmentedControlStylePlain;
segmentedControl.selectedSegmentIndex = 1;
[self.navigationController.navigationBar addSubview:segmentedControl];

【讨论】:

以上是关于如何设计自定义导航栏的主要内容,如果未能解决你的问题,请参考以下文章

Flutter导航栏自定义效果

iOS NavigationBar 导航栏自定义

iOS 11导航栏自定义后退按钮问题

无法执行单击导航栏自定义按钮

ecshop按自定义导航栏上面的标签最下面的一排文章标签不居中 偏左

iOS系统导航栏自定义标题动画跳变解析