うるおいらんど
アイキャッチ画像

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

SwiftUITabBar

追記があります。

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

 

どもども。

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

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

[video width="188" height="334" mp4="https://uruly.xyz/wp-content/uploads/2016/12/tab.mp4"\]\[/video\]

 

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

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

 

storyboardは使ってません。

 

UITabBarを設置しよう

まずはUITabBarを設置します。

import UIKit

class ViewController: UIViewController ,UITabBarDelegate{
    
    private var myTabBar:UITabBar!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let width = self.view.frame.width
        let height = self.view.frame.height
        //デフォルトは49
        let tabBarHeight:CGFloat = 49
        
        /**   TabBarを設置   **/
        myTabBar = UITabBar()
        myTabBar.frame = CGRect(x:0,y:height - tabBarHeight,width:width,height:tabBarHeight)
        //バーの色
        myTabBar.barTintColor = UIColor.lightGray
        //選択されていないボタンの色
        myTabBar.unselectedItemTintColor = UIColor.white
        //ボタンを押した時の色
        myTabBar.tintColor = UIColor.blue

        //ボタンを生成
        let mostRecent:UITabBarItem = UITabBarItem(tabBarSystemItem: .mostRecent, tag: 1)
        let downloads:UITabBarItem = UITabBarItem(tabBarSystemItem: .downloads, tag: 2)
        let favorites:UITabBarItem = UITabBarItem(tabBarSystemItem: .favorites, tag: 3)
        let bookmarks:UITabBarItem = UITabBarItem(tabBarSystemItem:.bookmarks ,tag:4)
        let more:UITabBarItem = UITabBarItem(tabBarSystemItem: .more,tag:5)
        //ボタンをタブバーに配置する
        myTabBar.items = [mostRecent,downloads,favorites,bookmarks,more]
        //デリゲートを設定する
        myTabBar.delegate = self
        
        self.view.addSubview(myTabBar)
        
    }

}

 

タブバーの色

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

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

        //バーの色①
        myTabBar.barTintColor = UIColor.lightGray
        //選択されていないボタンの色②
        myTabBar.unselectedItemTintColor = UIColor.white
        //ボタンを押した時の色③
        myTabBar.tintColor = UIColor.blue

tab1

 

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

 

UITabBarItemの設定

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

//もともと用意されているものを使用
let more:UITabBarItem = UITabBarItem(tabBarSystemItem: .more,tag:5)
//画像だけ
let config:UITabBarItem = UITabBarItem(title: nil, image: UIImage(named:"config.png"), tag: 6)
//文字と画像
let config2:UITabBarItem = UITabBarItem(title: "config", image: UIImage(named:"config.png"), tag: 7)
myTabBar.items = [more,config,config2]

 

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

%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を継承しておきます。先ほどのコードにもすでに書かれています。

class ViewController: UIViewController ,UITabBarDelegate{
     /*   ~~   */
}

 

myTabBar.delegate = self

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

 

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

    func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {
        switch item.tag{
        case 1:
            print("１")
        case 2:
            print("２")
        case 3:
            print("３")
        case 4:
            print("４")
        case 5:
            print("５")
        default : return
            
        }
    }

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に変更しました。画像と名前が異なります、すみません。

 

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

import UIKit

class MyTabBar: UITabBar {

    override func sizeThatFits(_ size: CGSize) -> CGSize {
        var size = super.sizeThatFits(size)
        size.height = 58
        return size
    }

}

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

 

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

    private var myTabBar:MyTabBar!

    override func viewDidLoad() {
        /**    ~~      **/

        //デフォルトは49
        let tabBarHeight:CGFloat = 58
        
        /**   TabBarを設置   **/
        myTabBar = MyTabBar()
        
        /**      ~~     **/
    }

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

 

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

 

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

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

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

 

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

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

 

 

全体コード

//
//  ViewController.swift
//  tabbar
//
//  Created by Reo on 2016/12/03.
//  Copyright © 2016年 Reo. All rights reserved.
//

import UIKit

class ViewController: UIViewController ,UITabBarDelegate{
    
    private var myTabBar:MyTabBar!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let width = self.view.frame.width
        let height = self.view.frame.height
        //デフォルトは49
        let tabBarHeight:CGFloat = 58
        
        /**   TabBarを設置   **/
        myTabBar = MyTabBar()
        myTabBar.frame = CGRect(x:0,y:height - tabBarHeight,width:width,height:tabBarHeight)
        //バーの色
        myTabBar.barTintColor = UIColor.lightGray
        //選択されていないボタンの色
        myTabBar.unselectedItemTintColor = UIColor.white
        //ボタンを押した時の色
        myTabBar.tintColor = UIColor.blue
        //ボタンを生成
        let mostRecent:UITabBarItem = UITabBarItem(tabBarSystemItem: .mostRecent, tag: 1)
        let downloads:UITabBarItem = UITabBarItem(tabBarSystemItem: .downloads, tag: 2)
        let favorites:UITabBarItem = UITabBarItem(tabBarSystemItem: .favorites, tag: 3)
        let bookmarks:UITabBarItem = UITabBarItem(tabBarSystemItem:.bookmarks ,tag:4)
        let more:UITabBarItem = UITabBarItem(tabBarSystemItem: .more,tag:5)
        //ボタンをタブバーに配置する
        myTabBar.items = [mostRecent,downloads,favorites,bookmarks,more]
        //デリゲートを設定する
        myTabBar.delegate = self
        
        self.view.addSubview(myTabBar)
        
    }
    
    func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {
        switch item.tag{
        case 1:
            print("１")
        case 2:
            print("２")
        case 3:
            print("３")
        case 4:
            print("４")
        case 5:
            print("５")
        default : return
            
        }
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

 

MyTabBar.swift

//
//  MyTabBar.swift
//  tabbar
//
//  Created by Reo on 2016/12/03.
//  Copyright © 2016年 Reo. All rights reserved.
//

import UIKit

class MyTabBar: UITabBar {

    override func sizeThatFits(_ size: CGSize) -> CGSize {
        var size = super.sizeThatFits(size)
        size.height = 58
        return size
    }

}

 

それではでは

 

参考リンク

Additional Notes追記

iPhoneXのことを考えてUITabBarControllerを使おう・・・

一応Swift4での動作確認をしました。このままでも一応動作します。

ただし、iPhoneXのことを考えると、UITabBarを単体で使うのはやめたいです。 自分はこれまで単体で使ってたところを全てiPhoneX対応時にUITabBarControllerへ変更しました。

本記事のコードをそのまんま使うとiPhoneXでは こんな感じになります。

iPhoneXだとまず高さを変更するとおかしくなっちゃいます。

高さ変更のコードを削除しても

という感じにsafeArea無視してそのまま配置になってしまいます。

これを単体のままsafeAreaを考慮しようとすると結構めんどくさいです。 どちらの実装もしたんですが、むしろ自分的にはUITabBarControllerに乗り換える方がよっぽど楽でした。

なので是非UITabBarControllerの方を使ってください。

Comments

コメントはありません。

現在コメントフォームは工事中です。

Newer
22歳になって１週間経ちました。【ひとりごと】
Older
【Swift3】連続型カレンダーを実装してみた【UICollectionView】
Info
投稿日
カテゴリ
Swift
タグ
SwiftUITabBar