隐藏导航栏会导致其下方和上方的空间

Posted 2023-02-24

【中文标题】隐藏导航栏会导致其下方和上方的空间

【英文标题】：Hiding Navigation Bar Causes Space Under It and Above View

【发布时间】：2018-03-22 00:37:43

【问题描述】：

问题

导航栏在滚动时会显示动画 (hidesBarsOnSwipe)。如果页面上有一个带有部分标题的表格，部分标题将贴在视图顶部并在用户滚动时跟随用户。当这两者一起使用时，当导航栏隐藏时，节标题和导航栏之间存在间隙，显示背景表格单元格。我希望部分标题跟随导航栏，因为它没有间隙地隐藏。

对于我的问题，使用节标题并不是绝对必要的。我只是想要一个贴在屏幕顶部并在用户滚动时跟随用户的栏。

我已经尝试了下面发布的示例的替代方法，它使用UITableViewController。调整插图会导致部分标题滑到状态栏下方。使用包含静态 UIView（用于节标题）和 UITableView 的 UIViewController 会导致同样的问题。

这个问题的合适解决方案是什么？

示例

状态栏的背景是灰色的，节标题的背景是红色的，以更好地突出导航栏和节标题之间的差距。随着表格慢慢向下滚动，从缝隙中窥视的黄色表格单元格变得明显。隐藏导航栏后，部分标题按预期在状态栏上重置。

用于上述动画的视图控制器：

class TableViewController: UITableViewController 

    override func viewDidLoad() 
        super.viewDidLoad()

        // Color status bar background.
        let statusBar: UIView = UIApplication.shared.value(forKey: "statusBar") as! UIView
        if statusBar.responds(to: #selector(setter: UIView.backgroundColor)) 
            statusBar.backgroundColor = .lightGray
        
        UIApplication.shared.statusBarStyle = .default
    

    override func numberOfSections(in tableView: UITableView) -> Int 
        return 1
    

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int 
        return 20
    

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 
        return tableView.dequeueReusableCell(withIdentifier: "reuseIdentifier", for: indexPath)
    

    override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? 
        let view = UIView()
        view.backgroundColor = .red
        return view
    

更新 1

从状态栏中删除背景颜色并不能解决我看到的问题。下面的 GIF 显示了状态栏处于原始透明状态时的行为。

TLYShyNavBar 有一个我想要实现的行为的 GIF（在下面添加）。这个项目没有维护，如果没有额外的操作就无法工作，但是有一个很好的例子来说明我期望的行为是什么样的。

更新 2

我知道这种行为不是错误/问题，而是 Apple 更喜欢它。为视图的背景着色是一个选项（参见下面的answer）。对于这种情况，有两种方法可以解决：

为背景着色以匹配导航栏并移除导航栏的阴影以使视图无缝。

self.navigationController?.navigationBar.shadowImage = UIImage() self.navigationController?.navigationBar.isTranslucent = false

为背景着色以匹配红色条。

不幸的是，这种方法掩盖了间隙而不是消除它。它使其中一个条在动画期间出现变形，直到它们在两种情况下都完成过渡。

【问题讨论】：

@matt 删除状态栏的背景颜色并不能解决问题。我在更新中为我的问题添加了更多详细信息。

【参考方案1】：

问题是当有状态栏时，表格视图在全屏时不能很好地工作，因为单元格出现在状态栏后面，但部分标题却没有。所以不要那样做。

要使用表格视图控制器在没有导航栏但显示状态栏的情况下工作，请将表格视图控制器配置为嵌入式（自定义子）视图控制器，以便您负责表格视图的位置。将表格视图顶部固定到安全区域顶部。

这给出了你所追求的配置：

状态栏一目了然，后面可见父视图控制器的视图。表格视图本身，连同其部分标题和单元格，停在状态栏的底部；单元格不会出现在状态栏后面。因此，我们不会在您的插图中看到不匹配的情况。

这是一个 gif，显示结果是连贯的：

我为导航栏和主视图设置了不同的颜色，以便您可以区分它们，但想象它们是完全相同的颜色 - 那么这将是完全一致的。

【讨论】：

但是，请注意，在您展示的 TLYShyNavBar 截屏视频中，我不相信上面的内容是节标题；也许它是另一个视图，在表格视图之上。

我确实认为这可能是某人的解决方案，但并不是我所希望的，因为它会倾斜导航栏或栏下的视图。是的，ShyNavBar 库使用UIView，这是我可以接受的替代方案。

我在实现它以使导航栏在隐藏后返回时遇到了麻烦，但只有当表格视图绑定到安全区域而不是超级视图时。这个问题似乎已经被问过here 和here。

您要删除您的问题吗？我没关系。