首页 文章

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

提问于
浏览
1

问题

导航栏会在滚动时隐藏动画(hidesBarsOnSwipe) . 如果页面上有一个带有节 Headers 的表格,则节 Headers 将粘贴在视图的顶部,并在用户滚动时跟随用户 . 将这两者结合使用时,导航栏隐藏时,节 Headers 和导航栏之间会有间隙,显示背景表格单元格 . 我希望节 Headers 跟随导航栏,因为它隐藏没有间隙 .

对于我的问题,使用节 Headers 并不是绝对必要的 . 我只是喜欢一个粘在屏幕顶部的栏,并在滚动时跟随用户 .

我已经尝试了下面发布的示例的替代方法,它使用 UITableViewController . 调整插入会导致节 Headers 在状态栏下滑动 . 使用包含静态 UIView (对于节头)和 UITableViewUIViewController 导致相同的问题 .

对于这个问题,什么是合适的解决方案?

示例

状态栏的背景为灰色,节 Headers 的背景为红色,以更好地突出显示导航栏和节 Headers 之间的间隙 . 当 table 慢慢向下滚动时,穿过间隙的黄色 table 细胞变得明显 . 隐藏导航栏后,节 Headers 按预期重置在状态栏上 .

Scrolling down to hide navigation bar causes gap between section header and hiding navigation bar.

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

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显示状态栏处于其原始透明状态的行为 .

Scrolling down to hide navigation bar causes gap between section header and hiding navigation bar.

TLYShyNavBar有我想要实现的行为的GIF(在下面添加) . 这个项目没有维护,如果没有额外的操作就行不通,但有一个很好的例子,说明我希望行为看起来像什么 .

TLYShyNavBar stick header under hiding navigation bar

更新2

我理解这种行为不是错误/问题,而是苹果更喜欢它 . 着色View的背景是一个选项(见下面的answer) . 对于这种情况,有两种方法可以解决这个问题:

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

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

Navigation bar color used for status bar background.

  • 为背景着色以匹配红色条 .

Red bar color used for status bar background color.

不幸的是,这种方法掩盖了间隙而不是将其移除 . 它使得其中一个条形在动画期间看起来变形,直到它们在两种情况下都完成了它们的过渡 .

1 回答

  • 1

    问题是,当存在状态栏时,表格视图无法全屏显示,因为单元格位于状态栏后面,但节 Headers 不会 . 所以不要这样做 .

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

    这给出了你想要的配置:

    enter image description here

    状态栏是清除的,父视图控制器的视图在其后面可见 . 表视图本身及其节 Headers 和单元格停在状态栏的底部;细胞不会出现在状态栏后面 . 因此,我们不会在插图中看到不匹配 .

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

    enter image description here

    我对导航栏和主视图进行了不同的着色,以便您可以区分它们,但想象它们的颜色完全相同 - 那么这将是完全一致的 .

相关问题