Crea una visualizzazione a scorrimento con Swift: 9 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:03

Alcuni mesi fa, non conoscevo l'esistenza di swift e Xcode. Oggi sono stato in grado di sviluppare una piccola parte dell'applicazione che voglio creare. Sono stato in grado di creare qualcosa di interessante, che vorrei condividere con voi.

In questo tutorial ti guiderò attraverso il processo di creazione di una scena di visualizzazione a scorrimento, in cui gli utenti verranno reindirizzati quando vorranno registrare un nuovo account. Lungo la strada, mi assicurerò di fornirti alcune spiegazioni teoriche delle cose che facciamo, in modo che tu possa effettivamente capire cosa stiamo facendo.

Prima di farlo, parliamo di cosa sono Swift e Xcode:

1. Swift è un linguaggio di programmazione potente e intuitivo per macOS, iOS, watchOS e tvOS. La scrittura del codice Swift è interattiva e divertente, la sintassi è concisa ma espressiva e Swift include funzionalità moderne che gli sviluppatori amano. Il codice Swift è sicuro per progettazione, ma produce anche software che funziona alla velocità della luce. È progettato per funzionare con i framework Cocoa e Cocoa Touch di Apple e l'ampio corpo del codice Objective-C esistente scritto per i prodotti Apple. È costruito con il framework del compilatore LLVM open source ed è stato incluso in Xcode dalla versione 6, rilasciata nel 2014. Su piattaforme Apple, utilizza la libreria runtime Objective-C che consente l'esecuzione del codice C, Objective-C, C++ e Swift all'interno di un programma.

2. Xcode è un ambiente di sviluppo integrato (IDE) per macOS contenente una suite di strumenti di sviluppo software sviluppati da Apple per lo sviluppo di software per macOS, iOS, watchOS e tvOS.

Passaggio 1: scarica Xcode

Xcode 10 include tutto il necessario per creare fantastiche app per tutte le piattaforme Apple. Ora Xcode e Instruments hanno un bell'aspetto nella nuova Dark Mode su macOS Mojave. L'editor del codice sorgente ti consente di trasformare o refactoring del codice più facilmente, vedere le modifiche al controllo del codice sorgente accanto alla riga correlata e ottenere rapidamente dettagli sulle differenze del codice upstream. Puoi costruire il tuo strumento con visualizzazione personalizzata e analisi dei dati. Swift compila il software più rapidamente, ti aiuta a fornire app più veloci e genera file binari ancora più piccoli. Le suite di test si completano molte volte più velocemente, lavorare con un team è più semplice e sicuro e molto altro ancora.

Xcode 10 include Swift 4.2, che compila il tuo software più rapidamente, ti aiuta a fornire app più veloci e genera binari ancora più piccoli. Rispetto a Swift 4.0, l'ultimo compilatore Swift può creare app di grandi dimensioni a una velocità doppia.* In combinazione con il nuovo sistema di compilazione Xcode, il flusso di lavoro quotidiano di modifica, creazione e test è molto più veloce. Ottimizzato per l'ultimo hardware Mac multi-core, Xcode e Swift costituiscono una piattaforma di sviluppo velocissima.

Passaggio 2: iniziamo

Quindi quello che faremo è andare su Xcode e creare un nuovo progetto. Dopo aver fatto clic su un nuovo progetto, la nostra applicazione sarà un'app a visualizzazione singola. Per chi non lo sapesse, un'app di visualizzazione singola significa che dovrai iniziare tutto da zero e che ci sarà un'unica visualizzazione che possiamo programmare.

Assegna un nome al tuo prodotto TutorialApp. Se sei uno sviluppatore esperto che pubblica app nell'App Store probabilmente avrai una squadra, ma se sei nuovo e non hai nessuna applicazione pubblicata, puoi saltare questo campo. Nel nome dell'organizzazione, puoi scrivere il nome dell'azienda nel caso ne avessi una, nel mio caso terrò solo MacBook Pro. Quindi, l'identificatore dell'organizzazione è considerato qualcosa come un identificatore univoco del tuo progetto, quindi puoi scrivere quello che vuoi. La lingua sarà sicuramente rapida.

Quindi, premi avanti e salviamo il progetto sul desktop in modo che sia facile accedervi.

