[SWIFT] Implementierung von XLPagerTabStrip mit TabBarController

Einführung

Bei Verwendung der von Swift erstellten iOS-Bibliothek namens XLPagerTabStrip habe ich sie in Verbindung mit "TabBarController" implementiert. Ich bin ein wenig verstopft mit den Einstellungen in "Storyboard", also werde ich es als Memorandum veröffentlichen.

Betriebsumgebung

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

Bildschirm nach der Montage

Montagevorgang

1. Vorbereitung des TabBarControllers

1. Löschen Sie den ursprünglichen "ViewController" von "Main.storyboard" und fügen Sie "TabBarController" hinzu. Bitte löschen Sie auch den angehängten "ViewController". (Dies ist der Grund für einen ViewController für ein Storyboard.)

2. Aktivieren Sie "Ist Initial View Controller".

3. Erstellen Sie "MainTabBarController.swift" und weisen Sie es "Class" von "Main.storyboard" zu.

MainTabBarController.swift

class MainTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()
        //Bereiten Sie eine Variable vor, um den Ansichts-Controller für jeden Bildschirm zu speichern
        var viewControllers = [UIViewController]()

        //Einstellungen für jeden Bildschirm(Registerkartenbild usw.)
        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. Vorbereitung von ViewController für jeden Bildschirm

• Bereiten Sie das obige "tab1VC" als "Bookmarks.storyboard" und "tab2VC" als "Favorites.storyboard" vor. Stellen Sie für jeden "UINavigationController" ein und geben Sie ihm einen Titel, damit Sie ihn unterscheiden können.

3. Einführung von "XLPagerTabStrip"

• Verwenden Sie CocoaPods.

1. Öffnen Sie ein Terminal und navigieren Sie mit "CD-Zieldatei".
2. Erstellen Sie eine Poddatei mit Pod darin
3. Fügen Sie Folgendes zu podfile hinzu, speichern Sie es und schließen Sie mit pod install ab.

podfile.rb

pod 'XLPagerTabStrip'

4. Bereiten Sie die Verwaltungsklasse "ButtonBarPagerTabStripViewController" vor

• Bereiten Sie eine Klasse vor, die "ButtonBarPagerTabStripViewController" erbt, die "ViewController" verwaltet. Dieses Mal ist "Lesezeichen" die Verwaltungsquelle. Erstellen Sie "BookmarksViewController.swift".

BookmarksViewController.swift

import UIKit
import XLPagerTabStrip

//Schreiben Sie die Vererbungsquelle neu (UIViewController → ButtonBarPagerTabStripViewController).
class BookmarksViewController: ButtonBarPagerTabStripViewController {

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

