[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

output.gif

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".) スクリーンショット 2020-11-08 1.45.48(2).png

  2. Cochez "Est le contrôleur de vue initiale". スクリーンショット 2020-11-08 1.46.33(2).png

  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

3. Présentation de XLPagerTabStrip

  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

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

2. Installation de ScrollView qui sera la partie de commutation

スクリーンショット 2020-11-08 2.35.37(2).png

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

  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
    }
}

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

Recommended Posts

Implémentation de XLPagerTabStrip avec TabBarController
[Swift 5] Implémentation de l'enregistrement des membres dans Firebase
Implémentation de la fonction de recherche
Implémentation appliquée de l'espace de chat
Mise en œuvre de la fonction de pagénation
Implémentation de la pagination avec gem'kaminari '
[Rails] Implémentation de la fonction glisser-déposer (avec effet)
Implémentation de la suppression d'ajax dans Rails
Implémentation de la fonction de recherche séquentielle
Implémentation d'une fonction similaire (Ajax)
Implémentation de la fonction de prévisualisation d'image
[Java] Implémentation du réseau Faistel
[Rails] Implémentation de la fonction de catégorie
[Java] Simplifiez la mise en œuvre de la gestion de l'historique des données avec Reladomo
Implémentation d'un analyseur de syntaxe mathématique par méthode d'analyse syntaxique descendante récursive (Java)
Mise en œuvre de la fonction déroulante de catégorie
[Rails] Implémentation de la fonction tutoriel
[Rails] Implémentation d'une fonction similaire
Implémentation Java de tri-tree
Implémentation de HashMap avec kotlin
[Détails] Implémentation d'applications grand public avec Kinesis Client Library for Java
[Rails] Implémentation de la fonction coupon (avec fonction de suppression automatique par traitement par lots)
[Rails] Implémentation de la suppression logique utilisateur
[Rails] Implémentation asynchrone de la fonction similaire
Implémentez iOS14 UICollectionView avec CustomCell.
[Rails] Implémentation de la fonction de prévisualisation d'image
Implémentation facile de la navigation de fichiers Android
[Rails] À propos de la mise en œuvre de la fonction similaire
Implémentation du traitement asynchrone dans Tomcat
Implémentation de la validation à l'aide d'expressions régulières
[Rails] Implémentation de fonctions de catégorie plusieurs à plusieurs
Impressions de faire Black Jack-cli avec Ruby
Implémentation par défaut de Object.equals () et Object.hashCode ()
Implémentation d'une fonction similaire en Java