Il nuovo progetto è composto da tre file, AppDelegate.swift, ViewController.swift e la stella di questo tutorial: Main.storyboard. Sotto Informazioni sulla distribuzione> Orientamento dispositivo nelle impostazioni generali del progetto, imposta Dispositivi su iPhone. Poiché si tratta di un'app solo verticale, deseleziona le opzioni Orizzontale a sinistra e Orizzontale a destra. Apri Main.storyboard nel navigatore del progetto per visualizzarlo nell'editor Interface Builder:

Non apporteremo alcuna modifica alla configurazione e passeremo direttamente allo storyboard principale. Poiché abbiamo creato un'app a visualizzazione singola, abbiamo creato una semplice visualizzazione singola, vuota. Questo è qualcosa su cui dobbiamo lavorare.

Passaggio 3: lavorare nell'interfaccia utente

La terminologia ufficiale dello storyboard per un controller di visualizzazione è "scena", ma puoi usare i termini in modo intercambiabile. Una scena rappresenta un controller di visualizzazione nello storyboard.

Qui puoi vedere un controller di visualizzazione singolo contenente una visualizzazione vuota. La freccia che punta al controller di visualizzazione da sinistra indica che è il controller di visualizzazione iniziale da visualizzare per questo storyboard. La progettazione di un layout nell'editor dello storyboard viene eseguita trascinando i controlli dalla libreria degli oggetti (vedere l'angolo in alto a destra) nel controller della vista.

Per avere un'idea di come funziona l'editor dello storyboard, trascina alcuni controlli dalla libreria di oggetti nel controller della vista vuota come mostrato nel video.

Quando trascini i controlli, dovrebbero essere visualizzati nella struttura del documento a sinistra.

Puoi creare l'interfaccia utente che desideri. Nel mio caso ho usato quello che vedete in foto.

Passaggio 4: sviluppare un secondo controller di visualizzazione e avviare le sequenze (transizioni)

Quindi, nella mia app, quando l'utente preme il pulsante "Registra nuovo account", voglio che venga reindirizzato alla pagina di registrazione dell'account. Quindi, a tale scopo, ogni singola pagina è una nuova scena, un nuovo display. Per questo motivo, dobbiamo creare un secondo controller di visualizzazione, che puoi trovare nella libreria degli oggetti.

Digita controller di visualizzazione e posizionalo accanto al controller di visualizzazione iniziale. Questa scena sarà responsabile del controller di visualizzazione del registro. Il reindirizzamento a quella pagina può essere effettuato in due modi:

1. possiamo farlo manualmente quando effettuiamo una connessione di azione dal pulsante all'altro controllo di visualizzazione
2. possiamo farlo in modo programmatico

Quello che ho scelto di fare è farlo manualmente. È semplice così:

1. Fai un clic sinistro sul tuo pulsante (nel mio caso, Registra nuovo account)
2. Tenere premuto il comando e fare clic con il tasto sinistro del mouse per trascinarlo nella scena di controllo del registro.
3. Rilascialo lì e scegli "Presente modale"

Passaggio 5: creare una classe di programmazione per il processo di registrazione

Quindi, ora vogliamo creare una classe di codifica dedicata per la nuova scena.

Per fare ciò è necessario eseguire i seguenti passaggi:

• fare clic con il tasto destro sulla cartella del progetto
• fai clic sul nuovo file chiamato cacao touch class
• in classe scrivi: RegisterVC
• MOLTO IMPORTANTE! Assicurati che la sottoclasse debba essere di tipo UIViewController
• la lingua deve essere rapida.
• fai clic su Avanti e salva la tua classe di cacao all'interno nella radice principale del tuo progetto.
• Fai clic sullo storyboard principale e vai al nuovo controller di visualizzazione
• clicca sul pulsante giallo che si trova sopra di esso
• a destra vai all'ispettore di classe e fai riferimento al Register VC (Costum class, class = RegisterVC

Passaggio 6: crea lo scorrimento orizzontale della pagina

In iOS, le visualizzazioni di scorrimento vengono utilizzate per visualizzare contenuti che non si adattano completamente allo schermo. Le viste a scorrimento hanno due scopi principali:

