自动布局和“推送时隐藏底部栏”

43

我的应用程序(简化版)的结构如下:

UITabBarController 包含一个 UINavigationController,其中根视图控制器是一个 UITableViewController

在点击表格视图控制器的单元格时,我会推出一个常规的 UIViewController (我们称之为 VC) 并隐藏底部的选项卡栏。(使用“推送时隐藏底部栏”标志)

在故事板中,我向 VC 添加了一个常规的 UIView 子类,看起来像是底部的栏,并使用自动布局将其固定在 VC 视图的底部。

问题
当我推出 VC 时,它需要一秒钟才能将这个视图固定在底部。看起来,自动布局将其固定在底部,就好像选项卡栏没有被隐藏,然后在一秒钟后它才意识到选项卡栏已经被隐藏并将其移动到视图的真正底部。

我知道这不是最好的解释,所以我添加了一个非常简单的项目来演示这个问题。


我认为你没有按照预期使用hidesBottomBarWhenPushed属性(请查看文档中的该方法)。它应该用于隐藏导航控制器可以呈现的工具栏,而不是选项卡栏。 - rdelmar
1
嗨@rdelmar,当推送时隐藏选项卡栏的正确方法是什么?我相信这应该是一件非常普遍的事情。 - Eyal
10个回答

64
问题在于特定约束条件是视图和底部布局指南之间的约束。

enter image description here

选择该约束并编辑其“第二项”属性

enter image description here

在这里,您需要选择底部

enter image description here

一旦你完成了这个步骤,粉色视图将不再受到布局指南的影响。仅当推送的视图控制器的根视图位于主屏幕的边界内,并且这仅在动画完成后发生时,布局指南才似乎承认选项卡栏被隐藏。

这就是为什么需要重新布置视图层次结构,从而导致不必要的动画效果。


1
当自动布局无法工作时 https://dev59.com/GInca4cB1Zd3GeqP7jJx#30283470 - DogCoffee
3
@AnthonyM 我也遇到了那个问题。最后我手动编辑了Storyboard的源代码,这样我就可以将约束的项目更改为使用底部布局指南.bottom。 - Greg
12
@AnthonyM,在Xcode 7中有点难找,但是它在那里:https://dev59.com/Rl4b5IYBdhLWcg3whB-V#33432500 - Johannes Rudolph
1
只是想知道您是如何手动编辑Storyboard源代码的,以便更改约束项以使用底部布局指南。我已经卡在这里有一段时间了,不明白为什么我不能再在Storyboard中直接选择底部了? - alionthego

32

对于我来说,被接受的答案不起作用(选项不可用)。 不过,我已经找到了另一个解决方案。(基于通过Autolayout推送时隐藏底部栏

选择要对齐的视图和对象(在我的情况下是btnShare),然后添加新的对齐约束(底部边缘)。

输入图片描述 输入图片描述


这对我没有起作用,当我推出视图控制器时仍然会显示1秒钟的空白。 - Peterdk
超级...非常有用 - Sudhakar Tharigoppula

14

你好,在故事板中选择选项卡栏(是选项卡栏控制器场景 > 选项卡栏控制器 > 选项卡栏),在属性检查器中取消勾选“半透明”框即可解决该问题。(但有很多内容,“推送时隐藏底部栏”适用于工具栏)。


但是现在当我推送VC时,选项卡栏是可见的,我需要它被隐藏。 - Eyal
至少在你分享的示例项目(AutoLayoutTest)中,如果你只取消选中标签栏中的半透明属性,当你推出时标签栏会消失,紫色视图会出现在它的位置。(测试你自己的项目) - Onik IV
对我来说运行良好,但我仍在寻找它可能引起的任何未来错误。 - Ashkan Ghodrat

6
选择“导航控制器”,在“属性检查器”中取消“在底部工具条下方”选项的勾选。

6
如果您无法在Xcode 7+中选择底部布局指南,请按照以下步骤操作: 在源代码编辑器中打开您的Storyboard。
搜索您的控制器标识符。
找到“”,键入“”,复制其ID。
按ID进行搜索,将属性从top更改为bottom。

查找和替换 享受。


3
在故事板中,转到您想要隐藏选项卡栏的视图控制器,单击属性检查器,然后选择推送时隐藏底部栏。请参见下面的图像。

storyboard example


1
是的,这是正确的答案。在视图控制器上设置“推送时隐藏底部栏”,这样就不会显示选项卡栏。不要在选项卡栏控制器、导航控制器或您的控制器的父视图控制器上设置它。 - thetrutz

2

如果您想隐藏选项卡栏,可以在控制器中添加以下代码:

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    self.tabBarController.tabBar.hidden = YES;
}

您还需要将该代码(但传递NO)放入要显示选项卡栏的控制器中。您还应该取消IB中的“推送时隐藏底部栏”框。

编辑后:

如果在第一个控制器中,您将非隐藏选项卡栏的alpha值从0到1动画化,效果会更好,并且时间很短。这在使用返回按钮时看起来很好。如果您想使用向后滑动功能,则需要进行更复杂的操作,涉及interactivePopGestureRecognizer。

-(void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    self.tabBarController.tabBar.hidden = NO;
    self.tabBarController.tabBar.alpha = 0.0;
    [UIView animateWithDuration:.4 animations:^{
        self.tabBarController.tabBar.alpha = 1.0;
    }];
}

这个解决方案的问题在于你会看到选项卡栏的消失/出现,特别是在使用向后滑动手势时。 - Eyal
@Eyal,我修改了我的答案以展示改善动画的方法。 - rdelmar
我不太喜欢这种解决方案,在viewWillAppear/viewWillDisappear中隐藏/显示选项卡栏有点冒险。似乎“隐藏底部栏”在没有自动布局的情况下运行良好,所以我想知道是否与自动布局配置有关。 - Eyal
@Eyal,Onik IV的解决方案有什么问题吗?当我取消选中选项卡栏的半透明属性时(并且在推送时隐藏底部栏仍然被选中),我也看不到选项卡栏。 - rdelmar

1
-(void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    self.tabBarController.tabBar.hidden = NO;
    self.tabBarController.tabBar.alpha = 0.0;
    [UIView animateWithDuration:.3 animations:^{
        self.tabBarController.tabBar.alpha = 5.0;
    }];
}

1

将UINavigationBar设置为不透明。

如下所示:self.navigationController.navigationBar.translucent = NO;


0
尝试将您的视图底部固定在父视图的底部,而不是底部布局。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接