Introduzione a storyboards [parte 1]

06 Sea Introduzione a storyboards

1. INTRODUZIONE

Apple ha introdotto gli storyboard presso il lancio di iOS 5.

fa molti anni di questo …

Tuttavia ho ricevuto 2 e-mail di effetto di effetto Commento hanno trovato alcune difficoltà a seguire i tutorial perché non dominano i storyboard.

Quindi questa settimana questo sarà il soggetto di cui focalizzeremo il nostro tutorial.

Prima del lancio Negli storyboard, gli sviluppatori iOS avevano solo la possibilità di creare le interfacce delle nostre applicazioni tramite file con estensione .xib o programmandoli direttamente tramite il codice.

Ciascuno di questi file rappresentava una schermata della nostra applicazione.

Questo modo di lavorare ha avuto i suoi vantaggi (spesso .xib è ancora una scelta migliore dei storyboard) e, naturalmente, anche i loro inconvenienti.

Pertanto, oggi hai tre opzioni per creare le tue interfacce :

1. Progredli direttamente tramite codice
2. Utilizzare file .xib
3. Utilizza i storyboards

Nel tutorial di questa settimana, vediamo tutto ciò che devi sapere per sentirsi a proprio agio usando gli storyboard e non hanno alcun problema ogni volta che si desidera creare una nuova applicazione iOS.

Vantaggi dell’utilizzo di storyboard nei tuoi sviluppi

Forse in seguito sviluppano un tutorial su come creare interfacce tramite codice o direttamente usando .xib.

Assente questa settimana ci concentreremo sui storyboard, vediamo alcuni dei vantaggi che ci offrono.

1. Sono perfetti per vedere la navigazione completa Flusso di un’applicazione.
2. Consentiti di creare un’applicazione multivavista senza dover scrivere praticamente il codice.
3. sono molto utili per gli sviluppi dei piccoli media.

Come qualsiasi opzione, hanno anche svantaggi.

Ho intenzione di commentare a.

perché tutta la nostra interfaccia è concentrata in \ NICO FILE, ci sono molti conflitti che complicano lo sviluppo del team di un’applicazione.

Tuttavia, in molti team di sviluppo sono l’opzione preferita durante la creazione di qualsiasi interfaccia, quindi è importante che sia in grado di lavorare con loro.

3. Cosa vedremo in questo tutorial sui storyboards?

I punti più importanti che vedremo sono i seguenti:

1. Vantaggi dell’utilizzo degli storyboard nei tuoi sviluppi
2. Conoscenza dell’interfaccia del costruttore
3. Qual è il molo?
4. specificando l’interfaccia principale della nostra app
5. sequenza di avvio di un
6. Come selezionare il controller di visualizzazione iniziale
7. Impostare le modalità verticale e orizzontale della nostra app
8. Come aggiungere un tableviewcontroller, un navigationcontroller e un tabbarcontroller?

Iniziamo quindi a dare un’occhiata alle fondamenta di base degli storyboards.

Creazione del nostro progetto in Xcode

Per avviare Creare un nuovo progetto in XCode, accedendo al menu File > NUOVO > Progetto … e scegli il modello di applicazione Vista singola:

Quindi fai clic su Avanti e dai il no Vuoi. Nel mio caso lo chiamerò storyboards_demo. Lasciare il resto delle opzioni, come li vedi nell’immagine:

Fare clic su Avanti, salva il progetto Ovunque desideri e hai finito di premere il pulsante Crea.

Dopo aver creato il progetto, Xcode ti mostrerà qualcosa del genere:

Con questo progetto dimostrativo, vedremo tutto il necessario per padroneggiare i storyboard.

5. Nozioni di base degli storyboard

Fare clic sul file principale. Storico e vedere alcuni concetti che è necessario sapere:

Builder Interfaccia

Lo schermo che è stato aperto all’accesso all’accesso Il main.storyboard è noto come interfaccia del costruttore e ha il seguente aspetto:

