UITabBarでタブの文字を消して画像だけを表示したい

久しぶりに汎用的なネタが書けそうです。本記事ではUITabBarのUITabBarItemの文字を消して画像だけを表示する方法を紹介します。

f:id:ch3cooh393:20180130104409p:plain

UITabBarで文字を消して画像だけを表示したい

デザインガイドラインでは、通常タブバーはアイコンと項目名とをセットにして扱うと書かれています。

開発者が思っている以上にアイコンからそのタブで何ができるのかは、ユーザーには伝わっていません。明示的にタイトルを表示することで、ユーザーにそのタブで表示する内容の意味をハッキリと伝えることができます。

逆にTwitterやFacebookなどの日常的に使うアプリでは下部タブバーのタイトルの文字列を非表示にしています。昔はこれらのアプリもタブにタイトルが併記されていましたがユーザーが日常的に利用するようになりアイコンに普遍的な意味を持たせることに成功し、今ではタイトルを省いてアイコンのみになっています。

対応方法

UITabBarのUITabBarItemの文字を消して画像だけを表示するには二箇所の項目に気をつける必要があります。

アイコンをタブバー(UITabBar)の中央で表示させる
タブバー(UITabBarItem)に文字列を表示させない

最初にタブバー内のアイコン画像の表示位置を下方向にずらすします。

let item = UITabBarItem(title: name, image: UIImage(named: imageName), selectedImage: nil)
item.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)

更にタブバーにタイトルを表示させないようにします。各ViewControllerでself.title = "お知らせ"と書いている場合にはタブバーにタイトルが表示されてしまうので、self.navigationItem.titleプロパティを利用します。

class HogeViewController: UITableViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //self.title = "お知らせ"
        self.navigationItem.title = "お知らせ"
    }