IOS 11 类似 Apple Music 的导航栏添加标题和副标题

Question

这是一个 IOS 11 问题。我不确定我们是否可以谈论这个，IOS 处于测试阶段。

但我正在看 Apple Music 中的这个导航栏：

我知道他们引入了大标题 IOS 11:

navigationController?.navigationBar.prefersLargeTitles = true

"For You" 文字看起来像标题，但他们是如何添加日期的？这是一个 API 吗？

一开始我以为是 prompt 属性，但这样设置的文本仍然在中间和顶部。

我想知道这是不是有些特殊 IOS 11 API 或者他们只是使用了带有两个标签的视图。

Answer 1

根据 WWDC 2017 Session 301 - Introducing the New App Store 大约 10:30 的说法，就在显示今日互动时，它只是 collection 视图的 部分 header 而不是 UINavigationBar 的一部分（有 none）。同样，这是针对 AppStore 的，但看起来 UI 与音乐相同。

关于重建 UI 的另一篇有趣的读物：Re-building the new app store app – today view

Answer 2

对于所有搜索如何为 LargeTitle 设置字幕的人：

步骤 1

将 Navigation Controller 添加到您的场景：

打开故事板(Main.storyboard)。
Select场景.
选择编辑器 > 嵌入 > 导航控制器。

步骤 2

开启大标题:

Select 物品场景 > 物品 > 导航栏.
在属性检查器上勾选 "Prefers Large Titles"。

步骤 3

将此函数添加到您的代码中：

 func setTitle(title:String, subtitle:String) -> UIView {

        //Get navigation Bar Height and Width
        let navigationBarHeight = Int(self.navigationController!.navigationBar.frame.height)
        let navigationBarWidth = Int(self.navigationController!.navigationBar.frame.width)

        //Y position for Title and Subtitle
        var y_Title = 0.0
        var y_SubTitle = 0.0

        //Set Y position
        if UIDevice().userInterfaceIdiom == .phone {
            switch UIScreen.main.nativeBounds.height {
            //If screen height equal iPhone 5S and SE
            case 1136:
                y_Title = 46
                y_SubTitle = 36
                print("iPhone 5S and SE")
            //If screen height equal iPhone 6, 6+, 6S, 6S+, 7, 7+, 8, 8+ and X
            case 1334, 1920, 2208, 2436:
                y_Title = 48
                y_SubTitle = 38
                print("iPhone 6, 6+, 6S, 6S+, 7, 7+, 8, 8+ and X")
            default:
                y_Title = 46
                y_SubTitle = 36
                print("Default")
            }
        }

        //Set Font size and weight for Title and Subtitle
        let titleFont = UIFont.systemFont(ofSize: 33, weight: UIFont.Weight.bold)
        let subTitleFont = UIFont.systemFont(ofSize: 12, weight: UIFont.Weight.semibold)

        //Title label
        let titleLabel = UILabel(frame: CGRect(x: 8.5, y: y_Title, width: 0, height: 0))
        titleLabel.backgroundColor = UIColor.clear
        titleLabel.textColor = UIColor.black
        titleLabel.font = titleFont
        titleLabel.text = title
        titleLabel.sizeToFit()

        //SubTitle label
        let subtitleLabel = UILabel(frame: CGRect(x: 8.5, y: y_SubTitle, width: 0, height: 0))
        subtitleLabel.backgroundColor = UIColor.clear
        subtitleLabel.textColor = UIColor.gray
        subtitleLabel.font = subTitleFont
        subtitleLabel.text = subtitle
        subtitleLabel.sizeToFit()

        //Add Title and Subtitle to View
        let titleView = UIView(frame: CGRect(x: 0, y: 0, width: navigationBarWidth, height: navigationBarHeight))
        titleView.addSubview(titleLabel)
        titleView.addSubview(subtitleLabel)

        return titleView

    }

然后在viewDidLoad()中调用这个函数：

override func viewDidLoad() {
        super.viewDidLoad()
        self.navigationItem.titleView = setTitle(title: "Title", subtitle: "SUBTITLE")
    }

IOS 11 类似 Apple Music 的导航栏添加标题和副标题

Add title and subtitle to navigation bar similar to Apple Music in IOS 11

ios

ios11