Efekt potiahnutia môžeme dosiahnuť pridaním rozpoznávania gesta ťahania. Modifier .gesture(DragGesture() pripojí k zobrazeniu gesto ťahania. Ak chcete získať prístup k hodnotám gesta a vykonať akcie, použite metódu inštancie .onChanged(:). Jej closure parameter zahŕňa CGSize od počiatočného bodu gesta ťahania do aktuálna pozície - value.translation, kde šírka predstavuje horizontálnu os. Animácie nižšie znázorňujú zmenu veľkosti zobrazení v závislosti od vzdialenosti ťahania.
DraggingComponent obsahujúci gesture modifier je prvým krokom k vytvoreniu zobrazenia UnlockButton.
Okrem minimálnej šírky musíme obmedziť maximálnu veľkosť komponentu DraggingComponent, ktorý sa dá definovať z parent kontajnera. GeometryReader zmení veľkosť zobrazenia na maximálnu dostupnú hodnotu, toto správanie nie je potrebné pre child zobrazenia.
DragGesture má metódu inštancie .onEnded(_:), ktorá pridáva akciu spustenú po skončení gesta. Navyše umožňuje pridať napr9klad haptic feedback a obrázok, ktorý sa vrství pred aktuálne view so zarovnaním na trailing.
Tlačidlo UnlockButton nie je dokončen0 bez pozadia a hintu. BackgroundComponent musí byť umiestnený za vrstvou DraggingComponent.
Výborne! Tlačidlo odomknutia je pripravené na použitie 🚀
Pozor! Nasledujúce kroky môžu spôsobiť výbuch tvorivosti.
SwiftUI má celkom dobré modifiers na prácu s farbami a prispôsobenie zobrazení požadovanému dizajnu. Modifier hueRotation() umožňuje upraviť a animovať dominantné farby. V teórii farieb môže byť odtieň prezentovaný ako kruh a uhly sa používajú ako indikátory zmien farieb.
Pridajme tento modifikátor do BackgroundComponent.
DraggingComponent potrebuje tiež malú úpravu. V závislosti od hodnoty drag gesta môžeme zmeniť priehľadnosť pre background view, takže pozadie bude postupne menej priehľadné, keď sa približuje k polohe „odomknuté“.
Aktuálny vzhľad zobrazenia UnlockButton nemá klasické atribúty tlačidiel – rozpoznávanie gest poklepaním a vizuálnu odozvu na stlačený stav. Najlepším a natívnym spôsobom prístupu k vlastnostiam tlačidiel a ich úprav je použitie ButtonStyleConfiguration. Aby sme dokončili tento krok, vytvoríme základný štýl tlačidla, zabalíme DragComponent do zobrazenia Button a aplikujeme naň vytvorený štýl pomocou modifikátora .buttonStyle() a v neposlednom rade podporíme obe gestá.
A. Vytvorenie štýlu tlačidla
B. Zabalenie komponentu do tlačidla a použitie štýlu tlačidla
C. Podpora simultánnych gest
V prípade, že akcia odomknutia vyžaduje odpoveď z backendu, pridajte stav načítania. Pre zjednodušenie nasimulujem request priamo vo view. Vo vašich projektoch sa radšej držte architektonickým patternov, napr. MVVM.
Posledné, čo zostáva, je pridať ďalší stav zobrazenia tlačidla v DraggingComponent.
Posledné, čo zostáva, je pridať ďalší stav zobrazenia tlačidla v DraggingComponent.
Napriek tomu, že SwiftUI je nový framework a má ešte svoje obmedzenia, umožňuje vám vytvárať krásne dizajnové komponenty pomerne rýchlo mnohými rôznymi spôsobmi.
💡 Zdrojový kód nájdete na GitHub-e.
Chcete vytvárať prelomové riešenia? Staňte sa členom nášho iOS tímu 🍎
