Jak implementovat rozložení karet podobných Androidu v iOS pomocí swift 3

Tradiční karty v systému iOS jsou umístěny ve spodní části obrazovky, v aplikacích pro Android na druhé straně jsou vaše karty nahoře. Dnes budu psát krok za krokem tutoriál o tom, jak dosáhnout android-like verze na iOS aplikaci pomocí open source knihovny s názvem XLPagerTabStrip.

Níže jsou obrázky toho, čeho se snažíme dosáhnout.

Úvod.

XLPagerTabStrip je ovladač zobrazení kontejneru, který nám umožňuje snadno přepínat mezi řadou ovladačů pohledu. Gesto posunu lze použít k přechodu na další nebo předchozí řadič pohledu. Zobrazuje interaktivní indikátor aktuálních, předchozích a dalších řadičů pohledu pro děti.

Takže v zásadě, abychom dosáhli rozložení, budeme mít 1 Parent View Controller, ve kterém jsou umístěny 2 nebo více dětských pohledových kontrolérů. Knihovna poskytuje 4 různé způsoby, jak ukázat řadičům zobrazení dětí, ale dnes se zaměřujeme na nejoblíbenější, na lištu Button, musíte se s ní setkat, pokud používáte aplikace, jako je instagram, youtube, skype a mnoho dalších ( viz výše obrázky).

Nastavte projekt Xcode

Pokud se integrujete do existujícího projektu, můžete tento krok přeskočit.

  • Vytvořte nový projekt xcode
  • Vyberte jednu aplikaci View
  • Pojmenujte svůj projekt a vyplňte zbývající pole

Instalace

Nainstalujeme XLPagerTabStrip pomocí cocopodů.

  • Nejprve úplně ukončete XCode a otevřete terminál
  • Z terminálu přejděte do adresáře projektu a spusťte:
pod init
  • Nyní, když se podíváte dovnitř svého souboru projektu, měli byste vidět podfile, otevřené pomocí libovolného textového editoru
Odložte use_frameworks! a přidejte ppod 'XLPagerTabStrip',: git => 'https://github.com/KelvinJin/XLPagerTabStrip',: branch => 'swift3'

Pokud jste začali s novým projektem, váš podfile by měl vypadat takto.

# Odznačte tento řádek a definujte globální platformu pro váš projekt
# platforma: ios, ‘8,0
# Odškrtněte tento řádek, pokud používáte Swift
use_frameworks!
cílit na „AndroidTabs“
pod 'XLPagerTabStrip',: git => 'https://github.com/KelvinJin/XLPagerTabStrip',: branch => 'swift3'
konec
  • Uložte soubor, vraťte se na terminál a spusťte
instalace pod
  • Po úspěšné zprávě „pod nainstalován“ z terminálu přejděte zpět do adresáře projektu, měli byste vidět soubor „Your-project-name.xcworkspace“. Spusťte svůj projekt dvojitým kliknutím na tento soubor.
  • N.B: Pokud po spuštění souboru .xcworkspace narazíte na převod do okna nejnovější verze SWIFT, klikněte na aktualizaci a nechte xcode dělat svou věc. Jen se ujistěte, že jste čistě vytvořili složku projektu a všechno by mělo být zpět do normálu
Alt + Shift + Cmd + K

Nastavte nadřazený řadič.

  • Pokud jste začali s prázdným projektem, pokračujte a smažte soubor ViewController.swift, takže začneme znovu.
  • Přepněte na svůj scénář, měli byste mít prázdný VC, pokud jej nepřetáhnete na scénář, uděláme z něj Parent ViewController.
  • Vytvořit nový soubor: Podtřída ParentViewController UIViewController.
  • Upravte obsah, abyste měli:
// import knihovny
importovat XLPagerTabStrip
// Odstranit UIViewController a místo toho rozšířit // ButtonBarPagerTabStripViewController
třída ParentViewController: ButtonBarPagerTabStripViewController {
  ..
}
  • Přiřaďte VC v storyboardu k ParentViewController.
  • Přetáhněte UIScrollView na VC a nechte jej plně obsadit VC.

