Vytvořte zobrazení posouvání pomocí Swift: 9 kroků

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:22

Před několika měsíci jsem nevěděl o existenci swift a Xcode. Dnes jsem mohl vyvinout malou část aplikace, kterou chci vytvořit. Dokázal jsem vytvořit něco skvělého, o co bych se s vámi chtěl podělit.

V tomto tutoriálu vás provedu procesem vytváření scrollovacího pohledu, ve kterém budou uživatelé přesměrováni, když si budou chtít zaregistrovat nový účet. Po cestě vám zajistím několik teoretických vysvětlení věcí, které děláme, abyste skutečně porozuměli tomu, co děláme.

Než to uděláme, promluvme si o tom, co je Swift a Xcode:

1. Swift je výkonný a intuitivní programovací jazyk pro macOS, iOS, watchOS a tvOS. Psaní kódu Swift je interaktivní a zábavné, syntaxe je stručná, ale expresivní a Swift obsahuje moderní funkce, které vývojáři milují. Swift kód je designově bezpečný, ale také produkuje software, který běží bleskově. Je navržen tak, aby fungoval s rámci Apple Cocoa a Cocoa Touch a velkým množstvím stávajícího kódu Objective-C napsaného pro produkty Apple. Je postaven na open source kompilátoru LLVM a je součástí Xcode od verze 6, vydané v roce 2014. Na platformách Apple používá runtime knihovnu Objective-C, která umožňuje spouštění kódu C, Objective-C, C ++ a Swift v rámci jednoho programu.

2. Xcode je integrované vývojové prostředí (IDE) pro macOS obsahující sadu nástrojů pro vývoj softwaru vyvinutých společností Apple pro vývoj softwaru pro macOS, iOS, watchOS a tvOS.

Krok 1: Stáhněte si Xcode

Xcode 10 obsahuje vše, co potřebujete k vytváření úžasných aplikací pro všechny platformy Apple. Xcode a nástroje nyní vypadají skvěle v novém tmavém režimu na macOS Mojave. Editor zdrojového kódu vám umožňuje snáze transformovat nebo refaktorovat kód, zobrazit změny zdrojového ovládání vedle souvisejícího řádku a rychle získat podrobnosti o rozdílech v upstream kódu. Pomocí vlastní vizualizace a analýzy dat si můžete vytvořit svůj vlastní nástroj. Swift kompiluje software rychleji, pomáhá vám dodávat rychlejší aplikace a generuje ještě menší binární soubory. Testovací sady se dokončují mnohonásobně rychleji, práce s týmem je jednodušší a bezpečnější a mnoho dalšího.

Xcode 10 obsahuje Swift 4.2, který kompiluje váš software rychleji, pomáhá vám dodávat rychlejší aplikace a generuje ještě menší binární soubory. Ve srovnání se Swift 4.0 dokáže nejnovější kompilátor Swift vytvářet velké aplikace více než dvakrát rychleji.* V kombinaci s novým systémem Xcode pro nové sestavení je váš každodenní pracovní postup pro úpravy, vytváření a testování mnohem rychlejší. Optimalizováno pro nejnovější vícejádrový hardware Mac, Xcode a Swift tvoří bleskově rychlou vývojovou platformu.

Krok 2: Začněme

Co tedy uděláme, je přejít na Xcode a vytvořit nový projekt. Jakmile klikneme na nový projekt, naše aplikace bude aplikace pro jediné zobrazení. Pro ty, kteří nevědí, jedna aplikace pro zobrazení znamená, že budete muset začít všechno od nuly a že bude existovat jedno jediné zobrazení, které můžeme naprogramovat.

Pojmenujte svůj produkt TutorialApp. Pokud jste zkušený vývojář, který publikuje aplikace v App Store, pravděpodobně budete mít tým, ale pokud jste noví a nemáte publikované žádné aplikace, můžete toto pole přeskočit. Do názvu organizace můžete napsat název společnosti v případě, že ji máte, v mém případě si ponechám MacBook Pro. Potom je identifikátor organizace považován za něco jako jedinečný identifikátor vašeho projektu, proto můžete psát, co chcete. Jazyk bude určitě rychlý.

Stiskněte tedy další a uložíme projekt na plochu, aby byl snadno přístupný.

