ナビゲーションバーにアイコンとテキストの画像を表示する

ナビゲーションバーにアイコンとテキストの画像を表示する

iOSでナビゲーションバーにアイコン画像やテキストのボタンを表示させる場合、以下のように簡単に実装することができますが、標準にないパターンで使いたい場合にはカスタムビューを使うことになります。
カスタムビューというと結構面倒な実装になるイメージを持ってしまいますが、UIButtonをセットするなど工夫すると比較的容易に実装できるパターンもあるので、ご紹介したいと思います。

以下の2つはアイコンのボタン、テキストのボタンで、それぞれ標準の機能で対応できるパターンの例です。

アイコン画像ボタン

        let searchBarButtonItem = UIBarButtonItem(image: UIImage(named: "ico_search")!, style: .plain, target: self, action: #selector(didTapSearch))
        navigationItem.rightBarButtonItem = searchBarButtonItem

テキストボタン

        let searchBarButtonItem = UIBarButtonItem(title: "検索", style: .plain, target: self, action: #selector(didTapSearch))
        navigationItem.rightBarButtonItem = searchBarButtonItem

テキストとアイコン画像を両方表示させたい場合、カスタムビューを使うことになりますが、これくらいのことであればUIButtonで対応できます。

        let button = UIButton(type: .system)
        button.setTitle("検索", for: .normal)
        button.setImage(UIImage(named: "ico_search")!, for: .normal)
        let searchBarButtonItem = UIBarButtonItem(customView: button)
        navigationItem.rightBarButtonItem = searchBarButtonItem

アイコンと画像を逆にしたい場合にも、UIButtonのsemanticContentAttributeをセットする事で対応できます。
semanticContentAttributeは文章の向きを設定するものですが、右から左に矯正することで、アイコンとテキストの位置を逆にすることができます。

        let button = UIButton(type: .system)
        button.semanticContentAttribute = .forceRightToLeft
        button.setTitle("検索", for: .normal)
        button.setImage(UIImage(named: "ico_search")!, for: .normal)
        let searchBarButtonItem = UIBarButtonItem(customView: button)
        navigationItem.rightBarButtonItem = searchBarButtonItem

TAG

  • このエントリーをはてなブックマークに追加
金子 将範
エンジニア 金子 将範 rubyist

新しいことや難しい課題に挑戦することにやりがいを感じ、安定やぬるい事は退屈だと感じます。 考えるより先に手が動く、肉体派エンジニアで座右の銘は諸行無常。 大事なのは感性、プログラミングにおいても感覚で理解し、感覚で書きます。