nelle prime versioni di IOS, Interface Builder era un’applicazione indipendente di Xcode e proprio come ora, è stato utilizzato per creare le interfacce delle nostre applicazioni.

La parte sinistra dell’interfaccia del costruttore è nota come contorno del documento e ci mostra un contorno di documenti e Elenco di tutte le scene che costituiscono la nostra interfaccia.

Una scena rappresenta ciascuna delle schermate della nostra applicazione

all’interno di ogni scena, tutti gli oggetti che si aggiungono all’interfaccia, oltre a vincoli e altri elementi.

Per mostrare o nascondere il contorno del documento È possibile utilizzare il seguente pulsante, situato in basso a sinistra:

Come vedi, nel nostro progetto appena creato abbiamo solo uno schermo. Questa schermata è rappresentata dal nostro controller di visualizzazione.

Nella parte in alto a destra del costruttore di interfaccia abbiamo l’ispettore di attributo. Attraverso le opzioni offrite, possiamo apportare modifiche alle proprietà di qualsiasi oggetto che fa parte della nostra interfaccia.

all’interno dell’ispettore dell’attributo hai 6 menu diversi, dove tutti controllano un aspetto diverso di qualsiasi oggetto:

D’altra parte, in basso a destra, smaltire la libreria di oggetto:

Da qui è possibile aggiungere qualsiasi elemento all’interfaccia dell’applicazione.

Test per esempio Per trascinare un’etichetta, un pulsante, un textfield e un cursore sul tuo viewcontroller:

guardi Tu, oltre a aggiungerli alla nostra interfaccia, Xcode li ha aggiunti all’elenco di elementi che appaiono nel contorno del documento:

Sì Alecu TAS L’applicazione, facendo CMD + R, vedrai che gli elementi che abbiamo aggiunto alla nostra interfaccia sono mostrati nel simulatore.

dock

appena sopra ogni viewcontroller puoi vedere il dock.

Il dock mostra gli oggetti di alto livello di ogni scena. Ogni scena avrà almeno un oggetto ViewController, un oggetto di prima risposta e un oggetto di uscita, ma può anche avere altri elementi. Il dock è semplicemente un documento contorno in miniatura.

ViewController rappresenta evidentemente il nostro unico viewController.

Prima risposta gestisce il focus della nostra applicazione. Molto probabilmente, praticamente non usarlo.

Exit può essere utilizzato per aggiungere opzioni di navigazione alle nostre interfacce.

Interfaccia principale

Prima, quando si esegue il nostro progetto , l’applicazione che abbiamo creato, sapeva già perfettamente quale lo storyboard ho dovuto collegare quando esegui l’app.

Non ha alcun mistero, abbiamo solo un file principale. che il nostro progetto sa che questo è il file che contiene la nostra interfaccia.

Tuttavia, in qualche altro progetto è possibile utilizzare diversi storyboard diversi, quindi è importante capire, dove specifichiamo qual è il principale storyboard .

Semplificare molto, qualsiasi applicazione iOS, per impostazione predefinita, avvia la sua esecuzione nella classe AppDelegate.Swift.

Fare clic su questa classe e controlla la parte iniziale da esso:

L’attributo @uiaplicationmain situato nella parte superiore determina che la nostra classe AppDelegate è il punto di ingresso della nostra applicazione.

È obbligatorio che il nostro AppDelegate Eredita da uiredpondon e avere una proprietà di tipo Uiwindow in modo che l’app funzioni.

Se si guarda i metodi che appaiono in questa classe, tutti sono praticamente vuoti. Solo DidFinishLaunchingWithoptions () ha un codice e l’unica cosa che fa è tornare vero.

Una volta che la classe iniziale della nostra applicazione è rivista, è probabile che ti segua. Dove fa il nostro riferimento all’applicazione allo storyboard?

Il file info.plist

