1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

UIKitでナビゲーションの戻るボタンをカスタマイズするときにハマった

Posted at

はじめに

タイトルの通り、UIKitでナビゲーションの戻るボタンをデフォルトと異なるアイコンに設定しようとしたときにハマったのでその内容と対応方法について残しておこうと思います。

困ったこと

デフォルトの戻るボタンのアイコンを以下コードで変更しようとしたが、デフォルトのボタンのまま変わらなかった。

navigationItem.backBarButtonItem = UIBarButtonItem(image: UIImage(systemName: "chevron.backward"), style: .plain, target: self, action: #selector(tappedBackNavigationButton))

デフォルトの戻るボタン

ナビゲーションバーのデフォルトの戻るボタンは以下のような< Backのボタンになっています。

スクリーンショット 2024-11-01 18.54.38.png

期待した変更後の戻るボタン

今回は以下のような戻るボタンになることを期待しました。

スクリーンショット 2024-11-01 21.03.14.png

解決法

以下のように実装すると期待通りに変更が反映されました。

navigationItem.leftBarButtonItem = UIBarButtonItem(image: UIImage(systemName: "chevron.backward"), style: .plain, target: self, action: #selector(tappedBackNavigationButton))

納得いかないところ

backBarButtonItemの公式ドキュメントを見てみると以下のように記載されています。

When this navigation item is immediately below the top item in the stack, the navigation controller derives the Back button for the navigation bar from this navigation item. If you want to specify a custom title or image for the Back button, you can assign a custom bar button item (with your custom title or image) to this property. When you configure your bar button item, don’t assign a custom view to it; the navigation item ignores custom views in the backBarButtonItem.

日本語訳がこちら

このナビゲーション項目がスタックの最上位項目のすぐ下にある場合、ナビゲーション コントローラーはこのナビゲーション項目からナビゲーション バーの [戻る] ボタンを派生します。 [戻る] ボタンのカスタム タイトルまたは画像を指定する場合は、カスタム バー ボタン項目 (カスタム タイトルまたは画像を含む) をこのプロパティに割り当てることができます。バーボタン項目を設定するときは、その項目にカスタムビューを割り当てないでください。ナビゲーション項目は、backBarButtonItem のカスタム ビューを無視します。

上記記載を見ると下記のようなコードは変更が適用されないが、

navigationItem.backBarButtonItem = UIBarButtonItem(customView: UIButton(type: .close))

下記のようなカスタムや適用されると解釈していました。
しかし、戻るボタンの変更は適用されませんでした。

navigationItem.backBarButtonItem = UIBarButtonItem(image: UIImage(systemName: "chevron.backward"), style: .plain, target: self, action: #selector(tappedBackNavigationButton))
navigationItem.backButtonTitle = "Camera"

そうなるとbackBarButtonItem何のためにあるんやとなってしまいますが、ドキュメントには下記が記載されているのでこのプロパティで戻るボタンはカスタマイズできそうな気はしています。

[戻る] ボタンのカスタム タイトルまたは画像を指定する場合は、カスタム バー ボタン項目 (カスタム タイトルまたは画像を含む) をこのプロパティに割り当てることができます。

ただその方法は現状自分はわからないので知っている方いたら教えてれると幸いです、、

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?