Rendere l'app interattiva

In questo capitolo, introdurremo alcune nuove cose e funzionalità dell'interfaccia utente che iOS fornisce per l'interazione con l'utente. Aggiungeremo -

• Campi di testo
• Labels
• Pulsanti e loro azioni

Inoltre, scriveremo rapidamente il codice per un'etichetta dinamica, che mostrerà il risultato calcolato dell'input inserito dall'utente.

Con il titolo “Rendere interattiva la nostra app” intendiamo far interagire la nostra applicazione con l'utente. Pertanto, qui diamo all'utente il potere di interagire e controllare l'applicazione.

Aggiunta di campi di testo

Qui, faremo di nuovo un nuovo progetto. Dovrebbe essere facilmente gestibile, poiché abbiamo già discusso su come creare un nuovo progetto in Xcode.

Ok, quindi ora creeremo un nuovo progetto chiamato "My Dog's Age". Dopo aver creato questo progetto, faremo clic sul nostro file "Main.storyboard" e seguiremo i passaggi indicati di seguito.

• Nella barra di ricerca del riquadro dell'utilità (situata nell'angolo in basso a destra di Xcode), cerca Etichetta. Fai clic e trascina l'etichetta nella tua main.storyboard / (Visualizza). Quindi, fai doppio clic sull'etichetta e rinominala come - "My Dog's Age".

• Cerca "campo di testo", fai clic e trascina il campo di testo nella vista. Mentre questo campo di testo è selezionato, vai all'ispettore degli attributi e cambia il tipo di tastiera in Tastierino numerico, in modo che solo il numero possa essere inserito come mostrato nello screenshot qui sotto.

Aggiunta di pulsanti alla nostra vista

Ora cerca un pulsante nella barra di ricerca. Trascinalo nella tua vista, fai doppio clic su di esso e rinominalo come "Calcola".

Aggiunta di un'etichetta alla visualizzazione

Cerca l'etichetta e aggiungila sotto il pulsante, per mostrare l'output dell'età. Fare doppio clic e rendere l'etichetta vuota e allungarla un po ', in modo che l'output completo sia visibile.

Tip - Se non riesci a rinominare facendo doppio clic, seleziona l'elemento e nel riquadro delle utilità - Attribute inspector, c'è il titolo di quell'elemento, modificalo e premi Invio come mostrato nello screenshot seguente.

Ora, il tuo Main.storyboard dovrebbe apparire come lo screenshot seguente.

Non ci fermiamo qui, ora parleremo di come aggiungere immagini al main.storyboard.

Aggiunta di immagini alla nostra vista

Per cominciare, dobbiamo prima cercare un'immagine, che vogliamo aggiungere nel progetto. Puoi scaricare l'immagine riportata di seguito -

Copia questa immagine nel tuo progetto o trascina questa immagine nel tuo progetto, quindi vedrai la seguente finestra.

Assicurati di selezionare, copiare gli elementi se necessario e creare gruppi. Fare clic sul pulsante Fine.

Ora vai su Utility Pane → Libreria oggetti e cerca le visualizzazioni delle immagini. Trascina la visualizzazione dell'immagine nella tua visualizzazione. Ora la tua vista dovrebbe assomigliare allo screenshot mostrato di seguito.

Ora, fai clic su questa Vista Immagine, che hai appena trascinato nella tua vista e poi vedrai che nell'area delle utility c'è un'opzione chiamata “Immagine” per selezionare l'immagine. Clicca su quella freccia e vedrai tutte le immagini disponibili. Assicurati di aver selezionato questa visualizzazione immagine appena aggiunta.

Ora che hai selezionato l'immagine per la visualizzazione dell'immagine, la visualizzazione finale dovrebbe essere simile allo screenshot seguente. Questa è l'unica cosa che faremo con il nostro main.storyboard, per questa applicazione.

Questa è la nostra visione ora dopo aver aggiunto tutti gli elementi dell'interfaccia utente.

Successivamente, abbiamo un'implementazione logica del nostro codice che continueremo se hai completato fino a questo passaggio.

Ora, seleziona il controller della vista e apri l'editor dell'assistente facendo clic sul pulsante dell'editor dell'assistente nell'angolo in alto a destra (come mostrato nello screenshot qui sotto).

Ora, la nostra visualizzazione dovrebbe essere simile alla seguente schermata.

Aggiunta di funzionalità alla nostra applicazione

Fino ad ora, la nostra applicazione è solo un'applicazione statica, che non risponde a nulla e non cambia all'interazione dell'utente.

Ora arriva la parte principale del collegamento dei nostri elementi dell'interfaccia utente al nostro codice e l'interfaccia utente cambierà in base all'input degli utenti. Il“ViewController.swift” file è il nostro file principale in cui scriveremo il codice per la nostra vista corrente.

Note- Attualmente stiamo lavorando con visualizzazioni singole, in seguito quando discuteremo di visualizzazioni multiple. Discuteremo di come file differenti controllano viste differenti.

Fare clic sul campo di testo, premere control e trascinare il cursore sulla seconda parte dello schermo, ovvero il file viewcontroller.swift. Vedrai una linea blu che collega la nostra vista e il file swift. Quando rilasci il mouse, vedrai un popup che richiede un input.

TIP- Compila il campo Nome con qualsiasi nome che assomigli al tuo campo di immissione. Un punto importante è che il nome non può avere uno spazio, quindi puoi scriverlo come mostrato nell'immagine precedente, cioè se il nome ha più parole, la prima parola dovrebbe essere scritta in minuscolo, quindi il primo alfabeto di ogni successiva la parola sarà maiuscola.

Segui la stessa procedura e collega il resto degli Elementi. Ricorda che per un campo di testo e un'etichetta, il tipo è Outlet. Tuttavia, durante l'aggiunta di un pulsante, il tipo deve essere azione come mostrato nello screenshot qui sotto.

In questa fase, il nostro viewcontroller.swift avrà il seguente aspetto:

Ora, all'interno dell'azione del pulsante, aggiungi le seguenti righe:

var age = Int(enteredAge.text!)! * 8 
yearsLabel.text = String(age);

Tip- Non è necessario aggiungere un punto e virgola per terminare una riga in swift, ma anche se mettessimo un punto e virgola, il compilatore non segnalerebbe alcun errore .

Nel codice precedente, la prima riga dichiara una variabile "age", di cui parleremo nel prossimo capitolo. Quindi assegniamo il valore inserito dall'utente, convertendolo in un numero intero e moltiplicandolo per 8.

Nella seconda riga, assegniamo il valore di "età" alla nostra etichetta di output. In questa fase, il nostro controller di visualizzazione avrà il seguente aspetto:

Ora eseguiremo la nostra applicazione ed è così che apparirà.

Tip- Se la tastiera non viene visualizzata al primo avvio, apri il simulatore, fai clic su hardware, vai su tastiera e fai clic su Attiva / disattiva tastiera software.

Nel prossimo capitolo discuteremo di un nuovo strumento chiamato Playground. Impareremo anche alcuni concetti più rapidi come variabili, dizionari, loop di array, classi e oggetti.