[Swift] NavigationBar, TabBar カスタマイズまとめ

細かいデザインを指定された時に対応するためのTips。

UINavigationBar カスタマイズ

戻るボタンの画像を変更する

UINavigationBar.appearance().backIndicatorImage = UIImage(named: "BackImage")
UINavigationBar.appearance().backIndicatorTransitionMaskImage = UIImage(named: "BackImage")

戻るボタンのテキストの高さを調整する

UIBarButtonItem.appearance().setBackButtonTitlePositionAdjustment(UIOffset(horizontal: 0, vertical: -2), forBarMetrics: UIBarMetrics.Default)

ボーダーの色を変更する

自前の UINavigationBar を作成して、下部にUIViewを突っ込みます。

class NavigationBar: UINavigationBar {

    let navBarBorder = UIView()

    func setupSeparator() {
        let bottomBorderRect = CGRect(x: 0, y: frame.height, width: frame.width, height: 1)
        navBarBorder.frame = bottomBorderRect
        navBarBorder.backgroundColor = UIColor.redColor()
        addSubview(navBarBorder)
    }
}

ボーターの色を画面遷移に合わせて変更する

上記の navBarBorder の色をviewWillAppearで変更します。

override func viewWillAppear(animated: Bool) {
        super.viewWillAppear(animated)
　if let navBar = navigationController?.navigationBar as? NavigationBar {
  　navBar.navBarBorder.backgroundColor = UIColor.whiteColor()
　}
}

背景色を変更する

UINavigationBar.appearance().tintColor = UIColor.greenColor()

高さを変更する

自前のNavigationBarを作成します。

class NavigationBar: UINavigationBar {

    let navBarBorder = UIView()

    override func sizeThatFits(size: CGSize) -> CGSize {
        var barSize = super.sizeThatFits(size)
        barSize.height = 51 // new height
        return barSize;
    }
}

UITabBar カスタマイズ

TabBar のボーダーを変更する

shadowImage に変更した色のUIImageを指定します。

UITabBar.appearance().shadowImage = UIImage.colorForNavBar(.redColor())

extension UIImage {
    class func colorForTabBar(color: UIColor) -> UIImage {
        let rect = CGRectMake(0.0, 0.0, 1.0, 1.0)
        UIGraphicsBeginImageContext(rect.size)
        let context = UIGraphicsGetCurrentContext()

        CGContextSetFillColorWithColor(context, color.CGColor)
        CGContextFillRect(context, rect)

        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return image
    }
}

TabBar の背景色を変更する

UITabBar.appearance().backgroundImage = UIImage.colorForNavBar(.whiteColor())
tabBar.translucent = false

TabBar の文字の位置を調整する

UITabBarItem.appearance().titlePositionAdjustment = UIOffset(horizontal: 0, vertical: -2)

TabBar の文字の色を調整する

UITabBarItem.appearance().setTitleTextAttributes([NSFontAttributeName: UIFont.systemFontOfSize(8), NSForegroundColorAttributeName: UIColor.yellowColor()], forState: .Selected)

UITabBarItem.appearance().setTitleTextAttributes([NSFontAttributeName: UIFont.systemFontOfSize(8), NSForegroundColorAttributeName: UIColor.blackColor()], forState: .Normal)

TabBar のアイコンで画像の色をそのまま使用する

viewController.tabBarItem = UITabBarItem(title: "ホーム", image: UIImage(named: "Home")?.imageWithRenderingMode(.AlwaysOriginal), selectedImage: UIImage(named: "HomeSelected")?.imageWithRenderingMode(.AlwaysOriginal))

高さを変更する

自前のTabBarを作成します。

class TabBar: UITabBar {

    override func sizeThatFits(size: CGSize) -> CGSize {
        var size = super.sizeThatFits(size)
        size.height = 51 // newHight
        return size
    }

}