web-dev-qa-db-ja.com

Swiftでアクティブなタブバー項目の背景色を設定します

できれば、画像を使わずにこれを実現したいと思っています。各タブを画像としてレンダリングする必要なしに、プログラムで画像に表示される効果を作成する方法はありますか？

SOで確認したすべての質問には、タブがJPGとして保存されています。これは、私が思っているよりも多くの作業です。

何か案は？Tab Bar

iosswiftuitabbar
21
matcartmill

私は@matcartmillに同様のアプローチをとりましたが、特別な画像は必要ありませんでした。 このソリューションはあなたの色に基づいています。

// set red as selected background color
let numberOfItems = CGFloat(tabBar.items!.count)
let tabBarItemSize = CGSize(width: tabBar.frame.width / numberOfItems, height: tabBar.frame.height)
tabBar.selectionIndicatorImage = UIImage.imageWithColor(color: UIColor.red, size: tabBarItemSize).resizableImage(withCapInsets: UIEdgeInsets.zero)

// remove default border
tabBar.frame.size.width = self.view.frame.width + 4
tabBar.frame.Origin.x = -2

私は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
    }

}

これが役に立てば幸いです！

Swift 4

extension UIImage {

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

Swift 3：に更新します

let numberOfItems = CGFloat((tabBarController?.tabBar.items!.count)!)

let tabBarItemSize = CGSize(width: (tabBarController?.tabBar.frame.width)! / numberOfItems,
                            height: (tabBarController?.tabBar.frame.height)!)

tabBarController?.tabBar.selectionIndicatorImage
    = UIImage.imageWithColor(color: UIColor.black,
                             size: tabBarItemSize).resizableImage(withCapInsets: .zero)

tabBarController?.tabBar.frame.size.width = self.view.frame.width + 4
tabBarController?.tabBar.frame.Origin.x = -2

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

だからここに私がやったことです。これは、必要な青色の「強調表示された」背景の色である640x49のPNGを組み合わせたものです。

AppDelegate.Swiftで：

var selectedBG = UIImage(named:"tab-selected-full")?.resizableImageWithCapInsets(UIEdgeInsetsMake(0, 0, 0, 0))
UITabBar.appearance().selectionIndicatorImage = selectedBG

そして、読み込まれる最初のビューコントローラーでは、次のようになります。

tabBarController?.tabBar.frame.size.width = self.view.frame.width+4
tabBarController?.tabBar.frame.Origin.x = -2

上記の2行の理由は、デフォルトでAppleには、タブバーの左側と右側とタブバーアイテムの間に2pxの境界線があるためです。

上記の例では、タブバーを4px広くして、オフセットして左側のボーダーをビューのすぐ外側に配置し、右側のボーダーもビューの外側に配置されるようにしています。

3
matcartmill