Přidejte omezení, měla by být top-64, right-0, bottom-0, left-0.

  • Vyberte ScrollView a klepněte pravým tlačítkem myši. Přetáhněte nový odkazovací výstup do ViewControlleru, abyste propojili zásuvku containerView se zobrazením posouvání.
  • Přetáhněte CollectionView v horní části pohledu (odstraňte buňku, která je s ním), na stejné úrovni jako ScrollView, ale uspořádejte je tak, aby CollectionView byl nahoře.
  • Nastavení omezení 0 vlevo, 0 nahoře, 0 napravo, výška 64.
  • Přiřadit CollectionView ke třídě ButtonBarView
  • Vyberte ContainerView a klepněte pravým tlačítkem myši. Přetáhněte nový odkazovací výstup do ViewControlleru, aby se propojil s výstupem buttonBarView s ContainerView, jak je uvedeno výše, také jej přiřaďte modulu: XLPagerTabStrip
  • Otevřete soubor ParentViewController.swift a nastavte vzhled a dojem buttonBar.
ať fialováInspireColor = UIColor (červená: 0,13, zelená: 0,03, modrá: 0,25, alfa: 1,0)
přepsat func viewDidLoad () {
// změna barvy vybraného pruhu
settings.style.buttonBarBackgroundColor = .white
settings.style.buttonBarItemBackgroundColor = .white
settings.style.selectedBarBackgroundColor = purpleInspireColor
settings.style.buttonBarItemFont = .boldSystemFont (ofSize: 14)
settings.style.selectedBarHeight = 2.0
settings.style.buttonBarMinimumLineSpacing = 0
settings.style.buttonBarItemTitleColor = .black
settings.style.buttonBarItemsShouldFillAvailiableWidth = true
settings.style.buttonBarLeftContentInset = 0
settings.style.buttonBarRightContentInset = 0
changeCurrentIndexProgressive = {[slabé já] (oldCell: ButtonBarViewCell ?, newCell: ButtonBarViewCell ?, progressPercentage: CGFloat, changeCurrentIndex: Bool, animated: Bool) -> Void in
guard changeCurrentIndex == true else {return}
oldCell? .label.textColor = .black
newCell? .label.textColor = self? .purpleInspireColor
}
super.viewDidLoad ()
}

Nastavit děti

  • Vytvořte 2 nové ViewControllers (můžete vytvořit tolik, kolik chcete, ale držíme se 2 zde), přetáhněte na storyboard a vytvořte odpovídající soubory (ChildViewController1.swift, ChildViewController2.swift), přiřaďte ViewControllers v StoryBoard k příslušným třídám .
  • Také jim dejte storyboardId. I m pomocí child1, child2
  • s těmito řadiči můžete dělat cokoli, co byste normálně dělali, ale kvůli tomuto tutoriálu jen přetáhnu UILabel na VC, abych rozlišil.
  • Chcete-li nastavit podřízené zobrazení: importujte XLPagerTabStrip, rozšířte IndicatorInfoProvider a implementujte jednu funkci tak, aby odpovídala protokolu.
  • Metoda vrací název pro toto dítě, které se použije na ButtonBar na rodiči.
  • Stejné jako pro soubor ChildController2.swift
  • Vraťte se na stránku ParentViewController.swift a přiřaďte podřízené řadiče k nadřazeným řadičům.
přepsat func viewControllers (pro pagerTabStripController: PagerTabStripViewController) -> [UIViewController] {
let child_1 = UIStoryboard (jméno: "Main", bundle: nil) .instantiateViewController (withIdentifier: "child1")
let child_2 = UIStoryboard (jméno: "Main", bundle: nil) .instantiateViewController (withIdentifier: "child2")
návrat [dítě_1, dítě_2]
}

Zde je můj úplný soubor ParentViewController.swift.

Pokračujte a spusťte kód, tady je výsledek.