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

```