Per consentire agli utenti di trascinare l'area del contenuto che desiderano visualizzare, per consentire agli utenti di ingrandire o ridurre il contenuto visualizzato utilizzando i gesti di pizzico. Un controllo comune usato nelle app iOS, UITableView, è una sottoclasse di UIScrollView e offre un ottimo modo per visualizzare il contenuto più grande dello schermo.

Cosa usano le pagine secondarie in uno scorrimento orizzontale?

Ebbene, se dovessi creare 6 pagine diverse, significherebbe che devo creare una classe dedicata per ognuna di esse e non è così conveniente passare le informazioni da una classe all'altra. Quando ad esempio digito la mia email e poi clicco su Avanti, se ho un controller di visualizzazione diverso, lascerò la prima pagina del controller di visualizzazione e quindi verrà presentata la seconda. In questo caso, le informazioni del primo controller di visualizzazione devono essere passate al successivo e poi di nuovo al terzo controller di visualizzazione ecc. Quando avrò tutti i controller di visualizzazione di cui ho bisogno, dovrò raccogliere tutti i dati da tutti le pagine e inviarle al server. Quindi, questo sarebbe davvero complesso.

Quindi, passando alla creazione di questo controller di visualizzazione, nel mio caso avevo 5 pagine che volevo creare:

1. E-mail
2. Nome e cognome
3. Parola d'ordine
4. Data di nascita
5. Genere

Ciò significa che il controller della vista che creeremo, deve essere 5 volte più grande di quello che abbiamo creato prima.

Seleziona il controller della vista e vai nell'angolo in alto a destra e fai clic sull'icona del righello e modifica la dimensione simulata. Sceglierai Freeform per regolare la larghezza e l'altezza. La larghezza predefinita dello schermo adatta per iPhone 8 è 375, quindi se moltiplico 375*5 = 1875. Ed ecco qui, hai un controller di visualizzazione estesa.

Allo stesso modo, segui lo stesso processo per tutti i diversi telefoni e dimensioni dello schermo.

Per far funzionare la vista a scorrimento, abbiamo bisogno di un oggetto vista a scorrimento. La visualizzazione a scorrimento fornisce un meccanismo per visualizzare il contenuto più grande della dimensione della finestra dell'applicazione. Fare clic su questo oggetto, trascinarlo e posizionarlo nell'angolo in alto a sinistra del controller della vista e assicurarsi che X e Y siano in posizione zero e che l'allungamento sia conforme al controller della vista.

Scroll View ci consente solo di scorrere, nient'altro. Quindi dobbiamo aggiungere una visualizzazione del contenuto, che memorizzerà altre visualizzazioni. Puoi trovare UIView - rappresenta una regione rettangolare in cui disegna e riceve eventi - nella libreria degli oggetti. Semplicemente, fai clic e trascinalo nella visualizzazione a scorrimento e, ancora una volta, allungalo di conseguenza.

Seleziona la visualizzazione a scorrimento dal pannello di sinistra e chiameremo l'allineamento 0, 0, 0, 0 e aggiungeremo i vincoli. Fai la stessa cosa per la visualizzazione del contenuto.

Passaggio 7: sviluppare l'interfaccia utente per le sottopagine dello scorrimento orizzontale

In questo passaggio, devi creare l'interfaccia utente delle tue sottopagine. Quello che ho scelto di fare è creare un prototipo in Sketch e poi costruirlo in Xcode.

Passaggio 8: implementare il design in Xcode

Il prossimo passo è implementare questo design in Xcode. Per fare ciò, è necessario creare connessioni di uscita per tutte le sottopagine e crearne un'altra per la "vista madre", ovvero una connessione di uscita per l'intero controller della vista.

Gli elementi in uno storyboard sono collegati al codice sorgente. È importante capire la relazione che uno storyboard ha con il codice che scrivi.

