web-dev-qa-db-fra.com

Swift et Xcode - Comment créer des icônes de barre d'onglets personnalisées

J'ai un projet d'application à onglets sur lequel je travaille dans Xcode écrit en Swift (Xcode 6.3 and Swift 1.2). Je rencontre beaucoup de problèmes avec les icônes personnalisées de la barre de tabulation. J'ai conçu une image dans Photoshop (CS6), je l'ai enregistrée au format PNG, redimensionnée à Prepo pour la transformer en 30x30 et je l'ai importée dans Xcode dans la bibliothèque d'actifs. J'ai ensuite défini l'icône tab view controllers sur cette image. Cependant, cela ne se voit pas.

J'ai regardé ces pages mais je n'ai trouvé aucune aide:
https://www.youtube.com/watch?v=4qqqoAWNfZACouleurs des icônes de la barre d'onglets personnaliséeshttp://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/ regarder? v = 4Tj_SeApUrs

Quel est le processus approprié pour créer des icônes de barre d’onglet personnalisées?

iosxcodetabsiconsphotoshop
28
Matt Kelly

Après quelques recherches, j'ai résolu le problème et j'ai donc pensé poster ici au cas où quelqu'un d'autre aurait un problème similaire. Dans Photoshop j'ai fait ce qui suit:

  1. Importation de l'image que je voulais utiliser comme icône de barre d'onglets (c'est plus facile si vous utilisez une image en noir et blanc pour ne pas avoir à supprimer de couleur).
  2. Définissez l'arrière-plan sur 'Transparent' plutôt que sur le blanc.
  3. Suppression de tout le blanc de l'image afin qu'il ne s'agisse que d'une image noire avec un arrière-plan transparent.
  4. Enregistré l'image en tant que .png.
  5. Redimensionner l'image en un carré de dimension 75x75 pixels (et nommé [email protected]), 50x50 pixels (et nommé [email protected]), et 25x25 pixels (et nommé imageName.png).

Dans Xcode j'ai fait ce qui suit:

  1. Faites glisser les images dans Xcode et renommez le groupe d'images en icoImageName.
  2. Sélectionnez l'onglet pour lequel je voulais définir l'image dans le storyboard dans Xcode et définissez le paramètre "Image" (sous "Elément de barre" dans le volet Inspecteur) sur icoImageName. Notez que je n'ai pas défini l'option "Image sélectionnée" sous "Elément de la barre d'onglets" (laissez ce champ vide).

Terminé. 

J'espère que ça aidera quelqu'un. Merci à tous pour leur aide également.

54
Matt Kelly

On dirait que tout est correctement configuré dans xCode. Le problème IS du fichier png que vous utilisez. 

Téléchargez cette image, http://i.stack.imgur.com/zluev.png et voyez si le problème persiste. 

Selon une réponse sur Les images UITabBarItem apparaissent simplement sous forme de bloc gris :

Les icônes de barre de tabulation standard dans iOS sont uniquement rendues à partir du canal alpha. Les couleurs sont complètement ignorées. Au lieu de couleurs, vous pouvez utiliser différentes valeurs alpha conduisant à une nuance de gris différente (ou bleue si sélectionné)

Rendez le fond de vos icônes transparent.

4
MacInnis

Avez-vous créé la vue d'onglet dans le générateur d'interface? Si tel est le cas, les images ayant été ajoutées à l'actif, elles doivent apparaître dans la propriété "Image" de chaque bouton d'onglet situé dans la barre latérale de l'inspecteur. De plus, je sais que vous avez déjà posté une tonne de tutoriels, mais celui-ci est plutôt à jour et l'explique à fond: http://codewithchris.com/ios-tab-bar-app/

1
Luke

 enter image description here 

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


}
0
Nikunj Patel