Creeu una vista de desplaçament amb Swift: 9 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:14

Fa uns mesos, no sabia l’existència de swift i Xcode. Avui he pogut desenvolupar una petita part de l'aplicació que vull crear. Vaig poder crear alguna cosa divertida que m’agradaria compartir amb vosaltres.

En aquest tutorial us guiaré pel procés de creació d'una escena de visualització de desplaçament, en què els usuaris seran redirigits quan vulguin registrar un compte nou. Al llarg del camí, m’asseguraré de proporcionar-vos algunes explicacions teòriques de les coses que fem, de manera que pugueu entendre què fem.

Abans de fer-ho, parlem del que és Swift i Xcode:

1. Swift és un llenguatge de programació potent i intuïtiu per a macOS, iOS, watchOS i tvOS. Escriure codi Swift és interactiu i divertit, la sintaxi és concisa però expressiva i Swift inclou funcions modernes que els encanten als desenvolupadors. El codi Swift és segur pel disseny, però també produeix programari que funciona de pressa. Està dissenyat per funcionar amb els marcs d'Apple Cocoa i Cocoa Touch i la gran quantitat de codi Objective-C existent escrit per als productes d'Apple. Està construït amb el framework de compilador LLVM de codi obert i s’ha inclòs a Xcode des de la versió 6, llançada el 2014. A les plataformes Apple, utilitza la biblioteca d’execució Objective-C que permet executar el codi C, Objective-C, C ++ i Swift. dins d’un programa.

2. Xcode és un entorn de desenvolupament integrat (IDE) per a macOS que conté un conjunt d'eines de desenvolupament de programari desenvolupades per Apple per desenvolupar programari per a macOS, iOS, watchOS i tvOS.

Pas 1: baixeu Xcode

Xcode 10 inclou tot el necessari per crear aplicacions increïbles per a totes les plataformes Apple. Ara Xcode i Instruments tenen un aspecte fantàstic al nou mode fosc a macOS Mojave. L'editor de codi font us permet transformar o refactoritzar el codi amb més facilitat, veure canvis de control de font al costat de la línia relacionada i obtenir ràpidament detalls sobre les diferències de codi ascendents. Podeu crear el vostre propi instrument amb visualització personalitzada i anàlisi de dades. Swift compila el programari més ràpidament, us ajuda a oferir aplicacions més ràpides i genera binaris encara més petits. Les suites de proves es completen moltes vegades més ràpidament, treballar amb un equip és més senzill, segur i molt més.

Xcode 10 inclou Swift 4.2, que compila el vostre programari més ràpidament, us ajuda a oferir aplicacions més ràpides i genera binaris encara més petits. En comparació amb Swift 4.0, l’últim compilador Swift pot crear aplicacions grans més del doble de ràpid. * Combinat amb el nou sistema de nova versió Xcode, el vostre flux de treball d’edició, compilació i prova cada dia és molt més ràpid. Optimitzat per al maquinari Mac multi-core més recent, Xcode i Swift són una plataforma de desenvolupament ràpida.

Pas 2: Comencem

Per tant, el que farem és anar a Xcode i crear un projecte nou. Un cop fem clic en un projecte nou, la nostra aplicació serà una sola vista. Per a aquells que no ho sàpiguen, una sola aplicació de visualització significa que haureu de començar tot des de zero i que hi haurà una sola visualització que podrem programar.

Anomeneu el vostre producte TutorialApp. Si sou un desenvolupador experimentat que publica aplicacions a l'App Store, probablement tingueu un equip, però si sou nou i no teniu cap aplicació publicada, podeu ometre aquest camp. Al nom de l’organització, podeu escriure el nom de l’empresa en cas que en tingueu, en el meu cas només conservaré el MacBook Pro. Aleshores, l’identificador d’organització es considera una cosa com un identificador únic del vostre projecte, per tant, podeu escriure el que vulgueu. L’idioma serà sens dubte ràpid.

Per tant, premeu Següent i desem el projecte a l'escriptori perquè sigui fàcil d'accedir-hi.

