[iOS]タブバーのタイトルを非表示にしよう(Twitter、Instagram風)

2019年4月2日ITSwift

タブバーのタイトルをTwitterやInstagram風に非表示にする手順です

タイトル表示非表示比較

tabbar-no-title1

tabbar-no-title2

ストーリーボードを使用する場合

ストーリーボード → 対象のタブ
・Tab Bar Item:System Item 「Custom」
・Bar Item :Title → 削除
・Bar Item :Image → 設定したい画像

tabbar-no-title3

定規マーク
・Bar Item :Image Inset 「Top」 → 「6」、「Bottom」 → 「-6」

※タブバーの高さはデフォルトの高さを想定しています

tabbar-no-title4

それぞれのタブに適用しますと、、、

tabbar-no-title2

と、なります

コードを使用する場合

※1. Tab Bar Item:System Item で「Custom」以外を選択した場合は適用されないようです
※2. ストーリーボードと同様アイコン画像の設定が必要です

・Tab Bar Item:System Item 「Custom」
・Bar Item :Title (入力していても、読み込み時にコードで削除されます)
・Bar Item :Image → 設定したい画像

tabbar-no-title3

TabbarControllerのカスタムクラスを用意します
メニュー 「File」 → 「New」 → 「File」 から 「Cocoa Touch Class」をテンプレとして選び、Subclass を UITabBarController にして、クラス名は 「MyTabBarController」 にしました

tabbar-no-title5

ストーリーボード上の MyTabBarController を選択し、Custom Class欄で、MyTabBarControllerを指定します。

tabbar-no-title6

MyTabBarController のviewDidLoad 内で TabbarItem のタイトル削除と高さの調整を行います

MyTabBarController.swift

import UIKit

class MyTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        for tabBarItem in tabBar.items!
        {
            // タイトルを空欄に
            tabBarItem.title = ""
            // 高さ調整
            tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0)
        }
    }

}

結果はストーリーボードで設定した場合と同じ結果になります

ひとこと

花粉の厳しい季節になってまいりました。ふと思ったのですが、小さい頃は花粉のせいで鼻水が止まらなかったり、目がシパシパしたり、くしゃみが止まらなかったりといったことはなかったように思うのですが、、、

スポンサーリンク

Posted by nobuhiro harada