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.