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.

