Swift 和 Xcode - 如何创建自定义标签栏图标

Posted 2023-02-16

【中文标题】Swift 和 Xcode - 如何创建自定义标签栏图标

【英文标题】：Swift and Xcode - How to Create Custom Tab Bar Icons

【发布时间】：2015-08-06 10:23:32

【问题描述】：

我有一个使用 Swift 编写的 Xcode 选项卡式应用程序项目 (Xcode 6.3 and Swift 1.2)。我在使用自定义标签栏图标时遇到了很多麻烦。我在 Photoshop (CS6) 中设计了一个图像，将其保存为 PNG，在 Prepo 中将其大小调整为 30x30 并将其导入到资产库中的 Xcode 中。然后我将tab view controllers 图标设置为该图像。但是，它没有显示出来。

我查看了这些页面，但没有找到任何帮助：https://www.youtube.com/watch?v=4qqqoAWNfZA Custom tab bar icon colors http://www.raywenderlich.com/forums/viewtopic.php?f=2&t=19333http://www.appcoda.com/ios-programming-how-to-customize-tab-bar-background-appearance/ https://www.youtube.com/watch?v=4Tj_SeApUrs

创建自定义标签栏图标的正确过程是什么？

【问题讨论】：

当我在 sim 中运行应用程序时，选择标签时标签栏图标为空白，选择其他标签时为灰色方块。

【参考方案1】：

class ViewController: UIViewController 

    @IBOutlet var btnHome : UIButton!
    @IBOutlet var btnInvoice : UIButton!
    @IBOutlet var btnSettings : UIButton!
    @IBOutlet var btnMyOrder : UIButton!
    @IBOutlet var btnLogout : UIButton!

    @IBOutlet weak var viewContainer: UIView!

    var navController : UINavigationController!

    var selectedIndex : Int! = 0

    var arrTabColor  = [UIColor(red: 35.0/255.0, green: 93.0/255.0, blue: 175.0/255.0, alpha: 1.0),
                        UIColor(red: 29.0/255.0, green: 86.0/255.0, blue: 167.0/255.0, alpha: 1.0),
                        UIColor(red: 35.0/255.0, green: 93.0/255.0, blue: 175.0/255.0, alpha: 1.0),
                        UIColor(red: 29.0/255.0, green: 86.0/255.0, blue: 167.0/255.0, alpha: 1.0),
                        UIColor(red: 35.0/255.0, green: 93.0/255.0, blue: 175.0/255.0, alpha: 1.0)]

    var arrTabIdentiFierVC       = ["FirstVC","SecondVC","FirstVC","FirstVC","SecondVC"]


    // MARK: - Life Cycle

    override func viewDidLoad()
    
        super.viewDidLoad()
        setTabbarImage(0)

        // Do any additional setup after loading the view, typically from a nib.
    

    override func didReceiveMemoryWarning() 
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    

    func setTabBarClicked(_ storyIdentifier : String,identifier : String)
    
        let aStoryboard  = UIStoryboard.init(name: storyIdentifier, bundle: nil)
        let newViewController = aStoryboard.instantiateViewController(withIdentifier: identifier)

        navController = UINavigationController(rootViewController: newViewController)
        self.addChildViewController(navController)

        navController.view.frame = viewContainer.frame
        newViewController.view.frame = viewContainer.frame

        self.viewContainer.addSubview(navController.view)
        newViewController.didMove(toParentViewController: self)


    

    func setTabbarImage(_ selectedIndex : Int!)
    
        btnHome.backgroundColor = arrTabColor[0]
        btnInvoice.backgroundColor = arrTabColor[1]
        btnSettings.backgroundColor = arrTabColor[2]
        btnMyOrder.backgroundColor = arrTabColor[3]
        btnLogout.backgroundColor = arrTabColor[4]

        let selectedColor = UIColor(red: 40/255, green: 142/255, blue: 206.0/255, alpha: 1.0)

        if selectedIndex == 0
        
            btnHome.backgroundColor = selectedColor

        
        else if selectedIndex == 1
        
            btnInvoice.backgroundColor = selectedColor

        
        else if selectedIndex == 2
        
            btnSettings.backgroundColor = selectedColor

        
        else if selectedIndex == 3
        
            btnMyOrder.backgroundColor = selectedColor
        
        else if selectedIndex == 4
        
            btnLogout.backgroundColor = selectedColor

        
    

    // MARK: - Action Method
    @IBAction func HomeClicked(_ sender : AnyObject?)
    

        setTabbarImage(0)

        setTabBarClicked("Main",identifier: arrTabIdentiFierVC[0])

    
    @IBAction func InvoiceClicked(_ sender : AnyObject?)
    
        setTabbarImage(1)

        setTabBarClicked("Main",identifier: arrTabIdentiFierVC[1])

    
    @IBAction func SettingClicked(_ sender : AnyObject?)
    
        setTabbarImage(2)
        setTabBarClicked("Main",identifier: arrTabIdentiFierVC[2])


    
    @IBAction func MyorderClicked(_ sender : AnyObject?)
    
        setTabbarImage(3)
        setTabBarClicked("Main",identifier: arrTabIdentiFierVC[3])

    
    @IBAction func logoutClicked(_ sender : AnyObject?)
    
        setTabbarImage(4)


        let alert = UIAlertController(title: "", message: "Are you sure want to logout?", preferredStyle: UIAlertControllerStyle.alert)

        let CancelAction = UIAlertAction(title: "NO", style: .default)  (action:UIAlertAction!) in

        
        alert.addAction(CancelAction)

        let OKAction = UIAlertAction(title: "YES", style: .default)  (action:UIAlertAction!) in

          //  var isNav : Bool! = false

            //for objChild in (self.parent?.childViewControllers)!
           // 
