【アイコンををスタイリッシュに】NavigationBar(UIBarButtonItem)にSF Symbolsを使用する方法について

どうもこんにちは！しょ〜ひ〜です！今回は、NavigationBarにボタンを設置する際に、UIBarButtonItemであらかじめ用意されたもの以外のものを使用したい時があり、どうすればいいのかなと考えていましたが解決したので、共有したいなと思います！

UIBarButtonItemとSF Symbolsについて

UIBarButtonItem
A specialized button for placement on a toolbar, navigation bar, or shortcuts bar.

【Apple公式リファレンス】UIBarButtonItem

https://developer.apple.com/documentation/uikit/uibarbuttonitem/

まずは、UIBarButtonItemですが、読んで字のごとくBarに設置するためのボタンのことですね！もう少し深く説明すると、『ツールバーやナビゲーションバーのための特別なボタン』ということです。
そして、SF Symbolsとは、ざっくりいうとAppleが公式で出しているアイコンのことです。もちろん、フォトショップ等で自作でアイコンを作成するのもいいですが、個人開発でそこまでするのには労力がかかりすぎます。そこで、この公式のSF Symbolsを使用して、iOS開発で爆速で開発を進めることができます。また、他のiOSアプリケーションでも同じアイコンを使用されているケースが多いため、ユーザーからすればアイコンが何を表しているのかを理解しやすいです。UI/UX向上間違いなしです！

ちなみに、SF Symbolsは以下からアイコンを一覧することができるファイルが取得できます！
【SF Symbols】
https://developer.apple.com/jp/sf-symbols/

具体的な解決方法

具体的にどのように、NavigationBarに設置する方法について解説していきます！
以下のコードを参考にしていただければと思います！

private var ellipsisBarButton: UIBarButtonItem! // ①
ellipsisBarButton = UIBarButtonItem(image: UIImage(systemName: "ellipsis"), style: .done, target: self,  action: #selector(tappedEllipsisButton(_:))) // ②
navigationItem.rightBarButtonItem = ellipsisBarButton // ③

【実装手順】
①UIBarButtonItemをインスタンス化しておきます。
②ここで、『image: UIImage(systemName: "ellipsis")』を用いて「ellipsis」の部分で使用したいアイコンを選択します。
③navigationItem.rightBarButtonItemを用いて、UIBarButtonItemに設定したアイコンを実際にnavigationBarの右側に設置することができます！

上記で実装できるはずです！
ellipsisは「・・・」のようなアイコンを表示できますので、皆さんもSF Symbols内にある使いたいアイコンを選択してください！

さいごに

いかがでしたでしょうか？色々と「ナビゲーションバーアイコン」等で調べても出てこなかったので、皆さんも解決しましたか？
上記の書き方で、各々好きなSF Symbolsのアイコンを自由に扱うことができて本当に便利ですよね〜！Apple純正のアイコンを使用することがUI/UXの向上の第一歩なので、是非この機会にアイコンをフル活用しましょう！今後も、技術記事を中心に発信していきますので、よければ参考にしていただければ幸いです！