帶有大標題和右側 UIBarButtonItem 的導航欄

Question

我正在嘗試復制 Podcasts 應用程序（由蘋果提供）中顯示的行為。

如圖所示， rightBarButtonItem與標題“Listen Now”對齊。 圖標甚至會隨着它向上滾動（直到它消失）。

帶有大標題的rightBarButtonItem的默認行為顯示在庫部分中：

有誰知道如何復制第一個例子？ 我需要一個與標題對齊的按鈕。

謝謝。

Answer 1

我不認為他們在播客應用程序中使用真正的大標題。 看起來他們只是在使用tableHeaderView並使其看起來好像它是導航欄的一部分。 這是有效的，因為它們擦除了導航欄導航控制器的shadowImage 。 然后他們在表格標題視圖中放置一個帶有.largeTitle大小字體的標簽。 例如：

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)")
    }

}

其中TitleStackView是一個自定義視圖，其 UI 要顯示為“大標題”UI。

例如：

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
    }()
}

最后，他們使用UIScrollViewDelegate回調來監控何時顯示標題：

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
 }

如果你做所有這些事情，你最終會得到如下效果：