【Swift】ナビゲーションバーにタイトルとサブタイトルを表示する

ナビゲーションバーにタイトルとサブタイトルを記載したかったので調べました。

開発環境

• Xcode 13
• Swift 5.5

NavigaationBarにタイトルだけを表示する

navigationItem.title = "表示したいタイトル"

タイトルだけを表示したい場合はこれだけで大丈夫です。

しかし、navigationItemのプロパティにはsubTitleは存在していないのでUINavigationItemのプロパティtitleViewを活用してサブタイトルも追加します。

titleView

ナビゲーションバーのタイトルをカスタムできるVewで、このViewにタイトルとサブタイトルを持ったViewをセットしてあげます。

titleViewにタイトルとサブタイトルをセットする

今回はUINavigationItemのextensionとしてsetTitleView(withTitle title:, subTitile:)メソッドを作成しました。

extension UINavigationItem {

    func setTitleView(withTitle title: String, subTitile: String) {

        let titleLabel = UILabel()
        titleLabel.text = title
        titleLabel.font = .boldSystemFont(ofSize: 17)
        titleLabel.textColor = .black

        let subTitleLabel = UILabel()
        subTitleLabel.text = subTitile
        subTitleLabel.font = .systemFont(ofSize: 14)
        subTitleLabel.textColor = .gray

        let stackView = UIStackView(arrangedSubviews: [titleLabel, subTitleLabel])
        stackView.distribution = .equalCentering
        stackView.alignment = .center
        stackView.axis = .vertical

        self.titleView = stackView
    }
}

1. タイトル用のUILabelとサブタイトル用のUILabelを作成
2. 作成したUILabelをUIStackViewに追加
3. UIStackViewに任意の設定を行う
4. navigationItem.titleViewに作成したタイトルとサブタイトルを含んだUIStackViewを代入

後は、このメソッドを呼び出して使うだけです。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        navigationItem.setTitleView(withTitle: "仁義なき戦い", subTitile: "広島死闘篇")
    }
}

これで表示されました。

おわりに

どうしてもナビゲーションバーに顔を表示したいを言う方は、このような表現も可能なので是非試してみてください。

この記事が世の中を少しでも平和にできればと思います。

参考

• Apple Developer Documentation - titleView
• Add subtitle under the title in navigation bar controller in Xcode