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

Question

我有一个选项卡式应用程序项目，我正在 Xcode 中使用 Swift (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=19333
http://www.appcoda.com/ios-programming-how-to-customize-tab-bar-background-appearance/ https://www.youtube.com/watch?v=4Tj_SeApUrs

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

Answer 1

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

Answer 2

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

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

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

The standard tabbar icons in iOS are rendered solely from the alpha channel. Colors are ignored completely. Instead of colors you can use different alpha values that lead to a different shade of gray (or blue if selected)

Make the background of your icons transparent.

Answer 3

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

导入了我想用作标签栏图标的图像（如果你使用黑白图像会更容易，这样你就不必删除颜色）。
将背景设置为 'Transparent' 而不是白色。
删除了图像中的所有白色，使其只是具有透明背景的黑色图像。
已将图像另存为 .png。
将图像调整为尺寸为 75x75 pixels（并命名为 imageName@3x.png）、50x50 pixels（并命名为 imageName@2x.png）和 25x25 pixels 的正方形（并命名为 imageName.png）

在 Xcode 我做了以下事情：

将图像拖入 Xcode 并将图像组重命名为 icoImageName。
在 Xcode 中选择了我想在情节提要中设置图像的选项卡，并将 'Image'（在检查器窗格中的 'Bar Item' 下）设置为 icoImageName .请注意，我没有在 'Tab Bar Item' 下设置 'Selected Image'（留空）。

完成。

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

Answer 4

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


}

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

Swift and Xcode - How to Create Custom Tab Bar Icons

photoshop

xcode

icons

tabs

ios