うるおいらんど

アプリ開発やサイト制作のメモとか。

【Swift 3】UITabBarを使って下部メニューを作成してみた【UITabBar】

魚ライン
魚ライン

※UITabBarControllerは使わず、UITabBarだけを使う記事になります。

 

どもども。

今回はUITabBarを使って下部メニューを作っていこうと思います。

UITabBarは通常UITabBarControllerで下の動画のように使用されます。



 

タブバー自体は画面下部に固定されて、ボタンを押すと画面が切り替わるといった挙動をします。

今回はこのような使い方ではなく、単純に通常のUIButtonを設置するような使い方をしていこうと思います。(画面遷移やポップアップを表示等々アクションを自分で設定)

 

storyboardは使ってません。

 

UITabBarを設置しよう

まずはUITabBarを設置します。

 

タブバーの色

タブバーをカスタマイズする際に避けられないのが色の設定なんですが、これがまたちょっとわかりづらい。

よく使う色の設定だとこれら3つだと思います。

tab1

 

そのほかにもbackgroundColorとかあるのですがどこが変わってるのかさっぱり・・・・・

 

UITabBarItemの設定

UITabBarItemは上記のようにもともと用意されているものを使うこともできますし、自分で画像と文字を設定することもできます。

 

それぞれ画像のようになります。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-03-11-48-41

 

ちなみに、今回この歯車の画像は

config

このように色付きのものを設定してます。(表示されていない場合クリックすると見れるはずです…)

しかし実際配置して見ると色のついた部分がそのまま先ほど設定した色に変更されます。多色でも同様です。

こうならないようにする方法もあると思いますが、今回は触れません。また機会があれば別に記事書きますね。

 

ボタンをタップした時のアクションを設定しよう

まずはUITabBarDelegateを継承しておきます。先ほどのコードにもすでに書かれています。

 

これを書き忘れると動かないです(´・ω・`)

 

ボタンをタップされた時のアクションを設定します。

delegateを設定することでこのtabBar(_:didSelect:)を使用することができます。

 

この中にそれぞれボタンを押した時のアクションを書いていけばokです。

 

タブバーの高さを変更しよう

UITabBarはframeでheightを変更してもタブバー自体の高さは変わりません。

なので、49以上の値を設定すると下の画像のようになります。(わかりやすように背景を黒にしています)

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-03-12-18-35

 

少し面倒ですが、カスタムクラスを作っていきます。

File > New > File

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-29-4-42-26

Source > Cocoa Touch Class

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-29-4-42-44

 

Subclass of をUITabBarに設定

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-03-12-24-16

myTabBar で作成しましたがMyTabBarに変更しました。画像と名前が異なります、すみません。

 

作成したファイルに以下のように記述

自分の設定したい高さを指定します。

 

UITabBarの宣言部分をUITabBarからMyTabBarに変更します。

tabBarHeightも先ほど指定したものと同じ数字にしておいてください。

 

これでタブバーの高さを変更できます。

 

友達のタブバー記事をチラチラ見て、タブバーの高さ自体はあまり変えないほうがいいのかなぁとも思ったり。

デザイン面になりますがぜひぜひ

[#4]タブバーを集めてみた | 勝手にアプリレビュー | LOL.blog—webデザインetcを勉強中

 

私は、画面遷移後にタブバーを表示したくなく、さらに画像と文字をセットで表示したいと思い、このような方法でタブバーを使用することにしています。

バッジをつけることもできるので、使うかはわかりませんが意外と便利かもと思っています。

 

 

全体コード

 

MyTabBar.swift

 

それではでは

 

参考記事

【Swift】Tab Barの使い方。タブで画面を切り替える。

 

魚ライン 魚ライン

Swiftの記事一覧を見る

コメント

コメントは認証制です。詳しくは下記の注意をお読みください。

コメントを残す

コメント時の注意

「Twitter」「Facebook」「Google+」「WordPress」のいずれかのアカウントをお持ちの方は各アカウントと連携することでコメントできます。 コメントしたことはSNSに流れませんので、アカウントをお持ちの方はこちらの方法でコメントを投稿して下さると嬉しいです。 アカウントをお持ちでない方はメールアドレスで投稿することができます。 初回コメント時は承認後に表示されます。

魚ライン 魚ライン