[Swift] Comment connecter TabBar avec Storyboard Reference et également utiliser NavigationController

Je l'ai trouvé en le recherchant ... mais quelque chose s'est mal passé

Je voulais ajouter des fonctions à ceci et à cela, mais quand j'ai voulu le faire avec un storyboard aussi propre que possible, j'ai pas mal trébuché, alors je vais le laisser ici. J'espère que cela vous aidera à lire ceci.

• J'écrirai en détail pour les débutants autant que possible.

TabBar est parfaitement affiché à l'aide de Storyboard Reference

En premier lieu, l'idéal est un Storyboard One ViewController, mais TabBar qui doit connecter plusieurs Storyboards. Sauf pour ceux qui écrivent tout en code, il y a un risque que le Storyboard soit foiré pour les débutants. C'est là qu'intervient la référence Storyboard. C'est une fonction qui vous permet de vous référer au Storyboard, et comme l'affichage est petit, l'écran est soigné.

C'est une histoire burlesque, mais quand j'ai vraiment commencé à le faire avec xcode, quand j'ai emballé tous les contrôleurs de vue dans un seul Storyboard, il est devenu trop lourd et je ne pouvais pas bien travailler.

manière

1. Préparation du Storyboard et de ViewController

Tout d'abord, créez un nouveau projet à partir de xcode et choisissez une application simple. Ici, ProdactName est défini sur TabTest. (Le nom peut être n'importe quoi) L'interface doit être Storyboard. Je ne connais pas Swift UI. (Pendant l'étude)

(Je le cache car le nom est embarrassant)

Ensuite, quittez le main.Storyboard depuis le début et créez deux Storyboards que vous souhaitez basculer. Vous pouvez créer un nouveau fichier dès que vous appuyez sur Commande + N;) Ici, j'ai réalisé des storyboards nommés First et Seconde. Ces deux sont encore vides, alors appuyez sur [+] en haut à droite et faites glisser et déposez [View Controller]. Ensuite, créez à nouveau un nouveau fichier pour écrire le contenu de ce contrôleur d'affichage. Sélectionnez maintenant "Swift File". "Coco a touch class" est plus facile, mais j'ai choisi cela pour m'habituer à écrire ne serait-ce qu'un code. C'est une phrase fixe, vous pouvez donc vous en souvenir facilement;) Nommez-les FirstViewController et SecondViewController selon le Storyboard. Je pense que ça ressemble à ça.

2. Ecrire le code dans le contrôleur de vue

Maintenant écrivons le code. Veuillez supprimer le `` Import Foundation '' qui est entré en premier. Alors, souvenez-vous du code ci-dessous comme une phrase fixe pour les salutations quotidiennes "Bonjour".

FirstViewController.swift

import UIKit

class FirstViewController: UIViewController {
    override func viewDidLoad() {
    }
}

C'est la partie qui est automatiquement décrite si vous sélectionnez "Cocoa Touch Class" lors de la création d'un nouveau fichier plus tôt. Mais je pense qu'écrire par moi-même aura un effet positif sur l'avenir. (Au moins, je suis à l'aise avec la création d'extensions? C'est psychologiquement plus facile lorsque vous écrivez différentes classes dans le même fichier de contrôleur de vue.)

L'histoire a mal tourné.

Pour expliquer brièvement, importez (chargez) d'abord un kit (boîte à outils) contenant divers outils utiles (outils) appelés UIKit. Créez ensuite une classe portant le même nom que le fichier pour améliorer la lisibilité. En outre, cette classe est définie comme une classe qui fonctionne comme un UIViewController. Plutôt que de commencer à écrire "override ..." pour la partie viewDidLoad () depuis le début, si vous écrivez à propos de "viewd ...", la fonction de compensation xcode fonctionnera et vous pourrez facilement l'écrire. Cette viewDidLoad () est une fonction qui n'est chargée que la première fois que l'écran est affiché, et il arrive souvent que divers réglages initiaux soient effectués. super.viewDidLoad () est ... super.

3. Définissez la classe créée dans le storyboard

Définissez la classe que vous avez écrite avec le contrôleur de vue placé sur le storyboard.

Si vous cliquez sur la barre au-dessus du contrôleur de vue, vous verrez quelque chose comme un écran de détails sur la droite. Définissons ici le FirstViewController créé précédemment dans la classe Custom. Réglez la même chose pour Second. En faisant cela, le code sera lié et le programme sera reflété.

De plus, appuyez sur le bouton comme indiqué dans la figure ci-dessous pour activer [Is Initial View Controller]. Bien que rédigé à la légère, il est essentiel.

4. Installez TabBarController

Je vais utiliser le Main.storyboard de gauche ici. (Si vous vous y habituez, vous devriez créer un nouveau TabBar.storyboard) En appuyant dans l'ordre indiqué sur la figure, vous pouvez installer TabBar sur le contrôleur de vue existant. Le côté gauche est TabBarController et le côté droit est ViewController, mais vous n'avez pas besoin du côté droit, alors supprimez-le avec delete. Seul TabBar reste.

5. Installation et connexion de Storyboard Reference

Appuyez sur [+] en haut à droite et faites glisser et déposez la référence du storyboard. Vous pouvez vous connecter en déplaçant la souris sur le TabBarController, en maintenant la commande enfoncée et en la maintenant enfoncée, et en l'amenant à la référence du storyboard. Ici, vous aurez le choix de la façon de vous connecter, mais veuillez choisir [Relation segue]. Répétez cette opération une fois de plus pour connecter les deux références Storyboard.

6. Lier la référence au storyboard et le storyboard

Cliquez sur Référence du Storyboard pour afficher les éléments affichés dans les détails à droite. Il y a un premier et un deuxième créés dans le menu déroulant du storyboard en haut, alors définissez chacun.

La barre d'onglets est maintenant connectée à chaque Storyboard. C'est également une bonne idée de l'exécuter une fois et de voir s'il y a des erreurs.

7. Définissez tabItem pour chaque storyboard

Comme vous pouvez le voir de la personne honnête qui a couru, l'écran est d'un blanc pur. Vous pouvez voir une barre légèrement colorée en bas, mais aucun élément n'est affiché. Mettons BarItem sur chaque storyboard. Faites glisser et déposez [Élément de la barre d'onglets] de [+] vers First.storyboard. Comme il est installé arbitrairement en bas, lorsque vous cliquez dessus, des éléments tels que le titre et l'image apparaîtront dans les détails sur le côté droit. Veuillez le saisir correctement. Il existe de nombreuses images préparées par xcode, alors choisissez-en une appropriée. Si vous pouvez également définir la seconde, essayez à nouveau d'exécuter. La barre d'onglets a été configurée et peut être commutée. (Quelle que soit la touche sur laquelle vous appuyez, elle est blanche? C'est parce que les deux contrôleurs de vue ont un écran blanc;)

8. Installation du contrôleur de navigation

Lorsque vous arrivez ici, le but est juste devant vous. Faites de votre mieux un peu plus! Revenez à Main.storyboard et cliquez sur Référence du Storyboard. Vous souvenez-vous qu'il y avait un contrôleur de navigation dans le module Embed In auquel le contrôleur TabBar était précédemment attaché? Connectez le contrôleur de navigation à chaque référence de storyboard. Soudain, un gros NavigationController sort et je suis surpris, mais ça va.

9. Paramètres de NavigationController

Je n'ai pas écrit beaucoup de code, alors écrivons le code de manière cool à la fin.

FirstViewController.swift

import UIKit

class FirstViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setNavigation()
    }
    
    private func setNavigation(){
        navigationItem.title = "First"
    }
}

SecondViewController.swift

import UIKit

class SecondViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setNavigation()
    }
    
    private func setNavigation(){
        navigationItem.title = "Second"
    }
}

Appelez une fonction appelée setNavigation () dans viewDidLoad (). Cela permet de voir plus facilement ce que fait viewDidLoad et ce que fait l'appelé. S'il vous plaît google pour privé.

Essayez de courir avec ça. Le premier et le deuxième sont affichés en haut de l'écran!

Toutes nos félicitations! J'ai fait de mon mieux! Vous le cherchez depuis trois jours et vous êtes arrivé en quelques minutes! !!

À la fin

C'était une tension étrange, probablement parce que j'ai écrit la plupart de cet article à 3 heures au milieu de la nuit. Quand je regarde les articles Comment faire à l'étranger, je les encourage souvent comme ça, et je les écris souvent comme s'ils se parlaient, alors je l'ai écrit comme ça. Depuis que j'ai posté beaucoup de sukusho, je suis sincèrement désolé d ... L'article est devenu long.

Je suis encore un débutant, donc si vous faites une erreur ou avez un meilleur moyen, j'aimerais vous apprendre.

Comme je l'ai écrit au début, j'espère que cet article aidera quelqu'un.

Coding with me!;)