In uno storyboard, una scena rappresenta una schermata di contenuto e in genere un controller di visualizzazione. I controller di visualizzazione implementano il comportamento della tua app e gestiscono una singola visualizzazione del contenuto con la sua gerarchia di visualizzazioni secondarie. Coordinano il flusso di informazioni tra il modello di dati dell'app, che incapsula i dati dell'app, e le visualizzazioni che visualizzano tali dati, gestiscono il ciclo di vita delle visualizzazioni dei contenuti, gestiscono i cambiamenti di orientamento quando il dispositivo viene ruotato, definiscono la navigazione all'interno della tua app e implementare il comportamento per rispondere all'input dell'utente. Tutti gli oggetti del controller di visualizzazione in iOS sono di tipo UIViewController o una delle sue sottoclassi.

Definisci il comportamento dei controller di visualizzazione nel codice creando e implementando sottoclassi di controller di visualizzazione personalizzate. Puoi quindi creare una connessione tra quelle classi e scene nel tuo storyboard per ottenere il comportamento che hai definito nel codice e l'interfaccia utente che hai definito nello storyboard.

Xcode ha già creato una di queste classi che hai visto in precedenza, ViewController.swift, e l'ha collegata alla scena su cui stai lavorando nel tuo storyboard. Man mano che aggiungi più scene, effettuerai tu stesso questa connessione nell'ispettore Identità. L'ispettore Identità ti consente di modificare le proprietà di un oggetto nello storyboard relative all'identità di quell'oggetto, ad esempio a quale classe appartiene l'oggetto.

Crea outlet per gli elementi dell'interfaccia utente Gli outlet forniscono un modo per fare riferimento agli oggetti dell'interfaccia, gli oggetti aggiunti allo storyboard, dai file del codice sorgente. Per creare uno sbocco, trascina con il tasto Ctrl da un particolare oggetto nello storyboard a un file del controller di visualizzazione. Questa operazione crea una proprietà per l'oggetto nel file del controller della vista, che ti consente di accedere e manipolare quell'oggetto dal codice in fase di esecuzione

1. Apri il tuo storyboard, Main.storyboard.
2. Fai clic sul pulsante Assistente nella barra degli strumenti di Xcode vicino all'angolo in alto a destra di Xcode per aprire l'editor dell'assistente. Se vuoi più spazio per lavorare, comprimi il navigatore del progetto e l'area delle utilità facendo clic sui pulsanti Navigatore e Utilità nella barra degli strumenti di Xcode.
3. Puoi anche comprimere la vista struttura.

Nella barra di selezione dell'editor, che appare nella parte superiore dell'assistente editor, cambia l'assistente editor da Anteprima ad Automatico > ViewController.swift.

Fare clic sulla sottopagina e trascinarla nella classe appropriata nel codice.

Passaggio 9: integrazione dei gesti personalizzati

GESTO DI SCORRIMENTO

Un gesto di scorrimento si verifica quando l'utente sposta uno o più dita sullo schermo in una direzione orizzontale o verticale specifica. Usa la classe UISwipeGestureRecognizer per rilevare i movimenti di scorrimento.

Implementazione del gesto di scorrimento

Passaggio 1: aggiungi i gesti di scorrimento nel metodo viewDidLoad()

override 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) }

Passaggio 2: controlla il rilevamento dei gesti nel metodo handleGesture() func handleGesture(gesture: UISwipeGestureRecognizer) -> Void { if gesture.direction == UISwipeGestureRecognizerDirection.right { print("Scorri a destra") } else if gesture.direction == UISwipeGestureRecognizerDirection. left { print("Scorri verso sinistra") } else if gesture.direction == UISwipeGestureRecognizerDirection.up { print("Scorri verso l'alto") } else if gesture.direction == UISwipeGestureRecognizerDirection.down { print("Scorri verso il basso") } }

Nella mia app, volevo usare swipeRight, ma sono stato libero di usare quella più appropriata per la tua applicazione.

Ora, implementiamolo nel nostro codice.

Andiamo nel registerVC.swift che abbiamo creato prima e scriviamo il codice come puoi vedere nelle immagini.

SPIEGAZIONE DEL CODICE

lascia che current_x ottenga la posizione corrente di ScrollView (posizione orizzontale) lascia che screen_width ottenga la larghezza dello schermo, deducendo questa dimensione lascia che new_x dalla posizione corrente di scrollview, io torni dalla larghezza dello schermo se current_x> 0 fino a meno che non sia maggiore di 0 - 0 è la prima pagina.

E abbiamo finito!

Bel lavoro ragazzi!