【问题标题】:Translucent Status Bar with No Navigation Bar没有导航栏的半透明状态栏
【发布时间】:2017-08-28 16:55:29
【问题描述】:

目标:让表格视图滚动,使其在状态栏下显示为半透明,而不显示导航栏。

现在,我将 tableView 设置为顶部锚点(从技术上讲,在状态栏下方)。当您在表格视图上向上滚动时,这会将状态栏设置为纯色。我已将 navigationAppearance 的 barTintColor 和 translucent 设置为 YES,但没有成功。

有什么想法吗?视图在情节提要中实例化

【问题讨论】:

  • 我不明白你的意思。也许附上一张你目前拥有的照片?
  • 我将以 Apple Music 为例。如果您在“库”选项卡上向上滚动,您可以在状态栏下方不透明地看到“库”文本。我想做的正是@DanielLegler
  • 你能用screenshot 更新你的问题或者你尝试过的一些代码吗?

标签: swift uinavigationbar


【解决方案1】:

如果没有code,您的问题很难猜到。我相信您会尝试在 Apple Music 应用中提到的 tableview 内容滚动时实现半透明状态栏。

在您的 viewdidLoad 方法中尝试以下代码。

第 1 步:隐藏navigation bar。如果您的controller 嵌入了navigationController。

navigationController?.navigationBar.isHidden = true

第 2 步:在控制器上放置一个大小为 UIView 的状态栏,作为半透明状态栏,并调整 alpha 的值。

 let statusBarView = UIView(frame: CGRect(x:0, y:0, width:view.frame.size.width, height: UIApplication.shared.statusBarFrame.height))
 statusBarView.backgroundColor=UIColor.white 
 statusBarView.alpha = 0.8 // set any value between 0 to 1
 view.addSubview(statusBarView)

以上代码将产生以下输出。让我知道该代码适合您。

有关如何设置tableView frame 和contentView 的更多信息,请查看我在以下link 中的回答。


更新:

改进的答案:

你可以使用UIBlurEffectView来获得更好的半透明效果。

    let statusBarView = UIView(frame: CGRect(x:0, y:0, width:view.frame.size.width, height: UIApplication.shared.statusBarFrame.height))
    let blurEffect = UIBlurEffect(style: .extraLight) // Set any style you want(.light or .dark) to achieve different effect.
    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    blurEffectView.frame = statusBarView.bounds
    blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    statusBarView.addSubview(blurEffectView)
    view.addSubview(statusBarView)

输出:

【讨论】:

    【解决方案2】:

    如您所述,您的UITableView 位于状态栏下方。当您向下滚动时,tableView 的框架保持相同的大小和原点,并且不会进入状态栏下方。您要做的是将tableView 的约束设置为超级视图的顶部(不是顶部布局指南),这意味着它将位于状态栏的正下方。

    因为状态栏现在隐藏了您的tableView 的顶部 20px,所以您要进行内容偏移:

    tableView.contentInset = UIEdgeInsetsMake(top: 20, left: 0, bottom: 0, right: 0)
    

    要使滚动指示器在状态栏下方开始,您还需要为其设置偏移量:

    tableView.scrollIndicatorInsets = UIEdgeInsets(top: 20, left: 0, bottom: 0, right: 0)
    

    【讨论】:

    • 感谢您的回复!这是有道理的,但是,当我这样做时,我看到 UITableView 的内容与状态栏重叠。滚动指示器也不会停在状态栏上,但也会重叠。任何想法为什么可能是@Codey?
    • 我不确定你所说的重叠是什么意思。因为您设置了contentInset 单元格应该都有一点偏移,所以当您滚动到tableView 的顶部时,您不应该有任何重叠。我编辑了关于滚动指示器的答案。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-07-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多