Swiftにタイトルの代わりに2つのラベルを追加して、ナビゲーションバーをカスタマイズします

Question

タイトルがナビゲーションバーに表示されている場所に2つのラベルを追加しようとしていますが、これを行うのに苦労しています。ストーリーボードでこれを達成できたら非常にいいですが、私が見ることができるように私はそれを行うことができません。

見てきたように、navigationItemを使用する必要がありますが、その方法が正確にはわかりません。誰かが何らかの例を持っているか、誰かが私にもっと具体的にそれを行う方法を説明できたら素晴らしいでしょう。

そして、私はObj-Cに完全に不慣れであることを言及する必要があります。そのため、Swiftで支援が必要になります。

Answer 1

ストーリーボードから実行できるかどうかはわかりませんが、2つのタイトルラベルを追加する場合は、2つのタイトルが必要なビューコントローラーのviewDidLoad()メソッドで次のように実行できます。

if let navigationBar = self.navigationController?.navigationBar {
    let firstFrame = CGRect(x: 0, y: 0, width: navigationBar.frame.width/2, height: navigationBar.frame.height)
    let secondFrame = CGRect(x: navigationBar.frame.width/2, y: 0, width: navigationBar.frame.width/2, height: navigationBar.frame.height)

    let firstLabel = UILabel(frame: firstFrame)
    firstLabel.text = "First"

    let secondLabel = UILabel(frame: secondFrame)
    secondLabel.text = "Second"

    navigationBar.addSubview(firstLabel)
    navigationBar.addSubview(secondLabel)
}

このようにして、ナビゲーションバーに必要なだけサブビューを追加できます。

Answer 2

代わりにスタックビューを使用する実装を以下に示します。これにより、ラベルのレイアウトにもいくつかの汎用性が与えられます。

class ViewController: UIViewController {

    lazy var titleStackView: UIStackView = {
        let titleLabel = UILabel()
        titleLabel.textAlignment = .center
        titleLabel.text = "Title"
        let subtitleLabel = UILabel()
        subtitleLabel.textAlignment = .center
        subtitleLabel.text = "Subtitle"
        let stackView = UIStackView(arrangedSubviews: [titleLabel, subtitleLabel])
        stackView.axis = .vertical
        return stackView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        navigationItem.titleView = titleStackView
    }

    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()

        if view.traitCollection.horizontalSizeClass == .compact {
            titleStackView.axis = .vertical
            titleStackView.spacing = UIStackView.spacingUseDefault
        } else {
            titleStackView.axis = .horizontal
            titleStackView.spacing = 20.0
        }
    }
}