如何创建一个像 Apple Music 艺术家页面上那样的融合导航栏

Posted 2023-02-27

【中文标题】如何创建一个像 Apple Music 艺术家页面上那样的融合导航栏

【英文标题】：How to create a blent-in navigation bar like the one on Apple Music artist page

【发布时间】：2019-01-01 22:15:05

【问题描述】：

我正在尝试创建一个导航栏（屏幕截图中“热门歌曲”上方的所有内容），该导航栏看起来与 Apple Music 应用中的艺术家页面中使用的导航栏相似。在 iPhone X 上，封面照片应融入缺口区域（即安全区域之外）。我还希望能够将 UILabels 等 UI 元素添加到导航栏中。

截图： https://i2.wp.com/9to5mac.com/wp-content/uploads/sites/6/2018/06/apple-music-artist-update.jpg

到目前为止，我已经尝试过使用 UITableViewController。我将表格视图的内容插入参数设置为“从不”，这似乎可以完成这项工作。但是，当表格视图已经在顶部单元格时向下拖动时，会显示 UITableView 的背景。向下拖动表格时，第一个单元格的背景图片应该被拉伸，而不是随着单元格内容移动。

谢谢。

【问题讨论】：

*** 不是问将军“我该怎么做？”的地方。键入问题。它专门针对有关您的代码可能遇到的问题的问题。尝试实施解决方案，如果遇到问题，请显示您的代码和任何错误。请不要简单地问怎么做，这里不是地方

嘿 Magnas 我确实在我的问题中描述了 UITableViewController 的问题。我只是想弄清楚为什么在拉伸时顶部单元格中的内容不会随着表格视图拉伸。

这是我的观点，*** 是用于代码的。如果您有需要帮助的代码，请发布。没有像您这样的代码特定问题属于其他地方。

【参考方案1】：

想出了一个解决方案：

首先，打开故事板，将一个 UIView 拖到“原型单元格”的顶部。 然后，在视图控制器文件中定义如下全局变量：

var headerView: UIView!
var HEADER_HEIGHT: CGFloat = 400

要在滚动时更新标题视图（即拉伸），请在 scrollViewDidScroll 方法中调用以下函数：

func updateTableHeader() 

    var headerFrame = CGRect(x: 0, y: -HEADER_HEIGHT, width: tableView.bounds.width, height: HEADER_HEIGHT)
    if tableView.contentOffset.y < -HEADER_HEIGHT
    
        headerFrame.origin.y = tableView.contentOffset.y
        headerFrame.size.height = -tableView.contentOffset.y
    
    headerView.frame = headerFrame

另外，在viewDidLoad 中，headerView 应该使用以下方法进行配置：

func setupHeaderview()

    headerView = tableView.tableHeaderView
    tableView.tableHeaderView = nil
    tableView.addSubview(headerView)
    tableView.contentInset = UIEdgeInsets(top: HEADER_HEIGHT, left: 0, bottom: 0, right: 0)
    tableView.contentOffset = CGPoint(x: 0, y: -HEADER_HEIGHT)
    updateTableHeader()