El nou projecte consta de tres fitxers, AppDelegate.swift, ViewController.swift i l’estrella d’aquest tutorial: Main.storyboard. Under Deployment Info> Device Orientation a la configuració General del projecte, configureu Dispositius a iPhone. Com que es tracta d'una aplicació només retratada, desmarqueu les opcions Horitzontal esquerre i Horitzontal dret. Obriu Main.storyboard al navegador del projecte per visualitzar-lo a l'editor Interface Builder:

No farem cap canvi a la configuració i anirem directament al storyboard principal. Com que vam crear una aplicació de visualització única, en vam crear una de simple, en blanc, de visualització. En això hem de treballar.

Pas 3: treballar a la IU

La terminologia oficial del storyboard per a un controlador de visualització és "escena", però podeu utilitzar els termes indistintament. Una escena representa un controlador de vista al guió gràfic.

Aquí podeu veure un controlador de visualització únic que conté una vista buida. La fletxa que apunta al controlador de visualització des de l’esquerra indica que és el controlador de visualització inicial que es mostrarà en aquest guió gràfic. El disseny d'un disseny a l'editor de guions es realitza arrossegant els controls de la biblioteca d'objectes (vegeu l'extrem superior dret) al controlador de visualització.

Per tenir una idea del funcionament de l’editor del guió gràfic, arrossegueu alguns controls de la biblioteca d’objectes al controlador de visualització en blanc tal com es veu al vídeo.

A mesura que arrossegueu els controls, haurien d'aparèixer a l'esquema del document a l'esquerra.

Podeu crear la interfície d'usuari que vulgueu. En el meu cas, he utilitzat el que veieu a la imatge.

Pas 4: desenvolupeu un controlador de segona vista i inicieu els segments (transicions)

Per tant, a la meva aplicació, quan l’usuari prem el botó "Registra un compte nou", vull que es redirigeixi a la pàgina del compte de registre. Per tant, amb aquesta finalitat, cada pàgina és una nova escena, una nova pantalla. Per aquest motiu, hem de crear un segon controlador de visualització, que podeu trobar a la biblioteca d'objectes.

Escriviu el controlador de visualització i col·loqueu-lo al costat del controlador de visualització inicial. Aquesta escena serà responsable del controlador de la vista de registre. La redirecció a aquesta pàgina es pot fer de dues maneres:

1. ho podem fer manualment quan fem una connexió d'acció des del botó a l'altre control de vista
2. ho podem fer per programació

El que he escollit és fer-ho manualment. És senzill:

1. Feu un clic esquerre al botó (en el meu cas, Registra un compte nou)
2. Mantingueu premuda la tecla i feu clic amb el botó esquerre del ratolí per arrossegar-la a l'escena de control del registre.
3. Allibereu-lo allà i trieu "Presenta modalment"

Pas 5: Creeu una classe de programació per al procés de registre

Per tant, ara volem crear una classe de codificació dedicada per a la nova escena.

Per fer-ho, heu de fer els passos següents:

• feu clic dret a la carpeta del vostre projecte
• feu clic al nou fitxer anomenat classe de tacte de cacau
• a classe escriure: RegisterVC
• MOLT IMPORTANT! Assegureu-vos que la subclasse ha de ser del tipus UIViewController
• el llenguatge ha de ser ràpid.
• feu clic a Següent i deseu la classe de cacau dins de l'arrel principal del vostre projecte.
• Feu clic al tauler principal i aneu al controlador de visualització nou
• feu clic al botó groc situat a sobre
• a la dreta, aneu a l’inspector de classes i feu una referència al registre VC (Costum class, class = RegisterVC

Pas 6: creeu el lliscament horitzontal de la pàgina

A iOS, les visualitzacions de desplaçament s’utilitzen per veure contingut que no s’adapta del tot a la pantalla. Les visualitzacions de desplaçament tenen dos objectius principals:

Per permetre als usuaris arrossegar l'àrea del contingut que volen mostrar, permetre als usuaris ampliar o allunyar el contingut mostrat mitjançant els gestos de pessic. Un control comú que s’utilitza a les aplicacions per a iOS (UITableView) és una subclasse d’UIScrollView i proporciona una excel·lent manera de veure contingut més gran que la pantalla.

Què utilitzen les subpàgines en un lliscament horitzontal?

Bé, si hagués de crear 6 pàgines diferents, voldria dir que he de crear una classe dedicada per a cadascuna d'elles i no és tan convenient passar informació d'una classe a una altra. Quan, per exemple, escric el meu correu electrònic i després faig clic a Següent, si tinc un controlador de visualització diferent, deixaré la primera pàgina del controlador de visualització i es mostrarà la segona. En aquest cas, la informació del primer controlador de vista s’ha de passar al següent i, de nou, al tercer controlador de visualització, etc. Quan tingui tots els controladors de visualització que necessito, hauré de reunir totes les dades de tots les pàgines i enviar-les al servidor. Per tant, això seria realment complex.

Per tant, passant a la creació d’aquest controlador de visualització, en el meu cas, tenia 5 pàgines que volia crear:

1. Correu electrònic
2. Nom complet
3. Contrasenya
4. Data de naixement
5. Gènere

Això vol dir que el controlador de visualització que crearem ha de ser cinc vegades més gran que el que vam fer abans.

Seleccioneu el controlador de visualització i aneu a l'extrem superior dret, feu clic a la icona del regle i editeu la mida simulada. Escollireu Freeform per ajustar l’amplada i l’alçada. L'amplada per defecte de la pantalla que és adequada per a l'iPhone 8 és 375, de manera que si multiplique 375 * 5 = 1875. I aquí teniu, teniu un controlador de vista ampliat.

De la mateixa manera, seguiu el mateix procés per a tots els mòbils i mides de pantalla.

Per fer funcionar la vista de desplaçament, necessitem un objecte de vista de desplaçament. La visualització de desplaçament proporciona un mecanisme per mostrar contingut més gran que la mida de la finestra de l'aplicació. Feu clic sobre aquest objecte, arrossegueu-lo i col·loqueu-lo a l'extrem superior esquerre del controlador de vista i assegureu-vos que X i Y estiguin en posicions zero i que l'estirament correspongui al vostre controlador de vista.

Scroll View només ens permet desplaçar-nos, res més. A continuació, hem d’afegir una visualització de contingut, que emmagatzemarà altres visualitzacions. Podeu trobar la UIView (representa una regió rectangular en què dibuixa i rep esdeveniments) a la biblioteca d'objectes. Simplement, feu clic i arrossegueu-lo a la vista de desplaçament i, una vegada més, estireu-lo en conseqüència.

Seleccioneu la vista de desplaçament al tauler esquerre i anomenarem l'alineació 0, 0, 0, 0 i afegirem restriccions. Feu el mateix per a la visualització de contingut.

Pas 7: desenvolupeu la interfície d'usuari per a les subpàgines del lliscament horitzontal

En aquest pas, heu de crear la IU de les vostres subpàgines. El que vaig escollir era fer un prototip a Sketch i després construir-lo a Xcode.

Pas 8: implementeu el disseny a Xcode

El següent pas és implementar aquest disseny a Xcode. Per fer-ho, heu de crear connexions de sortida per a totes les subpàgines i crear-ne una altra per a la "vista mare", és a dir, una connexió de sortida per a tot el controlador de vista.

Els elements d’un guió gràfic estan enllaçats amb el codi font. És important entendre la relació que té un guió gràfic amb el codi que escriviu.

En un guió gràfic, una escena representa una pantalla de contingut i normalment un controlador de visualització. Els controladors de visualització implementen el comportament de la vostra aplicació i gestionen una única visualització de contingut amb la seva jerarquia de subvistes. Coordinen el flux d'informació entre el model de dades de l'aplicació, que encapsula les dades de l'aplicació, i les visualitzacions que mostren aquestes dades, gestionen el cicle de vida de les seves visualitzacions de contingut, gestionen els canvis d'orientació quan es gira el dispositiu, defineixen la navegació a l'aplicació, i implementar el comportament per respondre a l'entrada de l'usuari. Tots els objectes del controlador de visualització a iOS són del tipus UIViewController o una de les seves subclasses.

Podeu definir el comportament dels controladors de visualització en codi mitjançant la creació i implementació de subclasses de controladors de visualització personalitzades. A continuació, podeu crear una connexió entre aquestes classes i escenes al vostre guió gràfic per obtenir el comportament que heu definit al codi i la interfície d'usuari que heu definit al vostre guió gràfic.

Xcode ja va crear una classe d’aquest tipus que ja heu vist anteriorment, ViewController.swift, i la va connectar a l’escena en què esteu treballant al vostre guió gràfic. A mesura que afegiu més escenes, establireu aquesta connexió vosaltres mateixos a l’inspector d’identitats. L'inspector d'identitats us permet editar les propietats d'un objecte del vostre guió gràfic relacionades amb la identitat de l'objecte, com ara a quina classe pertany l'objecte.

Crea sortides per a elements d’interfície d’usuari Els sortits proporcionen una manera de fer referència als objectes de la interfície (els objectes que heu afegit al vostre guió gràfic) a partir de fitxers de codi font. Per crear una sortida, arrossegueu-lo des d'un objecte concret al vostre guió gràfic fins a un fitxer del controlador de visualització. Aquesta operació crea una propietat per a l'objecte del fitxer del controlador de visualització, que us permet accedir i manipular aquest objecte des del codi en temps d'execució.

1. Obriu el vostre storyboard, Main.storyboard.
2. Feu clic al botó Assistent a la barra d'eines Xcode, a prop de l'extrem superior dret de Xcode, per obrir l'editor assistent. Si voleu treballar més espai, reduïu el navegador del projecte i l'àrea d'utilitat fent clic als botons del navegador i utilitats a la barra d'eines Xcode.
3. També podeu reduir la visualització de l'esquema.

A la barra de selecció de l'editor, que apareix a la part superior de l'editor assistent, canvieu l'editor assistent de Vista prèvia a Automàtic> ViewController.swift.

Feu clic a la subpàgina i arrossegueu-la a la classe corresponent del codi.

Pas 9: integrar gestos personalitzats

GESTURA DE FULLA

Es produeix un gest de lliscament quan l'usuari mou un o més dits per la pantalla en una direcció horitzontal o vertical específica. Utilitzeu la classe UISwipeGestureRecognizer per detectar gestos de lliscament.

Implementació del gest de lliscament

Pas 1: afegiu gestos de lliscament al mètode viewDidLoad ()

sobreescriu func viewDidLoad () {super.viewDidLoad ()

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

let swipeRight = UISwipeGestureRecognizer (target: self, action: #selector (handleGesture)) swipeRight.direction =.right self.view.addGestureRecognizer (swipeRight)

let swipeUp = UISwipeGestureRecognizer (target: self, action: #selector (handleGesture)) swipeUp.direction =.up self.view.addGestureRecognizer (swipeUp)

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

Pas 2: comproveu la detecció de gestos al mètode handleGesture () func handleGesture (gest: UISwipeGestureRecognizer) -> Void {if gesture.direction == UISwipeGestureRecognizerDirection.right {print ("Swipe Right")}} else if gesture.direction == UISwipeGirureRec. left {print ("Feu lliscar cap a l'esquerra")} else if gesture.direction == UISwipeGestureRecognizerDirection.up {print ("Feu lliscar cap amunt")} else if gesture.direction == UISwipeGestureRecognizerDirection.down {print ("Feu lliscar cap avall")}}

A la meva aplicació, volia fer servir swipeRight, però em vaig deixar lliure d’utilitzar la més adequada per a la vostra aplicació.

Ara, implementem això al nostre codi.

Anem al registre VC.swift que hem creat abans i escrivim el codi tal com es pot veure a les imatges.

EXPLICACIÓ DEL CODI

deixeu que current_x obtingui la posició actual del ScrollView (posició horitzontal) permeti que screen_width obtingui l’amplada de la pantalla, deduint aquesta mida deixeu new_x de la posició actual de la vista de desplaçament, torno per l’amplada de la pantalla si current_x> 0 fins que a menys que sigui superior a 0 - 0 és la primera pàgina.

I ja hem acabat!

Bona feina nois!