Ako vytvoriť Slide to Unlock button vo SwiftUI
Mobile
5
 min read
July 25, 2022

Ako vytvoriť Slide to Unlock button vo SwiftUI

Valeriia Abelovska
Valeriia Abelovska
iOS Developer
LinkedIn Logo

Návod nevyžaduje pridanie žiadneho add-onu. Tlačidlo obsahuje natívne SF symboly a zobrazenia. Prezentované komponenty a modifikátory sú dostupné pre iOS 13. Existuje jedna výnimka — vylepšenie uvedené v 6. kroku, ktoré vyžaduje iOS 15. Použité farby nájdete na konci článku.

Krok 1. Pridanie drag gesta

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.

Krok 2. Použitie limitov a vizuálnych detailov

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.

Krok 3. Staging background

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 🚀

Golden Touches ✨

Pozor! Nasledujúce kroky môžu spôsobiť výbuch tvorivosti.

Krok 4. Úprava intenzity farieb

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é“.


Krok 5. Podpora simultánnych gest

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

Krok 6. Asynchrónnosť

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.

Dokončili ste tutoriál. Dobrá práca! 🥳

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.

Zdroje

💡 Zdrojový kód nájdete na GitHub-e.

Chcete vytvárať prelomové riešenia? Staňte sa členom nášho iOS tímu 🍎

Like what you see?
Join our newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
High quality content once a month. No spam, we promise.
Your personal data is processed in accordance with our Memorandum on Personal Data Protection.

Páči sa vám náš content?
Odoberajte newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
Vaše osobné údaje sú spracované v súlade s našim Memorandom na ochranu osobných údajov.