Per rispondere a questo sarà necessario aprire il file information.plist e individuare la voce del nome di base del file di Storyboard principale.

Quando eseguiamo l’app, l’oggetto UIAPPLICAMENTE caricano lo storyboard specificato in questo tasto, inizializza il ViewController contrassegnato come controller di vista iniziale (ora vedremo dove viene fatto) e quindi posiziona la vista di quel ViewController sull’oggetto Uiwindow.

C’è un altro punto in cui dobbiamo specificare qual è il principale Interfaccia della nostra applicazione. Se si fa clic sul nome del progetto, in alto a sinistra e fai scorrere fino alla sezione Info Distribuzione, vedrai come viene visualizzata un’altra opzione chiamata Interfaccia principale, dove appare il nome del nostro Storyboard.

Queste 2 opzioni sono fondamentali per la tua applicazione per avviare correttamente.

Controller di visualizzazione iniziale

Abbiamo esaminato il punto precedente, che una volta che abbiamo specificato che sarà il nostro storico principale, dobbiamo anche determinare quale sarà il viewcontroller che la nostra applicazione deve essere caricata prima.

Per selezionare questo, accesso Main.StoryBoard, fare clic sul nostro unico viewController e sulla quarta opzione della finestra di ispezione Proprietà, viene visualizzata l’opzione Intelly View Controller.

L’opzione specifica che quando lo storyboard è caricato, la prima schermata che la maggior parte Rárá La nostra applicazione sarà quella che viene selezionata come controller di visualizzazione iniziale.

In effetti, se guardi, vedrai che al Builder Interface, solo a sinistra del ViewController appare una freccia che punta A destra. Se trascini quella freccia e posizionerlo puntando a un altro viewcontroller, quest’ultimo diventerà il controller di visualizzazione iniziale.

Come conclusione, se ad un certo punto hai problemi con la tua applicazione, perché vedi che lo fai non caricare lo storyboard che dovrebbe o perché la prima schermata che mostra non è quella che desideri, è conveniente che tu controlli queste 3 ultime opzioni che abbiamo appena visto, perché è molto probabile che tu abbia modificato nessuno di loro e Non ricordarlo.

Ritratto / Paesaggio

Quando si sviluppa un’applicazione, si dispone di diverse opzioni.

Potrebbe volere che la tua applicazione funzioni da sola in ritratto ( Quando il dispositivo è in posizione verticale) o anche in orizzontale (quando il dispositivo è in posizione orizzontale).

Queste opzioni e più è possibile controllarle dal menu che abbiamo visto prima: informazioni di distribuzione.

Nella sezione orientamento del dispositivo è possibile vedere cosa E Hai 4 opzioni tra cui scegliere.

Se eseguiamo l’applicazione, con le opzioni che vedi nell’immagine, la nostra app ruoterà la sua interfaccia ogni volta che abbiamo usato l’iPhone in una posizione verticale con il pulsante Home sotto e anche in posizione orizzontale, sia con il pulsante Home a destra ea sinistra.

Tuttavia, se il nostro dispositivo è in posizione verticale con il pulsante di casa, la nostra applicazione non sarebbe adattata a Questa posizione, poiché l’opzione capovolta è disattivata.

Pertanto, questo è ciò che ciascuna delle opzioni rappresenta:

• ritratto: posizione verticale con il pulsante Home sotto
• capovolta: posizione verticale con il pulsante home up
• Paesaggio a sinistra: posizione orizzontale con il pulsante Home a sinistra
• Paesaggio a destra: posizione orizzontale con il pulsante Home Verso la destra

Quando si tratta di sviluppare il tuo progetto, è necessario tenere conto di tutto questo.

Aggiunta di A TableViewController

Per impostazione predefinita, quando creiamo un’applicazione di visualizzazione singola, il progetto Xcode crea un ViewController nel nostro Storyboard.

A volte, probabilmente vuoi lavorare direttamente con un tableviewcontroller.

