带有大标题和右侧 UIBarButtonItem 的导航栏

Question

I am trying to replicate the behaviour shown in Podcasts app (by apple).

As shown in the image, the rightBarButtonItem is aligned with the title "Listen Now". The icon even scrolls up with it (until it disappears).

The default behavior for a rightBarButtonItem with large titles it is shown in the library section:

Anyone knows how to replicate the first example? I need a button aligned with the title.

Thanks.

Answer 1

I don't think they use actual large titles in the podcast app. It looks like they are just using a tableHeaderView and making it appear as though it's part of the navigation bar. This works because they erase the shadowImage of the navigation controllers the navigation bar. Then they place a label with a .largeTitle sized font in the table header view. For example:

class ViewController: UIViewController {

    @IBOutlet weak var tableView: UITableView!

    lazy var titleStackView: TitleStackView = {
        let titleStackView = TitleStackView(frame: CGRect(origin: .zero, size: CGSize(width: view.bounds.width, height: 44.0)))
        titleStackView.translatesAutoresizingMaskIntoConstraints = false
        return titleStackView
    }()

    lazy var tableHeaderView: UIView = {
        let tableHeaderView = UIView(frame: CGRect(origin: .zero, size: CGSize(width: view.bounds.width, height: 44.0)))
        tableHeaderView.addSubview(titleStackView)
        titleStackView.leadingAnchor.constraint(equalTo: tableHeaderView.leadingAnchor, constant: 16.0).isActive = true
        titleStackView.topAnchor.constraint(equalTo: tableHeaderView.topAnchor).isActive = true
        titleStackView.trailingAnchor.constraint(equalTo: tableHeaderView.trailingAnchor, constant: -16.0).isActive = true
        titleStackView.bottomAnchor.constraint(equalTo: tableHeaderView.bottomAnchor).isActive = true
        return tableHeaderView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        title = nil
        navigationController?.navigationBar.isTranslucent = false
        navigationController?.navigationBar.barTintColor = UIColor.white
        navigationController?.navigationBar.shadowImage = UIImage()
        tableView.tableHeaderView = tableHeaderView
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "\(UITableViewCell.self)")
    }

}

Where TitleStackView is a custom view with the UI that you want to appear as the "large title" UI.

For example:

class TitleStackView: UIStackView {

    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }

    required init(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }

    private func commonInit() {
        axis = .horizontal
        alignment = .center
        addArrangedSubview(titleLabel)
        addArrangedSubview(button)
    }

    lazy var titleLabel: UILabel = {
        let label = UILabel()
        label.font = UIFont.systemFont(ofSize: UIFont.preferredFont(forTextStyle: .largeTitle).pointSize, weight: .heavy)
        label.text = "Listen Now"
        label.setContentHuggingPriority(.defaultLow, for: .horizontal)
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

    lazy var button: UIButton = {
        let buttonWidth: CGFloat = 35.0
        let button = UIButton(frame: CGRect(origin: .zero, size: CGSize(width: buttonWidth, height: buttonWidth)))
        button.backgroundColor = .purple
        button.setTitleColor(.white, for: .normal)
        button.setTitle("B", for: .normal)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.widthAnchor.constraint(equalToConstant: buttonWidth).isActive = true
        button.heightAnchor.constraint(equalToConstant: buttonWidth).isActive = true
        button.layer.cornerRadius = button.bounds.height * 0.5
        button.layer.masksToBounds = true
        return button
    }()
}

Finally, they use the UIScrollViewDelegate callback to monitor when to show the title:

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let maxTitlePoint = tableView.convert(CGPoint(x: titleStackView.titleLabel.bounds.minX, y: titleStackView.titleLabel.bounds.maxY), from: titleStackView.titleLabel)
    title = scrollView.contentOffset.y > maxTitlePoint.y ? "Listen Now" : nil
 }

If you do all of those things you end up with an effect like the following: