[SWIFT] Implémentation de XLPagerTabStrip avec TabBarController

introduction

Lors de l'utilisation de la bibliothèque iOS faite par Swift appelée XLPagerTabStrip, je l'ai implémentée en conjonction avec TabBarController. Je suis un peu obstrué par les paramètres du storyboard, donc je le posterai comme mémorandum.

Environnement d'exploitation

【Xcode】Version 12.0.1 【Swift】Version 5.3 【CocoaPods】version 1.9.3

Écran après montage

Procédure de montage

1. Préparation de TabBarController

1. Supprimez le «ViewController» d'origine de «Main.storyboard» et ajoutez «TabBarController». Veuillez également supprimer le ViewController joint. (C'est la raison pour laquelle un "ViewController" pour un "storyboard".)

2. Cochez "Est le contrôleur de vue initiale".

3. Créez MainTabBarController.swift et affectez-le à Class de Main.storyboard.

MainTabBarController.swift

class MainTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()
        //Préparez une variable pour stocker le contrôleur de vue qui sera chaque écran
        var viewControllers = [UIViewController]()

        //Paramètres pour chaque écran(image de l'onglet, etc.)
        let tab1VC = UIStoryboard(name: "Bookmarks", bundle: nil).instantiateInitialViewController()
        tab1VC?.tabBarItem = UITabBarItem(tabBarSystemItem: .bookmarks, tag: 0)
        viewControllers.append(tab1VC!)

        let tab2VC = UIStoryboard(name: "Favorites", bundle: nil).instantiateInitialViewController()
        tab2VC?.tabBarItem = UITabBarItem(tabBarSystemItem: .favorites, tag: 0)
        viewControllers.append(tab2VC!)
        
        self.setViewControllers(viewControllers, animated: false)
    }
}

2. Préparation de ViewController pour chaque écran

• Préparez le tab1VC ci-dessus comme Bookmarks.storyboard et tab2VC comme Favorites.storyboard. Définissez UINavigationController pour chacun et donnez-lui un titre afin que vous puissiez le distinguer.

3. Présentation de XLPagerTabStrip

• Utilisez CocoaPods.

1. Ouvrez un terminal et naviguez avec cd target file.
2. Créez un podfile avec pod à l'intérieur
3. Ajoutez ce qui suit à podfile, enregistrez-le et complétez avec pod install.

podfile.rb

pod 'XLPagerTabStrip'

4. Préparez la classe de gestion ButtonBarPagerTabStripViewController

• Préparez une classe qui hérite de ButtonBarPagerTabStripViewController qui gère ViewControllers. Cette fois, «Bookmarks» est la source de gestion. Créez BookmarksViewController.swift.

BookmarksViewController.swift

import UIKit
import XLPagerTabStrip

//Réécrire la source d'héritage (UIViewController → ButtonBarPagerTabStripViewController)
class BookmarksViewController: ButtonBarPagerTabStripViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func viewControllers(for pagerTabStripController: PagerTabStripViewController) -> [UIViewController] {
        //Traitement pour renvoyer un contrôleur de vue gérée
        let firstVC = UIStoryboard(name: "First", bundle: nil).instantiateViewController(withIdentifier: "First")
        let secondVC = UIStoryboard(name: "Second", bundle: nil).instantiateViewController(withIdentifier: "Second")
        let thirdVC = UIStoryboard(name: "Third", bundle: nil).instantiateViewController(withIdentifier: "Third")
        let childViewControllers:[UIViewController] = [firstVC, secondVC, thirdVC]
        return childViewControllers
    }

}

1. Installation de Collection View qui devient la partie bouton

• Placez la Vue de la collection qui sera la partie bouton et définissez la Mise en page automatique comme indiqué dans l'image ci-dessous. Supprimons Cell.

• Associez la classe de Collection View à ButtonBarView et définissez Module sur XLPagerTabStrip.

• Cliquez avec le bouton droit de la souris sur «Vue de la collection». Faites glisser le New Referencing Outlet depuis les Referencing Outlets vers le ViewController et sélectionnez ButtonBarView.

2. Installation de ScrollView qui sera la partie de commutation

• Placez le ScrollView qui sera la partie de commutation et définissez le AutoLayout comme indiqué dans l'image ci-dessous.
• Décochez «Guides de mise en page du contenu» car vous obtiendrez des mises en page et des avertissements ambigus.

• Faites un clic droit sur ScrollView. Faites glisser le New Referencing Outlet des Referencing Outlets vers le ViewController et sélectionnez containerView.

• Si la connexion est correcte, l'affichage ScrollView changera en ContainerView.

5. Préparation des «contrôleurs de vue» gérés

• Il devient un ViewController qui transite en faisant glisser ou en appuyant sur un bouton.
• Préparez les trois UIViewControllers suivants qui implémentent le protocole IndicatorInfoProvider.

1. Préparez «First.storyboard» et «FirstViewController». (La couleur d'arrière-plan du storyboard est rouge)
2. Préparez "Second.storyboard" et "SecondViewController". (La couleur d'arrière-plan du «storyboard» est «bleu»)
3. Préparez "Third.storyboard" et "ThirdViewController". (La couleur d'arrière-plan du storyboard est verte)

FirstViewController.swift

import UIKit
import XLPagerTabStrip

class FirstViewController: UIViewController {
    
    //Ceci est utilisé pour le titre du bouton
    var itemInfo: IndicatorInfo = "First"

    override func viewDidLoad() {
        super.viewDidLoad()
    }

}

extension FirstViewController: IndicatorInfoProvider {
    func indicatorInfo(for pagerTabStripController: PagerTabStripViewController) -> IndicatorInfo {
        return itemInfo
    }
}

• Placez Label et définissez Text sur First, Font sur 24 et AutoLayout.

• Définissez l'affectation Classe et l'ID Storyboard`.

6. Ajout de l'apparence et du comportement de la ButtonBar

MainTabBarController.swift

import UIKit
import XLPagerTabStrip

class BookmarksViewController: ButtonBarPagerTabStripViewController {

    override func viewDidLoad() {
        //Traitement de l'interface utilisateur d'écran
        setupUI()
        super.viewDidLoad()
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        //Resélectionnez de force et activez le changementCurrentIndexProgressive (0th → 1st → 0th)
        moveToViewController(at: 1, animated: false)
        moveToViewController(at: 0, animated: false)
    }
    
    func setupUI() {
        //Couleur d'arrière-plan de l'ensemble de ButtonBar
        settings.style.buttonBarBackgroundColor = UIColor.white
        //Couleur d'arrière-plan de ButtonBarItem
        settings.style.buttonBarItemBackgroundColor = UIColor.white
        //Couleur du texte ButtonBarItem
        settings.style.buttonBarItemTitleColor = UIColor.lightGray
        //ButtonBarItem taille de police
        settings.style.buttonBarItemFont = .boldSystemFont(ofSize: 14)
        //La couleur de l'indicateur ButtonBar sélectionné
        settings.style.selectedBarBackgroundColor = UIColor.black
        //Épaisseur de l'indicateur ButtonBar sélectionné
        settings.style.selectedBarHeight = 2.0
        //Marge la plus à gauche de ButtonBar
        settings.style.buttonBarLeftContentInset = 8
        //Marge la plus à droite de ButtonBar
        settings.style.buttonBarRightContentInset = 8
        //Marges dans le bouton
        settings.style.buttonBarItemLeftRightMargin = 32
        //Comportement lors du changement de page en faisant glisser ou en appuyant sur ButtonBarItem
        changeCurrentIndexProgressive = { oldCell, newCell, progressPercentage, changeCurrentIndex, animated in
            //Développer la cellule modifiée ou sélectionnée avant et après
            guard changeCurrentIndex, let oldCell = oldCell, let newCell = newCell else { return }
            //Spécifiez l'état de la cellule avant la sélection
            oldCell.label.textColor = UIColor.lightGray
            //Spécifiez l'état de la cellule sélectionnée
            newCell.label.textColor = UIColor.black
        }
    }
    
    override func viewControllers(for pagerTabStripController: PagerTabStripViewController) -> [UIViewController] {
        //Traitement pour renvoyer un contrôleur de vue gérée
        let firstVC = UIStoryboard(name: "First", bundle: nil).instantiateViewController(withIdentifier: "First")
        let secondVC = UIStoryboard(name: "Second", bundle: nil).instantiateViewController(withIdentifier: "Second")
        let thirdVC = UIStoryboard(name: "Third", bundle: nil).instantiateViewController(withIdentifier: "Third")
        let childViewControllers:[UIViewController] = [firstVC, secondVC, thirdVC]
        return childViewControllers
    }

}

référence

• Créer UITabBarController et UINavigationController dans le code
• [Swift 5] Comment utiliser (introduire) la bibliothèque "XLPagerTabStrip"