Xcode 6 - Swift - 带导航的自定义标签栏

Xcode 6 - Swift - Custom Tabbar with Navigation

提问by Ryan Bobrowski

I'm trying to create a tabbed application with navigation elements inside the tab bar, as seen in the picture below (the red bar) using Swift/XCode 6.2. Basically those three icons in the middle will direct the user to different view controllers. The other two icons would be context-based. For example, on a table view page you would see the menu icon and add new icon as seen in the image. However, clicking on a row would change the menu icon to a back icon, and the add icon to something else.

我正在尝试使用 Swift/XCode 6.2 创建一个选项卡式应用程序，在选项卡栏中包含导航元素，如下图（红色栏）所示。基本上中间的这三个图标会将用户引导到不同的视图控制器。其他两个图标将基于上下文。例如，在表格视图页面上，您会看到菜单图标并添加新图标，如图所示。但是，单击一行会将菜单图标更改为后退图标，并将添加图标更改为其他图标。

That's the general idea, but I'm having a very hard time implementing something even close to this. The first issue is that whenever I embed a view in a Tab Bar Controller, I can't move the tab bar to the top. However, when I create a custom UITabView in a View Controller, Control + Click and dragging a Tab Bar Item to another view doesn't create a segue. I haven't even begun to tackle having the navigation elements inside the bar.

这是一般的想法，但我很难实现甚至接近于此的东西。第一个问题是，每当我在 Tab Bar Controller 中嵌入视图时，我都无法将 Tab Bar 移到顶部。但是，当我在视图控制器中创建自定义 UITabView 时，Control + 单击并将选项卡栏项拖动到另一个视图不会创建 segue。我什至还没有开始解决在栏内放置导航元素的问题。

I guess what I'm asking is just for a little guidance on what route to take to tackle this. I'm assuming I can't use a Tab Bar Controller or Navigation Controller because it doesn't seem like I can customize them all that much. So custom Tab Bar and Navigation Bars, and then implemnt the segues and button changes programmatically?

我想我要问的只是提供有关解决此问题的途径的一些指导。我假设我不能使用 Tab Bar Controller 或 Navigation Controller，因为我似乎无法对它们进行那么多自定义。那么自定义 Tab Bar 和 Navigation Bars，然后以编程方式实现 segues 和按钮更改？

Thanks.

谢谢。

回答by veducm