In questi casi, per sostituirci l’un l’altro, come segue come segue:

1. Selezionare il nostro viewcontroller al main.storyboard
2. rimuoverlo premendo l’eliminazione Key
3. Aggiungi un tableviewcontroller dalla libreria oggetti
4. Scegli questa tabellaViewController come controller di visualizzazione iniziale

Qui sotto puoi vedere questa sequenza di azioni:

Se attualmente si esegue l’applicazione, vedrai come la visualizzazione iniziale che mostra è quella di una tabella vuoto.

Aggiunta di un navigazioneController

Il navigationcontroller è l’opzione perfetta è l’opzione perfetta TA per aggiungere la navigazione tra le schermate quando creiamo applicazioni multivista.

A navigationcontroller deve essere sempre associato a un altro controller. Questo controller può essere di qualsiasi tipo: ViewController, TableViewController, CollectionViewController.

Questo controller associato al navigazioneController diventa il suo controller principale, cioè nel suo rootviewcontroller.

Per aggiungere un navigazioneController alla tua applicazione è possibile seguire alcuni passaggi simili a quelli che abbiamo visto Nella sezione precedente:

1. Selezionare il nostro tableviewcontroller al main.storyboard
2. Eliminarlo premendo il tasto Elimina
3. Aggiungi un navigazioneController dall’oggetto Biblioteca
4. Scegli questo navigazioneController come controller di visualizzazione iniziale

Qui hai questi passaggi sul video:

Poiché è stato in grado di osservare, il navigazionecontroller è stato associato per impostazione predefinita un tableviewcontroller.

Se attualmente esegui il progetto, vedrai come La nostra applicazione mostra il tableviewcontroller insieme a una barra di navigazione nella parte superiore con il titolo del controller di vista principale, che indica che la nostra app ha un naveiga TionController.

Aggiunta di un tabbarcontroller

los tabbarcontrollers, proprio come navigatoreController ti permettono Per creare applicazioni multivista.

Tuttavia, se nella navigazioneControllers stabiliamo una navigazione gerarchica, dai genitori ai bambini, nel tabbarcontroller i diversi viewcontrollers che utilizziamo saranno allo stesso livello di navigazione.

Per aggiungere un tabbarcontroller attraverso uno storyboard, seguiremo alcuni passaggi simili a quelli osservati nelle sezioni precedenti:

1. Selezionare il nostro navigazioneController al Main.Storyboard
2. Eliminarlo premendo il tasto Elimina
3. Selezionare il controller di visualizzazione della radice del controller di navigazione
4. anche rimuoverlo con il tasto Elimina
5. Aggiungi un tabbarcontroller dalla Libreria di Oggetti
6. Scegli questo tabbarcontroller come controller di visualizzazione iniziale

Questi sono i PAS seguito:

Se si esegue l’app vedrai come la nostra schermata principale è ora un tabbarcontroller che conta con 2 ViewControllers, identificati come articolo 1 e articolo 2.

9. Riepilogo finale

Abbiamo fatto una rapida revisione agli aspetti fondamentali dei storyboard. Abbiamo visto come aggiungere elementi di base che ci permetteranno di creare interfacce complesse.

Tuttavia, non abbiamo affrontato uno degli argomenti più importanti dei storyboard: i membri.

Questo concetto lo vedremo nella seconda parte di questo tutorial. Accesso ora alla seconda parte da qui.

10. Hai finito il tutorial

Hai finito il tutorial di questa settimana in EffectApple. Come sempre, ecco la tua ricompensa. Il video Chorra questa settimana:

11. Dove andare ora?

Accede alla seconda parte del tutorial su storyboards, dove vedremo dei concetti più avanzati che saranno molto utili, da qui,

Puoi accedere a più tutorial Disponibile in EffectApple da qui.

Se questo articolo è sembrato utile, mi renderesti un grande favore condividendolo nei tuoi social network.