如何让UITabBar选择指标图像填满整个空间？

Question

我有一个UITabBarController,我使用此代码来设置选择指标图像:

let selectedBG = UIImage(named:"tabbarbgtest.png")?.resizableImageWithCapInsets(UIEdgeInsetsMake(0, 0, 0, 0))
UITabBar.appearance().selectionIndicatorImage = selectedBG

但是图像并没有填满整个空间 - 见下图:

图像只是一个红色正方形,在82x49px上有一个解决方案,但是如果图像更宽,它仍然无法填满整个空间.希望你们能帮忙 - 谢谢.

Answer 1

如果你想在标签选择上设置红色图像我会建议你设置活动标签栏项目的背景颜色,根据我的意见,每当你可以用编码做你的东西为什么使用图像,所以它更好地设置选择颜色而不是然后图片.您可以使用以下代码实现此目的.

    // 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: .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 = 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
    }
}

希望能帮到你.

或另一种方式在这里:

在tabBarController中,您可以设置默认的UITabBar tintColor,barTintColor,selectionIndicatorImage(这里有点作弊)和图像的renderingMode,请参阅下面的注释:

    class MyTabBarController: UITabBarController, UINavigationControllerDelegate {
    ...
    override func viewDidLoad() {
        ...
            // Sets the default color of the icon of the selected UITabBarItem and Title
            UITabBar.appearance().tintColor = UIColor.red
        // Sets the default color of the background of the UITabBar
        UITabBar.appearance().barTintColor = UIColor.black

        // Sets the background color of the selected UITabBarItem (using and plain colored UIImage with the width = 1/5 of the tabBar (if you have 5 items) and the height of the tabBar)
        UITabBar.appearance().selectionIndicatorImage = UIImage().makeImageWithColorAndSize(color: UIColor.blue, size: CGSize(width: tabBar.frame.width/5, height: tabBar.frame.height))

        // Uses the original colors for your images, so they aren't not rendered as grey automatically.
        for item in (self.tabBar.items)! {
        if let image = item.image {
            item.image = image.withRenderingMode(.alwaysOriginal)
        }
    }
    }
    ...
}

并且您将需要扩展UIImage类以使您需要的大小生成纯色图像:

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

Answer 2

截至2017年,老实说Piyush的回答对我不起作用.在寻找另一种解决方案几天后,我找到了我的 - by subclassing the UITabBarController.

即使旋转,它也适用于多个设备.

备注:

1. 使图像的渲染模式为Original.

2. 如果您以编程方式执行屏幕,请将以下类分配给Storyboard中的UITabBarController或基类.

   //
   //  BaseTabBarController.swift
   //  MyApp
   //
   //  Created by DRC on 1/27/17.
   //  Copyright © 2017 PrettyITGirl. All rights reserved.
   //
   
   import UIKit
   
   class BaseTabBarController: UITabBarController {
   
       let numberOfTabs: CGFloat = 4
       let tabBarHeight: CGFloat = 60
   
       override func viewWillAppear(_ animated: Bool) {
           super.viewWillAppear(animated)
   
           updateSelectionIndicatorImage()
       }
   
       override func viewWillLayoutSubviews() {
           super.viewWillLayoutSubviews()
   
           updateSelectionIndicatorImage()
       }
   
       func updateSelectionIndicatorImage() {
           let width = tabBar.bounds.width
           var selectionImage = UIImage(named:"myimage.png")
           let tabSize = CGSize(width: width/numberOfTabs, height: tabBarHeight)
   
           UIGraphicsBeginImageContext(tabSize)
           selectionImage?.draw(in: CGRect(x: 0, y: 0, width: tabSize.width, height: tabSize.height))
           selectionImage = UIGraphicsGetImageFromCurrentImageContext()
           UIGraphicsEndImageContext()
   
           tabBar.selectionIndicatorImage = selectionImage
       }
   
   }
   

Answer 3

你应该看看这个来调整 tabbarbgtest.png 的大小，然后将图像分配给 SelectionIndicatorImage，你甚至可以在故事板编辑器中执行此操作。