//                if objChild.isKind(of: LoginVC.self)
//                
//                    self.navigationController!.popToViewController(objChild, animated: true)
//                    CommonMethods.removeCustomObject(Constants.kUserProfile)
//                    
//                    isNav = true
//                    break
//                    
//                
           // 
           // if !isNav
           // 
//                CommonMethods.removeCustomObject(Constants.kUserProfile)
//                let aNavController = (AppDelegate.getDelegate().window!.rootViewController! as! UINavigationController)
//                let storyboard = UIStoryboard(name: "Main", bundle: nil)
//                var aVCObj = UIViewController()
//                aVCObj = storyboard.instantiateViewController(withIdentifier: "LoginVC")
//                var aMutArr = aNavController.viewControllers
//                aMutArr.insert(aVCObj, at: 0)
//                aNavController.viewControllers = aMutArr
//                aNavController.popToRootViewController(animated: true)
          //  
        
        alert.addAction(OKAction)
        self.present(alert, animated: true, completion: nil)
    

    // MARK: - Action Method

【参考方案2】：

听起来您已经在 xCode 中正确设置了所有内容。问题是您正在使用的 png 文件。

下载这张图片，http://i.stack.imgur.com/zluev.png，看看问题是否仍然存在。

根据UITabBarItem images just appear as a grey block上的回答：

iOS 中的标准标签栏图标仅从 Alpha 通道呈现。颜色被完全忽略。您可以使用不同的 alpha 值代替颜色，从而产生不同的灰色阴影（或蓝色，如果选择）

使图标的背景透明。

【参考方案3】：

经过一番研究，我解决了这个问题，所以我想我会在这里发帖，以防其他人有类似的问题。在 Photoshop 中，我做了以下操作：

导入了我想用作标签栏图标的图像（如果您使用黑白图像更容易，这样您就不必去除颜色）。 将背景设置为“透明”而不是白色。 从图像中删除所有白色，使其成为具有透明背景的黑色图像。 将图像保存为 .png。 将图像大小调整为正方形，尺寸为75x75 pixels（并命名为[e-mail]）、50x50 pixels（并命名为[e-mail]）和25x25 pixels（并命名为imageName.png）

在 Xcode 中，我做了以下操作：

将图片拖入Xcode，将图片组重命名为icoImageName。 在 Xcode 的情节提要中选择了我想为其设置图像的选项卡，并将“图像”（在检查器窗格中的“条形项目”下）设置为 icoImageName。请注意，我没有在“标签栏项目”下设置“选定图像”（留空）。

完成。

我希望这对某人有所帮助。也感谢大家的帮助。

【讨论】：

从 Xcode 8.2（2017 年 3 月）开始，您可以在 Attributes Inspector 下的第 7 步中找到“Bar Item”类别，而不是 Inspector Pane。

【参考方案4】：

您是否在界面生成器中创建了选项卡视图？如果是这样，由于您将图像添加为资产，它们应该显示在检查器侧边栏下每个选项卡按钮的“图像”属性中。另外，我知道你已经发布了大量的教程，但是这个是最新的并且解释得很透彻：http://codewithchris.com/ios-tab-bar-app/

【讨论】：

谢谢@Luke。是的，我看过那个教程，但它没有详细介绍如何创建图像。是的，我在界面构建器中创建了选项卡视图，并在检查器侧边栏中将“选定图像”和“图像”设置为 PNG。不幸的是，这仍然会导致上述结果。

@MattKelly 这是一个奇怪的问题，但是当您在图像属性中输入图像名称时，您的图像名称是否自动完成？如果不是，它可能没有正确添加到资产文件中

@MattKelly 可以发一张 xcasset 文件的截图吗？