I will try to guide you from an architectural perspective (so you won't find much code below).

我将尝试从架构的角度为您提供指导（因此您不会在下面找到太多代码）。

Using a UITabBarController

使用 UITabBarController

In order to achieve what you are suggesting, you are right you cannot use a UITabBarControllerstraight away, among several reasons, the most immediate one is that they are meant to be always at the bottomand you want it in top (check Apple's docs). The good news is that probably you don't need it!

为了实现你的建议是什么，你是对的，你不能用一个UITabBarController直线距离，几个原因中，最直接的一个是，他们的意思是在底部总是和你想让它在顶部（检查苹果的文档）。好消息是，您可能不需要它！

Note:If you still want to go with a UITabBarControllerfor whatever reason, please see @Matt's answer.

注意：如果您UITabBarController出于任何原因仍想使用 a ，请参阅@Matt 的回答。

Using a UINavigationController

使用 UINavigationController

You can use a UINavigationControllerto solve this task, since the UINavigationBarof a UINavigationControllercan be customized. There are multiple ways on how you can organize your view's hierarchy to achieve what you propose, but let me elaborate one option:

您可以使用UINavigationController来解决这个任务，因为UINavigationBar一个UINavigationController可定制。有多种方法可以组织视图的层次结构以实现您的建议，但让我详细说明一个选项：

1. To customize a UINavigationBar's to add buttons, you just need to set its navigationItem's title view:

   // Assuming viewWithTopButtons is a view containing the 3 top buttons
   self.navigationItem.titleView = viewWithTopButtons
   

2. To add the burgermenu functionality on a UINavigationControlleryou can find severalpostson how to do it and infinite frameworks you can use. Check this other SO Questionfor a more detailed answer (e.g. MMDrawerController, ECSlidingViewControllerto mention a couple).

3. About organizing your view hierarchy, it really depends on if when the user taps one of the main top buttons, it will always go to the first view controller in the new section or if you want to bring him back to the last view in the section where he was.

   3.1 Switching sections displays the first view of the new section

   Your app's UIWindowwill have a single UINavigationControlleron top of the hierarchy. Then each of the 3 top buttons, when tapped, will change the root view controller of the UINavigationController.

   Then, when the user changes section, the current navigation hierarchy is discardedby setting the new section view controller as the UINavigationControllerroot view controller.

   self.navigationController = [sectionFirstViewController]
   

   3.2 Switching sections displays the last displayed view in the new section

   This will require a slightly modified version of the above, where your each of your sections will have its own UINavigationController, so you can always keep a navigation hierarchy per section.

   Then, when the user taps one of the top buttons to switch section, instead of changing as previously described, you will change the UIWindowroot view controller to the new section's UINavigationController.

   window.rootViewController = sectionNavigationController
   

1. 要自定义 aUINavigationBar以添加按钮，您只需设置其navigationItem标题视图：

   // Assuming viewWithTopButtons is a view containing the 3 top buttons
   self.navigationItem.titleView = viewWithTopButtons
   

2. 要添加的汉堡上的菜单功能，UINavigationController你可以找到几个职位上如何做到这一点，你可以使用无限的框架。检查this other SO Question以获得更详细的答案（例如MMDrawerController，ECSlidingViewController提及一对）。

3. 关于组织您的视图层次结构，这实际上取决于当用户点击一个主要顶部按钮时，它是否会始终转到新部分中的第一个视图控制器，或者您是否想将他带回该部分中的最后一个视图他在哪里。

   3.1 切换版块显示新版块的第一个视图

   您的应用程序UIWindow将UINavigationController在层次结构的顶部有一个。然后点击三个顶部按钮中的每一个，都会更改UINavigationController.

   然后，当用户更改部分时，通过将新的部分视图控制器设置为根视图控制器来丢弃当前的导航层次结构UINavigationController。

   self.navigationController = [sectionFirstViewController]
   

   3.2 切换版块在新版块中显示上次显示的视图

   这将需要对上述版本稍加修改，其中您的每个部分都有自己的UINavigationController，因此您可以始终保持每个部分的导航层次结构。

   然后，当用户点击顶部按钮之一来切换部分时，您将UIWindow根视图控制器更改为新部分的UINavigationController.

   window.rootViewController = sectionNavigationController
   

Using a custom implementation

使用自定义实现

Of course, the last and also very valid option would be that you implement yourself your own component to achieve your requirements. This is probably the option requiring the biggest effort in exchange of the highest customizability.

当然，最后一个也是非常有效的选择是您自己实现自己的组件来满足您的要求。这可能是需要最大努力以换取最高可定制性的选项。

Choosing this option is definitely not recommend to less experienced developers.

绝对不建议经验不足的开发人员选择此选项。

回答by Matthew Quiros

I'd like to take a stab at this--I think it is possible to use a tab bar controller here.

我想试一试——我认为可以在这里使用标签栏控制器。

• Your topmost-level view controller will be a UITabBarControllerwith a hidden UITabBar.
• Each tab is contained in a UINavigationController.
• All view controllers in the navigation controller will be a subclass of a view controller (say, SwitchableViewController).
• In SwitchableViewController's viewDidLoad, you set the navigation item's title view (i.e. whatever's at the center; self.navigationItem.titleView) to be the view that holds the three center buttons. Could be a UISegmentedControl, or a custom view.
• Whenever you tap on any of the buttons, you change the topmost UITabBarController's selected index to the view controller you want to show.

• 您的顶级视图控制器将是一个UITabBarController带有隐藏的UITabBar.
• 每个选项卡都包含在一个UINavigationController.
• 导航控制器中的所有视图控制器都将是视图控制器的子类（例如，SwitchableViewController）。
• 在SwitchableViewController's 中viewDidLoad，您将导航项的标题视图（即位于中心的任何内容；self.navigationItem.titleView）设置为包含三个中心按钮的视图。可以是UISegmentedControl，或自定义视图。
• 每当您点击任何按钮时，您都会将 topmostUITabBarController的选定索引更改为您想要显示的视图控制器。

Issues you may encounter:

您可能遇到的问题：

• Table views inside tabs will have a scrollIndicatorOffsetat the bottom even if the tab bar is hidden.
  • Solution: Play around with the automaticallyAdjustsScrollViewInsetsof the tab bar controller, or the inner view controller. https://stackoverflow.com/a/29264073/855680
• Your title view will be animated every time you push a new view controller in the navigation stack.
  • Solution: Take a look at creating a custom transition animation for the UINavigationController.

• scrollIndicatorOffset即使选项卡栏被隐藏，选项卡内的表视图也会在底部有一个。
  • 解决方案：使用automaticallyAdjustsScrollViewInsets标签栏控制器或内部视图控制器的 。https://stackoverflow.com/a/29264073/855680
• 每次在导航堆栈中推送新的视图控制器时，您的标题视图都会被动画化。
  • 解决方案：查看为 UINavigationController 创建自定义过渡动画。