Nový projekt se skládá ze tří souborů AppDelegate.swift, ViewController.swift a hvězda tohoto kurzu: Main.storyboard. Under Deployment Info> Device Orientation in the General project settings, set Devices to iPhone. Protože se jedná o aplikaci pouze na výšku, zrušte zaškrtnutí možností Na šířku a Na šířku vpravo. Otevřete Main.storyboard v navigátoru projektu a zobrazte jej v Interface Buildereditor:

Nechystáme se provádět žádné změny v konfiguraci a přejdeme rovnou k hlavnímu scénáři. Protože jsme vytvořili aplikaci pro jediné zobrazení, vytvořili jsme jednoduché jediné prázdné zobrazení. Na tom musíme zapracovat.

Krok 3: Práce v uživatelském rozhraní

Oficiální terminologie storyboardu pro ovladač zobrazení je „scéna“, ale termíny můžete používat zaměnitelně. Scéna představuje ovladač zobrazení ve scénáři.

Zde vidíte jeden řadič zobrazení obsahující prázdné zobrazení. Šipka ukazující zleva na ovladač zobrazení označuje, že se jedná o počáteční ovladač zobrazení, který se má v tomto scénáři zobrazit. Návrh rozložení v editoru scénáře se provádí přetažením ovládacích prvků z Knihovny objektů (viz pravý horní roh) do ovladače zobrazení.

Chcete -li získat představu o tom, jak editor scénářů funguje, přetáhněte některé ovládací prvky z Knihovny objektů do řadiče prázdného zobrazení, jak je vidět na videu.

Když přetáhnete ovládací prvky dovnitř, měly by se zobrazit v Obrysu dokumentu vlevo.

Můžete si vytvořit požadované uživatelské rozhraní. V mém případě jsem použil ten, který vidíte na obrázku.

Krok 4: Vyvinout ovladač druhého pohledu a iniciovat segues (přechody)

Když tedy v mé aplikaci uživatel stiskne tlačítko „Zaregistrovat nový účet“, chci, aby byl přesměrován na stránku registrace účtu. Proto je každá stránka novou scénou, novým zobrazením. Z toho důvodu musíme vytvořit druhý řadič pohledu, který najdete v knihovně objektů.

Zadejte ovladač zobrazení a umístěte jej vedle původního ovladače zobrazení. Tato scéna bude zodpovědná za řadič zobrazení registru. Přesměrování na tuto stránku lze provést dvěma způsoby:

1. můžeme to udělat ručně, když vytvoříme akční spojení z tlačítka na druhý ovládací prvek zobrazení
2. můžeme to udělat programově

Rozhodl jsem se to udělat ručně. Je to tak jednoduché:

1. Klikněte levým tlačítkem na tlačítko (v mém případě Zaregistrovat nový účet)
2. Podržte příkaz a levým tlačítkem myši jej přetáhněte na scénu ovládání registru.
3. Pusťte to tam a vyberte „Prezentovat modálně“

Krok 5: Vytvořte třídu programování pro registrační proces

Nyní tedy chceme vytvořit vyhrazenou třídu kódování pro novou scénu.

Chcete -li to provést, musíte provést následující kroky:

• klikněte pravým tlačítkem na složku projektu
• klikněte na nový soubor s názvem kakaová dotyková třída
• do třídy napište: RegisterVC
• VELMI DŮLEŽITÉ! Ujistěte se, že podtřída musí být typu UIViewController
• jazyk musí být rychlý.
• klikněte na další a uložte svou třídu kakaa do hlavního kořene projektu.
• Klikněte na hlavní scénář a přejděte na nový ovladač zobrazení
• klikněte na žluté tlačítko, které je umístěno nad ním
• vpravo přejděte na inspektora třídy a proveďte odkaz na Register VC (Costum class, class = RegisterVC

Krok 6: Vytvořte vodorovné přejetí stránky

V systému iOS se zobrazení posouvání používají k zobrazení obsahu, který se zcela nevejde na obrazovku. Zobrazení posouvání mají dva hlavní účely:

Aby uživatelé mohli přetáhnout oblast obsahu, který chtějí zobrazit, aby uživatelé mohli přiblížit nebo oddálit zobrazený obsah pomocí gest sevření. Běžný ovládací prvek používaný v aplikacích pro iOS - UITableView - je podtřída UIScrollView a poskytuje skvělý způsob, jak zobrazit obsah, který je větší než obrazovka.

K čemu použít podstránky v horizontálním přejetí?

Pokud bych měl vytvořit 6 různých stránek, znamenalo by to, že musím pro každou z nich vytvořit vyhrazenou třídu a není tak pohodlné přenášet informace z jedné třídy do druhé. Když například zadám svůj e -mail a poté kliknu na další, pokud mám jiný ovladač zobrazení, opustím první stránku ovladače zobrazení a poté se zobrazí druhá. V tomto případě musí být informace o prvním ovladači zobrazení předány dalšímu a poté znovu třetímu ovladači zobrazení atd. Když budu mít všechny ovladače zobrazení, které potřebuji, budu muset shromáždit všechna data ze všech stránky a odešlete je na server. Takže to bude opravdu složité.

Přejdu -li k vytvoření tohoto ovladače zobrazení, v mém případě jsem měl 5 stránek, které jsem chtěl vytvořit:

1. E-mailem
2. Celé jméno
3. Heslo
4. Datum narození
5. Rod

To znamená, že ovladač zobrazení, který vytvoříme, musí být 5krát větší než ten, který jsme vytvořili dříve.

Vyberte ovladač zobrazení a přejděte do pravého horního rohu a klikněte na ikonu pravítka a upravte simulovanou velikost. Chcete -li upravit šířku a výšku, vyberete si Freeform. Výchozí šířka obrazovky, která je vhodná pro iphone 8, je 375, takže pokud vynásobím 375*5 = 1875. A tady to máte, máte rozšířený ovladač zobrazení.

Podobně postupujete stejným způsobem pro všechny různé telefony a velikosti obrazovky.

Aby fungovalo zobrazení posouvání, potřebujeme objekt zobrazení posouvání. Scroll View poskytuje mechanismus pro zobrazení obsahu, který je větší než velikost okna aplikace. Klikněte na tento objekt, přetáhněte jej a umístěte jej do levého horního rohu ovladače zobrazení a ujistěte se, že X a Y jsou na nulových pozicích a natažení odpovídá vašemu ovladači pohledu.

Scroll View nám umožňuje pouze rolování, nic jiného. Poté musíme přidat zobrazení obsahu, které bude ukládat další zobrazení. UIView - představuje obdélníkovou oblast, ve které kreslí a přijímá události - najdete v knihovně objektů. Jednoduše klikněte a přetáhněte jej do zobrazení posouvání a znovu jej podle toho roztáhněte.

Vyberte zobrazení posouvání z levého panelu a zavoláme zarovnání 0, 0, 0, 0 a přidáme omezení. Totéž proveďte pro zobrazení obsahu.

Krok 7: Vytvořte uživatelské rozhraní pro podstránky vodorovného potažení

V tomto kroku musíte vytvořit uživatelské rozhraní svých podstránek. To, co jsem se rozhodl udělat, je vytvořit prototyp ve Sketch a poté jej postavit v Xcode.

Krok 8: Implementujte návrh v Xcode

Dalším krokem je implementace tohoto návrhu v Xcode. Chcete-li to provést, musíte vytvořit výstupní připojení pro všechny podstránky a vytvořit další pro „mateřské zobrazení“, tedy jedno výstupní připojení pro celý řadič zobrazení.

Prvky ve scénáři jsou propojeny se zdrojovým kódem. Je důležité pochopit vztah, který má scénář ke kódu, který píšete.

Ve scénáři představuje scéna jednu obrazovku obsahu a obvykle jeden ovladač zobrazení. Řadiče zobrazení implementují chování vaší aplikace a spravují jedno zobrazení obsahu s hierarchií dílčích pohledů. Koordinují tok informací mezi datovým modelem aplikace, který zapouzdřuje data aplikace, a zobrazeními, která tato data zobrazují, spravují životní cyklus jejich zobrazení obsahu, zpracovávají změny orientace při otáčení zařízení, definují navigaci v rámci vaší aplikace a implementujte chování tak, aby reagovalo na vstup uživatele. Všechny objekty řadiče zobrazení v systému iOS jsou typu UIViewController nebo jedné z jeho podtříd.

Chování svých řadičů pohledu definujete v kódu vytvořením a implementací vlastních podtříd řadiče zobrazení. Potom můžete vytvořit propojení mezi těmito třídami a scénami ve svém scénáři, abyste získali chování, které jste definovali v kódu, a uživatelské rozhraní, které jste definovali ve svém scénáři.

Xcode již vytvořil jednu takovou třídu, na kterou jste se dívali dříve, ViewController.swift, a propojil ji se scénou, na které ve svém scénáři pracujete. Když přidáte další scény, vytvoříte toto připojení sami v inspektoru identity. Inspektor identity vám umožňuje upravovat vlastnosti objektu ve vašem scénáři související s identitou daného objektu, například do jaké třídy objekt patří.

Create Outlets for UI ElementsOutlets provide a way to reference interface interface-the objects you added to your storyboard-from source code files. Chcete-li vytvořit zásuvku, přetáhněte ovládací prvek z konkrétního objektu ve vašem scénáři do souboru řadiče zobrazení. Tato operace vytvoří vlastnost pro objekt v souboru řadiče zobrazení, která vám umožní přístup a manipulaci s tímto objektem z kódu za běhu

1. Otevřete svůj scénář, Main.storyboard.
2. Kliknutím na tlačítko Asistent na panelu nástrojů Xcode poblíž pravého horního rohu Xcode otevřete editor asistenta. Pokud chcete více místa pro práci, sbalte navigátor projektu a oblast nástrojů kliknutím na tlačítka Navigátor a Nástroje na panelu nástrojů Xcode.
3. Můžete také sbalit zobrazení osnovy.

Na panelu výběru editoru, který se zobrazí v horní části asistenta editoru, změňte pomocného editora z Náhledu na Automatický> ViewController.swift.

Klikněte na podstránku a přetáhněte do příslušné třídy v kódu.

Krok 9: Integrujte vlastní gesta

SWIPE GESTO

Gesto přejetí prstem nastane, když uživatel pohne jedním nebo více prsty po obrazovce v určitém horizontálním nebo vertikálním směru. Pomocí třídy UISwipeGestureRecognizer můžete detekovat gesta přejetí prstem.

Implementace gesta přejetí prstem

Krok 1: Přidejte gesta gesta do metody viewDidLoad ()

přepsat func viewDidLoad () {super.viewDidLoad ()

let swipeLeft = UISwipeGestureRecognizer (cíl: self, action: #selector (handleGesture)) swipeLeft.direction =.left self.view.addGestureRecognizer (swipeLeft)

nechte swipeRight = UISwipeGestureRecognizer (cíl: self, action: #selector (handleGesture)) swipeRight.direction =.right self.view.addGestureRecognizer (swipeRight)

nechte swipeUp = UISwipeGestureRecognizer (cíl: self, action: #selector (handleGesture)) swipeUp.direction =.up self.view.addGestureRecognizer (swipeUp)

let swipeDown = UISwipeGestureRecognizer (cíl: self, action: #selector (handleGesture)) swipeDown.direction =.down self.view.addGestureRecognizer (swipeDown)}

Krok 2: Zkontrolujte detekci gest v metodě handleGesture () func handleGesture (gesto: UISwipeGestureRecognizer) -> Zrušeno {if gesture.direction == UISwipeGestureRecognizerDirection.right {print ("Swipe Right")} else if gesture.direction == UISwipeGesture vlevo {print ("Swipe Left")} else if gesture.direction == UISwipeGestureRecognizerDirection.up {print ("Swipe Up")} else if gesture.direction == UISwipeGestureRecognizerDirection.down {print ("Swipe Down")}}}

V mé aplikaci jsem chtěl použít swipeRight, ale mohl jsem použít ten, který je pro vaši aplikaci vhodnější.

Nyní to implementujeme do našeho kódu.

Přejdeme na registerVC.swift, který jsme vytvořili dříve, a napíšeme kód, jak vidíte na obrázcích.

VYSVĚTLENÍ KÓDU

nechte current_x získat aktuální polohu ScrollView (vodorovná poloha) nechat screen_width získat šířku obrazovky, odečtením této velikosti nechat new_x od aktuální pozice scrollview, vrátím se podle šířky obrazovky, pokud current_x> 0, dokud není větší než 0 - 0 je 1. stránka.

A máme hotovo!

Dobrá práce lidi!