Sådan implementeres Android-lignende fanebladlayouts i iOS ved hjælp af hurtig 3

Traditionelle faner i iOS er placeret i bunden af ​​din skærm, på Android-applikationer på den anden side, dine faner er øverst. I dag vil jeg skrive et trin for trin-tutorial om, hvordan man opnår den Android-lignende version på en iOS-applikation ved hjælp af et open source-bibliotek kaldet XLPagerTabStrip.

Nedenfor er billeder af, hvad vi prøver at opnå.

Introduktion.

XLPagerTabStrip er en Container View Controller, der giver os mulighed for let at skifte mellem en samling af visningskontrollere. Pan-gestus kan bruges til at gå videre til næste eller forrige visningskontroller. Det viser en interaktiv indikator for de nuværende, forrige næste børnesynkontrollere.

SÅ grundlæggende, for at opnå layoutet, har vi en 1 overordnet visningskontroller, der huser 2 eller flere børnevisningskontrollere. Biblioteket giver 4 forskellige måder at vise børnene synskontrollere på, men i dag fokuserer vi på den mest populære, knapbjælke, du skal være stødt på det, hvis du bruger apps som sådan som instagram, youtube, skype og mange andre ( se ovenstående billeder).

Konfigurer Xcode-projektet

Hvis du integrerer i et eksisterende projekt, kan du springe dette trin over.

  • Opret et nyt xcode-projekt
  • Vælg enkelt visningsprogram
  • Navngiv dit projekt, og udfyld de resterende felter

Installation

Vi installerer XLPagerTabStrip via cocopods.

  • For det første skal du afslutte XCode helt, og åbne terminalen
  • Fra terminalen skal du navigere til dit projektmappe, og køre:
pod init
  • Hvis du nu ser inde i din projektfil, skal du se en podfil, der er åben med enhver teksteditor
Fravælg use_frameworks! og tilføj ppod 'XLPagerTabStrip',: git => 'https://github.com/KelvinJin/XLPagerTabStrip',: branch => 'swift3'

Hvis du startede med et nyt projekt, skal din podefile se sådan ud.

# Fjern denne linie for at definere en global platform for dit projekt
# platform: ios, '8.0'
# Fjern denne linie, hvis du bruger Swift
use_frameworks!
målrette mod 'AndroidTabs'
pod 'XLPagerTabStrip',: git => 'https://github.com/KelvinJin/XLPagerTabStrip',: branch => 'swift3'
ende
  • Gem filen, gå tilbage til terminalen og kør
pod installation
  • Efter en vellykket 'pod installeret' meddelelse fra terminalen, gå tilbage til projektbiblioteket, skal du se filen 'Dit projekt-navn.xcworkspace'. Start dit projekt ved at dobbeltklikke på den fil.
  • N.B: Hvis du efter lanceringen af ​​.xcworkspace-filen støder på konverteringen til det seneste hurtige versionvindue, skal du klikke på opdatering og lade xcode gøre sine ting. Bare sørg for, at du bygger projektmappen ren, og alt skal være tilbage til det normale
Alt + Skift + Cmd + K

Indstil forældrekontrolleren.

  • Hvis du startede med et tomt projekt, skal du fortsætte med at slette filen ViewController.swift, så vi begynder på ny.
  • Skift til dit storyboard, du skal have en tom VC, hvis du ikke trækker en til storyboardet, vil vi gøre dette til Parent ViewController.
  • Opret en ny fil: ParentViewController underklasse UIViewController.
  • Rediger indholdet, så du har:
// importer biblioteket
import XLPagerTabStrip
// Slet UIViewController, og udvid // ButtonBarPagerTabStripViewController i stedet
klasse ParentViewController: ButtonBarPagerTabStripViewController {
  ..
}
  • Forbind VC'en i storyboardet med ParentViewController.
  • Træk en UIScrollView til VC'en, så lad den optage VC'en fuldt ud.

Tilføj begrænsninger, skal være top-64, højre-0, bund-0, venstre-0.

  • Vælg ScrollView, og højreklik, træk et nyt henvisningsstik til ViewController for at forbinde containerView-stikkontakt med rullevisningen.
  • Træk en CollectionView øverst på visningen (Slet den celle, der følger med), på samme niveau som ScrollView, men arranger dem igen, så CollectionView er på toppen.
  • Indstil begrænsninger 0 til venstre, 0-top, 0-højre, højde 64.
  • Knyt CollectionView til ButtonBarView-klassen
  • Vælg ContainerView og højreklik, træk et nyt henvisningsstik til ViewController for at forbinde knapBarView stikkontakt med ContainerView som ovenfor, tildel også det til modul: XLPagerTabStrip
  • Åbn filen ParentViewController.swift, og indstil udseendet og følelsen af ​​knappenBar.
lad lillaInspireColor = UIColor (rød: 0,13, grøn: 0,03, blå: 0,25, alpha: 1,0)
tilsidesætte func viewDidLoad () {
// ændre valgt bjælkefarve
settings.style.buttonBarBackgroundColor = .hvid
settings.style.buttonBarItemBackgroundColor =. hvidt
settings.style.selectedBarBackgroundColor = purpleInspireColor
settings.style.buttonBarItemFont = .boldSystemFont (ofSize: 14)
settings.style.selectedBarHeight = 2.0
settings.style.buttonBarMinimumLineSpacing = 0
settings.style.buttonBarItemTitleColor =. sort
settings.style.buttonBarItemsShouldFillAvailiableWidth = true
settings.style.buttonBarLeftContentInset = 0
settings.style.buttonBarRightContentInset = 0
ChangeCurrentIndexProgressive = {[svagt selv] (oldCell: ButtonBarViewCell ?, newCell: ButtonBarViewCell ?, progressPercentage: CGFloat, changeCurrentIndex: Bool, animeret: Bool) -> Void in
beskyttelsesændringCurrentIndex == sandt andet {return}
oldCell? .label.textColor =. sort
newCell? .label.textColor = self? .purpleInspireColor
}
super.viewDidLoad ()
}

Opsæt børnene

  • Opret 2 nye ViewControllere (du kan oprette så mange du vil, men vi holder os med 2 her), træk til storyboard og oprette tilsvarende filer (ChildViewController1.swift, ChildViewController2.swift), forbinder ViewControllers i StoryBoard med de relevante klasser .
  • Giv dem også et storyboardId. Jeg bruger barn1, barn2
  • du kan gøre alt, hvad du normalt ville gøre med disse controllere, men af ​​hensyn til denne tutorial vil jeg bare trække en UILabel til VC bare for at differentiere.
  • Sådan konfigureres en undervisning: import XLPagerTabStrip, udvid IndicatorInfoProvider og implementer en funktion, der er i overensstemmelse med protokollen.
  • Metoden returnerer titlen for det pågældende barn, der skal bruges på forældrens knapbjælke.
  • Samme for filen ChildController2.swift
  • Gå tilbage til ParentViewController.swift for at knytte børnes controllere til forældrekontrollerne.
tilsidesætte func viewControllers (til pagerTabStripController: PagerTabStripViewController) -> [UIViewController] {
let child_1 = UIStoryboard (navn: "Main", bundle: nil) .instantiateViewController (withIdentifier: "child1")
let child_2 = UIStoryboard (navn: "Main", bundle: nil) .instantiateViewController (withIdentifier: "child2")
returner [barn_1, barn_2]
}

Her er min fulde ParentViewController.swift-fil.

Gå videre og kør din kode. Her er resultatet.