时间戳

首页 > 解决方案 > 如何创建一个像 Apple Music 艺术家页面上的融合导航栏

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

问题描述

我正在尝试创建一个导航栏（屏幕截图中“热门歌曲”上方的所有内容），看起来就像 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 的背景。向下拖动表格时，应拉伸第一个单元格的背景图像，而不是随着单元格内容移动。

谢谢。

标签： swiftuitableviewuser-interfaceuicollectionviewautolayout

解决方案

想出了一个解决方案：

首先，打开故事板，将一个 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()
}

推荐阅读