公開中のアプリ

[Swift]UITabBarControllerの使い方

UITabBarControllerって知ってますか?
下記画像のような画面の下にメニューが並ぶやつです!
いろんなアプリで見ますよね?

僕はUITabBarControllerの存在を知らずにメインのビューコントローラーから遷移させて実装すると思ってましたw

UITabBarControllerを使えば一瞬で実装できます!
今回はUITabBarControllerの基本的な使い方を説明したいと思います!

UITabBarControllerの設置

では早速いきましょう!
まずはUITabBarControllerの設置をします!

下記画像の流れで設置して下さい!

わかりやすいように背景の色を適当に変更して下記のようになってればOKです!

ここで一回、シュミレーターで確認してみましょう!
その前に下記画像の赤枠部分→をUITabBarControllerに移動させて下さい。
この矢印のあるコントローラーが起動時に表示されます。

アプリが立ち上がったらタブを切り替えてみて下さい。
画面が切り替わりましたか?切り替わっていればOKです!

アイコンの変更

次にタブバーのアイコンを変更します!

アイコンを作成する場合、ファイル名がhomeだったら下記の名前とサイズで画像を3種類を作成します。
ファイル名:home.png サイズ:25×25
ファイル名:home@2x.png サイズ:50×50
ファイル名:home@3x.png サイズ:75×75

作成した画像をAssets.xcassetsに入れます!

storyboardに戻って、下記画像のように設定すればOKです!
簡単ですね!

タブを追加してみよう

次はタブ??を追加してみます!
これも簡単でViewControllerを用意して、下記画像の通り接続すればタブが3つに変わってると思います!

タブを制御する為のファイルを作成

次にアイコンの色とかを変更する為にファイルを作成して、UITabBarControllerに紐付けます!
ファイルの作成手順は下記画像の通りです!

最後にCreateを押して作成終了です!
次に紐付けます!

では試しにアイコンの色とか変更してみました!

コードは下記です!

import UIKit

class TabBarViewController: UITabBarController {

override func viewDidLoad() {
super.viewDidLoad()
//barの背景色の設定
UITabBar.appearance().barTintColor = UIColor.red
//選択時のアイコンの色
UITabBar.appearance().tintColor = UIColor.yellow
//選択時のフォントの設定
UITabBarItem.appearance().setTitleTextAttributes( [ .font : UIFont.init(name: "HelveticaNeue-Bold", size: 10)!,
                                                    .foregroundColor : UIColor.yellow],
                                                  for: .selected)
//選択してない時のアイコンのカラー設定
UITabBar.appearance().unselectedItemTintColor = UIColor.white
//選択してない時のフォントの設定
UITabBarItem.appearance().setTitleTextAttributes( [ .font : UIFont.init(name: "HelveticaNeue-Bold", size: 10)!,
                                                    .foregroundColor : UIColor.white ],
                                                  for: .normal)
}
}

まとめ

いかがでしたでしょうか?
長々と書きましたが本当に簡単に実装できたと思います!

質問とかあれば気軽にコメントしてもらえると嬉しいです!
友達欲しいですw
宜しくお願いします!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

アプリ