[swift] tabBarをカスタマイズ

tabBarをカスタマイズ

tabBarのItemや背景をカスタマイズするには以下の方法

UITabBarController.swiftの作成

新たにUITabBarController.swiftを作成し、storyboardのtabBarContollerにアタッチ

サンプルコード：

class mainBarController: UITabBarController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //UITabBar.appearance().barTintColor = UIColor(red: 0.56, green: 0.78, blue: 0.28, alpha: 0.2) //背景色を変更
        let numberOfItems = CGFloat(tabBar.items!.count) //Item数を取得

        UITabBar.appearance().backgroundImage = UIImage(named: "tabbar_bk.png")//背景画像を指定
        tabBar.selectionIndicatorImage = UIImage(named: "tabbar_bk_selected.png")?.resizableImageWithCapInsets(UIEdgeInsetsZero) //選択時の背景画像を指定
        
        //境界線を非表示
        tabBar.frame.size.width = self.view.frame.width + 4
        tabBar.frame.origin.x = -2
        
        //それぞれのItemの画像を設定
        //レンダーモードをAlwaysOriginalにするとオリジナルの色がそのまま使用できる
        tabBar.items![0].image = UIImage(named: "tabbar_item_0.png")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
        tabBar.items![1].image = UIImage(named: "tabbar_item_1.png")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
        tabBar.items![2].image = UIImage(named: "tabbar_item_2.png")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
        
        //それぞれのItemの選択時の画像を設定
        tabBar.items![0].selectedImage = UIImage(named: "tabbar_item_0_selected.png")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
        tabBar.items![1].selectedImage = UIImage(named: "tabbar_item_1_selected.png")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
        tabBar.items![2].selectedImage = UIImage(named: "tabbar_item_2_selected.png")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
        
        //画像位置をtabbarの高さ中央に配置
        let insets = UIEdgeInsetsMake(6, 0, -6, 0)
        tabBar.items![0].imageInsets = insets
        tabBar.items![1].imageInsets = insets
        tabBar.items![2].imageInsets = insets


        //titleを非表示
        tabBar.items![0].title = nil
        tabBar.items![1].title = nil
        tabBar.items![2].title = nil
        

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

背景画像をUIColorで作成する

背景画像を作成するのがめんどうな場合は、UIColorで作成することも可能
UIImageを拡張

extension UIImage {

    class func imageWithColor(color: UIColor, size: CGSize) -> UIImage {
        let rect: CGRect = CGRectMake(0, 0, size.width, size.height)
        UIGraphicsBeginImageContextWithOptions(size, false, 0)
        color.setFill()
        UIRectFill(rect)
        let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }

}

UITabBarController.swift内に実装

let numberOfItems = CGFloat(tabBar.items!.count)
let tabBarItemSize = CGSize(width: tabBar.frame.width / numberOfItems, height: tabBar.frame.height)
tabBar.selectionIndicatorImage = UIImage.imageWithColor(UIColor.redColor(), size: tabBarItemSize).resizableImageWithCapInsets(UIEdgeInsetsZero)