[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)