    override func viewControllers(for pagerTabStripController: PagerTabStripViewController) -> [UIViewController] {
        //Verarbeitung zur Rückgabe eines Managed View Controllers
        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 von "Collection View", die zum Schaltflächenteil wird

• Platzieren Sie die "Sammlungsansicht", die der Schaltflächenteil sein wird, und stellen Sie das "AutoLayout" wie in der Abbildung unten gezeigt ein. Lassen Sie uns Cell löschen.

• Verknüpfen Sie die Klasse "Sammlungsansicht" mit "ButtonBarView" und setzen Sie das Modul auf "XLPagerTabStrip".

• Klicken Sie mit der rechten Maustaste auf "Sammlungsansicht". Ziehen Sie das "New Referencing Outlet" von den "Referencing Outlets" auf den "ViewController" und wählen Sie "ButtonBarView".

2. Installation von "ScrollView", das der Schaltteil sein wird

• Platzieren Sie die "ScrollView", die das Schaltteil sein wird, und stellen Sie das "AutoLayout" ein, wie in der Abbildung unten gezeigt.
• Deaktivieren Sie "Inhaltslayout-Anleitungen", da Sie mehrdeutige Layouts und Warnungen erhalten.

• Klicken Sie mit der rechten Maustaste auf "ScrollView". Ziehen Sie das "New Referencing Outlet" von den "Referencing Outlets" auf den "ViewController" und wählen Sie "containerView".

• Wenn die Verbindung korrekt ist, ändert sich die Anzeige "ScrollView" in "ContainerView".

5. Vorbereitung der verwalteten "View Controller"

• Es wird ein "ViewController", der durch Wischen oder Drücken einer Taste übergeht.
• Bereiten Sie die folgenden drei UIViewController vor, die das IndicatorInfoProvider-Protokoll implementieren.

1. Bereiten Sie "First.storyboard" und "FirstViewController" vor. (Die Hintergrundfarbe von "Storyboard" ist "Rot")
2. Bereiten Sie "Second.storyboard" und "SecondViewController" vor. (Die Hintergrundfarbe von "Storyboard" ist "blau")
3. Bereiten Sie Third.storyboard und ThirdViewController vor. (Die Hintergrundfarbe von "Storyboard" ist "Grün")

FirstViewController.swift

import UIKit
import XLPagerTabStrip

class FirstViewController: UIViewController {
    
    //Dies wird für den Schaltflächentitel verwendet
    var itemInfo: IndicatorInfo = "First"

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

}

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

• Platzieren Sie Label und setzen Sie Text auf First, Font auf 24 und AutoLayout.

• Legen Sie die Klassenzuweisung und die Storyboard-ID fest.

6. Das Aussehen und Verhalten der buttonBar wurde hinzugefügt

MainTabBarController.swift

import UIKit
import XLPagerTabStrip

class BookmarksViewController: ButtonBarPagerTabStripViewController {

    override func viewDidLoad() {
        //Verarbeitung über die Benutzeroberfläche des Bildschirms
        setupUI()
        super.viewDidLoad()
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        //ChangeCurrentIndexProgressive (0th → 1st → 0th) zwangsweise neu auswählen und betreiben
        moveToViewController(at: 1, animated: false)
        moveToViewController(at: 0, animated: false)
    }
    
    func setupUI() {
        //Hintergrundfarbe der gesamten ButtonBar
        settings.style.buttonBarBackgroundColor = UIColor.white
        //Hintergrundfarbe von ButtonBarItem
        settings.style.buttonBarItemBackgroundColor = UIColor.white
        //ButtonBarItem-Textfarbe
        settings.style.buttonBarItemTitleColor = UIColor.lightGray
        //ButtonBarItem Schriftgröße
        settings.style.buttonBarItemFont = .boldSystemFont(ofSize: 14)
        //Die Farbe des ausgewählten ButtonBar-Indikators
        settings.style.selectedBarBackgroundColor = UIColor.black
        //Dicke der ausgewählten ButtonBar-Anzeige
        settings.style.selectedBarHeight = 2.0
        //Linker Rand der ButtonBar
        settings.style.buttonBarLeftContentInset = 8
        //Der Rand ganz rechts von ButtonBar
        settings.style.buttonBarRightContentInset = 8
        //Ränder in Button
        settings.style.buttonBarItemLeftRightMargin = 32
        //Verhalten beim Wechseln von Seiten durch Wischen oder Tippen auf ButtonBarItem
        changeCurrentIndexProgressive = { oldCell, newCell, progressPercentage, changeCurrentIndex, animated in
            //Entpacken Zelle geändert vorher oder nachher ausgewählt
            guard changeCurrentIndex, let oldCell = oldCell, let newCell = newCell else { return }
            //Geben Sie vor der Auswahl den Status der Zelle an
            oldCell.label.textColor = UIColor.lightGray
            //Geben Sie den Status der ausgewählten Zelle an
            newCell.label.textColor = UIColor.black
        }
    }
    
    override func viewControllers(for pagerTabStripController: PagerTabStripViewController) -> [UIViewController] {
        //Verarbeitung zur Rückgabe eines Managed View Controllers
        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
    }

}

Referenz

• UITabBarController und UINavigationController im Code erstellen
• [Swift 5] Verwendung (Einführung) der Bibliothek "XLPagerTabStrip"