Citrus-Field TECH BLOG.

フリーランスのITエンジニア、iOSアプリの個人開発、業務委託(小売、ヘルスケア)を行っています。お仕事については、メールもしくはXのDMでご相談ください

タブバーのカスタマイズ(ソースコード有り)

Swift、UIKit、Storyboardで、画面のUIを変更しやすくしたタブバーのチュートリアル動画です。

 

タブバーを使う場合、最初の実装の仕方で、その後の生産性が変わってきます。

今回は、年季の入ったiOSアプリのタブメニューの見た目を、タブ毎の大きさや、グラフィックを変えて、リッチに見せたいという要望があり、これまでのコードでは対欧しづらかったため、タブメニュー画面を画面下部にボタンを並べるように作り直すことにしました。

 

タブっぽく見えているのは、グラフィカルなボタンです。
そのボタンから5つの画面に遷移させています。

 

Storyboard

Storyboard

もちろん、Xcoideの新規プロジェクトを作る際に、出てくるタブメニュー画面を使いたくなる気持ちも理解できますが、その後、今回のように、たとえばデザイナーから、タブの周辺などの、見栄えを大きく変えたいといった場合には、タブではなく、に追加の要望がタブ毎にバーの中のデザインを変えたりする依頼がある場合などに対応しやすいようにすべきです。

 

動作イメージ

youtu.be

 

ソースコード(GitHub)

github.com