Share
Anche se abbiamo già imparato un bel po 'in questa serie sullo sviluppo iOS, sono sicuro che non vedrai l'ora di iniziare a costruire applicazioni iOS che facciano qualcosa di interessante o utile. In questo tutorial, il tuo desiderio è esaudito. Usando Xcode, creerai un progetto iOS da zero, modifichi il codice sorgente del progetto ed esegui l'applicazione su iOS Simulator o su un dispositivo fisico.
Colorific è il nome dell'applicazione che stiamo per costruire. L'idea alla base di Colorific è semplice, ogni volta che l'utente tocca lo schermo del dispositivo, il colore dello schermo cambia. Anche se il concetto è di base, Colorific è perfetto per iniziare e esplorare i dettagli dello sviluppo di iOS.
Come abbiamo visto in precedenza in questa serie, ogni applicazione iOS passa attraverso la vita come un progetto Xcode. Cos'è un progetto Xcode? Un progetto Xcode è un contenitore o un repository che contiene i file, le risorse e le informazioni necessarie per creare uno o più prodotti.
Si noti che questo non è limitato al codice sorgente e alle risorse di un progetto, come immagini e altri media. Un progetto tiene anche traccia delle connessioni tra i suoi vari elementi e sa come costruire i prodotti finali dai suoi elementi.
Accendi Xcode e crea un nuovo progetto Xcode scegliendo Nuovo> Progetto ... dal File menu. Un'opzione alternativa sta premendo Maiusc + Comando + N.
Nel caso in cui la finestra di benvenuto di Xcode si apra quando lanci Xcode, ti suggerisco di chiuderla in modo da imparare come creare un nuovo progetto usando il menu di Xcode.
Iniziare con una nuova applicazione o un nuovo progetto è facile con Xcode grazie ai modelli dell'applicazione che ne derivano. Per l'applicazione che stiamo per creare, abbiamo bisogno di Applicazione vista singola modello. Sentiti libero di dare un'occhiata agli altri modelli di applicazione, ma assicurati di scegliere il Applicazione vista singola modello per Colorific.
Dopo aver selezionato il Applicazione vista singola modello e facendo clic su Il prossimo pulsante, Xcode ti presenta una lista di opzioni che ti permettono di configurare il tuo nuovo progetto. Diamo un'occhiata alle varie opzioni.
Ora dovresti avere una buona conoscenza delle diverse opzioni di configurazione quando imposti un nuovo progetto Xcode. Per questo progetto, ti consiglio di utilizzare le opzioni come mostrato nell'immagine sopra. Nota che la maggior parte delle opzioni può essere facilmente modificata dopo aver creato il tuo progetto. Clicca il Il prossimo pulsante quando hai finito di configurare il tuo progetto.
Nel prossimo passaggio, Xcode chiede dove vuoi salvare il tuo nuovo progetto. Potresti aver notato la piccola casella nella parte inferiore della finestra etichettata Crea un repository git sul mio Mac. Il testo grigio sotto la casella di controllo legge Xcode posizionerà il tuo progetto sotto controllo di versione.
Come accennato in precedenza in questa serie, il controllo del codice sorgente è indispensabile nello sviluppo del software. Questa serie non coprirà questo argomento in dettaglio, ma se sei seriamente interessato allo sviluppo del software, ti consiglio vivamente di leggere il controllo del codice sorgente.
Git è lo SCM più popolare (Gestione del codice sorgentesistema nella comunità di cacao. Tuttavia, è perfettamente possibile utilizzare un diverso sistema SCM, come SVN o Mercurial.
Dillo a Xcode dove vuoi salvare il tuo progetto, seleziona la casella di controllo per autorizzare Xcode a creare un repository git per il progetto, e fai clic sul Creare pulsante.
Prima di andare avanti, voglio dedicare alcuni minuti all'esplorazione dell'interfaccia utente di Xcode. Puoi vedere quattro aree distinte:
La barra degli strumenti in alto contiene i pulsanti e i menu che utilizzerai spesso. Come abbiamo visto in precedenza in questa serie, i pulsanti per eseguire e arrestare un'applicazione in diretta nella barra degli strumenti.
Il display al centro della barra degli strumenti è simile al display che trovi in iTunes. Mostra informazioni sullo stato del tuo progetto, ad esempio, ti dirà quando una build ha esito positivo o negativo.
I due controlli segmentati sulla destra della barra degli strumenti possono essere utilizzati per personalizzare l'interfaccia utente di Xcode. Gioca con i vari controlli per scoprire come ognuno di essi cambia l'interfaccia utente di Xcode.
Lo scopo principale della barra laterale sinistra è per la navigazione ed è spesso indicato come Xcode navigatore.
Il navigatore ha diverse schede con il Project Navigator all'estrema sinistra La selezione nella barra laterale sinistra determina cosa viene visualizzato nella vista principale di Xcode, lo spazio di lavoro.
La vista principale o lo spazio di lavoro è l'area in cui trascorrerai la maggior parte del tuo tempo. È il cavallo di battaglia di Xcode e mostra ciò che è stato selezionato nel navigatore.
Mentre la barra laterale sinistra controlla ciò che viene visualizzato nella vista principale di Xcode, il contenuto della barra laterale destra riflette ciò che viene visualizzato o selezionato nella vista principale.
La barra laterale destra, nota anche come ispettore, si adatta a qualsiasi cosa l'utente selezioni nella vista principale.
È tempo di dare un'occhiata al progetto stesso. I contenuti del progetto sono visualizzati nel Project Navigator, la prima scheda nella barra laterale sinistra. Seleziona il primo oggetto nel Navigatore progetto per vedere i dettagli del progetto nella vista principale.
La vista principale è composta da due sezioni, una barra laterale sulla sinistra e una vista dettagliata sulla destra. Nella barra laterale, puoi vedere due elementi, il tuo progetto con un oggetto e i bersagli con due elementi.
È bene sapere in anticipo qual è la differenza tra un progetto e un obiettivo. Come accennato in precedenza, un progetto è un repository per i file, le risorse e i dati necessari per creare uno o più prodotti. Un obiettivo, tuttavia, si riferisce a uno di questi prodotti. Un obiettivo contiene le istruzioni necessarie per costruire un prodotto con le risorse del progetto. Ciò significa che un progetto può contenere più destinazioni per creare più prodotti. Come puoi vedere, un progetto Xcode è più di una semplice cartella con un mucchio di file.
Prima di iniziare a modificare il codice sorgente del progetto, potrebbe essere interessante creare ed eseguire il nuovo progetto per vedere ciò che il modello dell'applicazione ci ha fornito gratuitamente. Clicca il Correre pulsante in alto a sinistra e assicurarsi che lo schema attivo sia configurato per eseguire l'applicazione in iOS Simulator selezionando iPhone Retina (4 pollici).
Se tutto è andato bene, iOS Simulator dovrebbe avviare l'applicazione e visualizzare una vista bianca vuota con la familiare barra di stato in alto.
Mettiamo le mani sporche e modifica l'interfaccia utente dell'applicazione. Apri il Project Navigator e selezionare il file chiamato Main.storyboard. Un file con a .storyboard l'estensione è un file dell'interfaccia utente. In questo file, creiamo l'interfaccia utente dell'applicazione.
Lo storyboard contiene un elemento, un controller di visualizzazione con la vista bianca che hai visto in iOS Simulator pochi istanti fa. Lo spazio di lavoro è composto da una barra laterale che mostra la rappresentazione dell'oggetto del scene dello storyboard. La parte più grande dell'area di lavoro contiene le scene o l'interfaccia utente dell'applicazione.
Seleziona l'oggetto chiamato vista nel Visualizza controller Scena nella barra laterale sinistra e vedi come lo spazio di lavoro e la barra laterale destra aggiornano i loro contenuti. Un mucchio di schede appare nella parte superiore della barra laterale destra. Ciascuna scheda contiene una raccolta di attributi relativi all'oggetto denominato vista.
La metà inferiore della barra laterale destra contiene una sezione con quattro schede. La terza scheda è rappresentata da un'immagine di una scatola tridimensionale. Questa finestra mostra come gli oggetti vengono comunemente visualizzati in Xcode.
Fare clic sulla scheda con l'icona della casella e scorrere l'elenco che appare. L'elenco è indicato come il Libreria di oggetti e contiene vari elementi dell'interfaccia utente, come pulsanti, cursori e interruttori.
All'inizio di questo tutorial, ti ho detto che avremmo creato un'applicazione con l'interattività dell'utente. L'utente dovrebbe essere in grado di toccare lo schermo per cambiarne il colore.
Rilevare tocchi in un'applicazione iOS può essere fatto in diversi modi. Una soluzione è usare un pulsante. Nel Libreria di oggetti, trova l'oggetto chiamato UIButton e trascinalo dalla libreria degli oggetti alla vista bianca nello spazio di lavoro di Xcode.
L'utente dovrebbe essere in grado di toccare qualsiasi parte dello schermo, il che significa che il pulsante dovrebbe coprire l'intero schermo. Hai notato i sei piccoli quadretti ai bordi del pulsante? Spostando i piccoli quadrati, puoi modificare le dimensioni del pulsante.
Regola le dimensioni del pulsante per far sì che copra l'intero schermo. Non preoccuparti della barra di stato nella parte superiore dello schermo.
La vista dietro il pulsante è la vista che cambierà colore quando l'utente tocca lo schermo. Al momento, il pulsante blocca la vista dalla vista dell'utente, quindi è necessario modificare gli attributi del pulsante.
Potresti aver notato che il pulsante è stato aggiunto all'elenco degli oggetti nella barra laterale sinistra, sotto l'oggetto chiamato vista. Seleziona il pulsante dall'elenco degli oggetti e seleziona il Ispettore degli attributi nella barra laterale destra, la quarta scheda da sinistra. Abbiamo solo bisogno di fare due aggiustamenti.
Inizia cambiando il tipo di pulsante da Sistema a costume. Questo renderà il pulsante trasparente.
Il secondo cambiamento che dobbiamo fare è dire all'utente cosa fare cambiando il titolo del pulsante. Il campo di testo accanto all'etichetta Titolo attualmente legge Pulsante. Cambia questo a Tocca per cambiare colore e impostare il Colore del testo al nero quindi è leggibile.
Se hai familiarità con MVC (Model-View-Controller), quindi hai un vantaggio nell'apprendimento dello sviluppo iOS. Il pattern MVC è un pattern trovato in molte lingue e framework, come Ruby on Rails e CodeIgniter.
La vista nella nostra interfaccia utente cade nel V categoria nel modello MVC. Una vista è controllata da un controller. Dai un'occhiata ai nomi dei file in Project Navigator sulla sinistra. I file rappresentano un controller di visualizzazione che controlla la vista nella nostra interfaccia utente.
Cosa fa un controller di visualizzazione? Un controller di visualizzazione può fare tutto ciò che si desidera, ma è in primo luogo responsabile della gestione di tutto ciò che accade nella vista che gestisce. Questo include, per esempio, tocchi da parte dell'utente. Se l'utente tocca il pulsante nella vista, è responsabilità del controllore gestire l'evento tattile.
Come gestiamo un evento touch? Nel caso del nostro pulsante, aggiungiamo un'azione al controller della vista. Un'azione è un nome di fantasia per un metodo. Che cos'è un metodo? Un metodo è al centro una funzione C. Aspettare. Che cosa? Non preoccuparti troppo della terminologia a questo punto. I prossimi due post copriranno C e Objective-C in maggior dettaglio. Quello che devi ricordare è che un metodo è come un metodo in Ruby e PHP o una funzione in JavaScript.
Se invochi un metodo di un controller, fa qualcosa in risposta. In altre parole, se un utente tocca il pulsante e colleghiamo un metodo a quell'evento di tocco, il controller farà qualcosa in risposta a quell'evento di tocco.
Per aggiungere un'azione al controller della vista che gestisce la vista nella nostra interfaccia utente, dobbiamo apportare alcune modifiche al file chiamato TSPViewController.h. File con a .h l'estensione sono file di intestazione. Il file di intestazione di un controller di visualizzazione contiene informazioni sul controller di visualizzazione, ovvero la classe del controller di visualizzazione, per essere precisi. Abbiamo solo bisogno di aggiungere una riga di codice al file di intestazione. Dai un'occhiata a come ho modificato il file di intestazione del controller della vista.
// // TSPViewController.h // Colorific // // Creato da Bart Jacobs il 27/03/14. // Copyright (c) 2014 Tuts +. Tutti i diritti riservati. // #import@interface TSPViewController: UIViewController - (IBAction) changeColor: (id) mittente; @fine
Anche se non ci concentreremo sulla sintassi in questo tutorial, è abbastanza facile capire cosa sta succedendo. Il nome dell'azione o del metodo è cambia colore: e ha un argomento, mittente. Il tipo dell'argomento è id, che significa qualsiasi oggetto. Cosa sono di nuovo gli oggetti? Cavalletta di pazienza. L'azione termina con un punto e virgola.
Abbiamo aggiunto un'azione al controller della vista, ma l'azione non fa molto. Quello che abbiamo fatto è dichiarare un'azione. Ciò significa semplicemente che qualsiasi parte dell'applicazione che assume un picco nel file di intestazione del controller di visualizzazione sa anche che ha un'azione denominata cambia colore:. È come un ristorante che ti offre il menu. Puoi vedere che cosa ha da offrire, ma non ti mostra cosa assomiglia o assomiglia ad ogni elemento del menu.
Quello che dobbiamo fare è implementare l'azione e lo facciamo nel controller della vista file di implementazione. Giusto. Il file con .m l'estensione è il file di implementazione. Seleziona il file chiamato TSPViewController.m e dai un'occhiata ai suoi contenuti.
Ti aspettavi che fosse vuoto? Xcode ci ha fornito un codice standard che è comune per i controller di visualizzazione. La cosa bella di Objective-C è che ha nomi di metodi molto leggibili. Gli sviluppatori si lamentano spesso del fatto che i nomi dei metodi sono lunghi, ma il vantaggio è che tu sai che metodo fa semplicemente guardando il suo nome.
Per implementare il cambia colore: azione, copiamo ciò che abbiamo scritto nel file di intestazione e sostituiamo il punto e virgola finale con una parentesi graffa di apertura e chiusura.
// // TSPViewController.m // Colorific // // Creato da Bart Jacobs il 27/03/14. // Copyright (c) 2014 Tuts +. Tutti i diritti riservati. // #import "TSPViewController.h" @interface TSPViewController () @end @implementation TSPViewController - (void) viewDidLoad [super viewDidLoad]; // Esegue un'impostazione aggiuntiva dopo aver caricato la vista, in genere da un pennino. - (void) didReceiveMemoryWarning [super didReceiveMemoryWarning]; // Elimina le risorse che possono essere ricreate. - (IBAction) changeColor: (id) sender @end
Ho aggiunto il contenuto dell'intero file di implementazione in modo da poter vedere dove è necessario aggiungere l'implementazione del metodo. Deve essere dopo @implementation TSPViewController e prima dell'ultimo @fine. Si noti inoltre che non può essere nidificato in un'altra implementazione del metodo.
È tempo di fare qualcosa di utile nella nostra azione. Non ho intenzione di spiegare ogni riga di codice in dettaglio, ma ti darò il succo di ciò che sta accadendo.
- (IBAction) changeColor: (id) sender int r = arc4random ()% 255; int g = arc4random ()% 255; int b = arc4random ()% 255; UIColor * color = [UIColor colorWithRed: (r / 255.0) green: (g / 255.0) blue: (b / 255.0) alpha: 1.0]; [self.view setBackgroundColor: color];
Come forse saprai, è possibile suddividere un colore in tre colori primari, rosso, verde e blu. Nella nostra azione, generiamo tre numeri casuali tra 0 e 255, e usa questi numeri per creare un colore casuale.
Il metodo che usiamo per creare il colore è molto descrittivo, colorWithRed: verde: blu: alpha:. Nell'ultima riga della nostra azione, abbiamo impostato il colore di sfondo della vista nella nostra interfaccia utente con questo nuovo colore generato in modo casuale.
La parola se stesso si riferisce al controller della vista. Non preoccuparti se nulla di questo ha senso. Diventerà più chiaro una volta che abbiamo trattato le basi di C e Objective-C nelle prossime lezioni.
I commenti sono importanti durante la scrittura del codice. Hai notato i commenti che ho aggiunto all'implementazione di cambia colore:? I commenti a riga singola iniziano con due barre (//), mentre i commenti multilinea iniziano con / * e finisci con * /.
Il metodo è implementato, ma non accadrà nulla di spettacolare quando costruiamo ed eseguiamo l'applicazione. Fai un tentativo se non mi credi.
Ciò che manca è una connessione tra il pulsante e l'azione del controller di visualizzazione. Come dovrebbe il controller di visualizzazione sapere che il cambia colore: l'azione deve essere attivata quando si tocca il pulsante?
Fare questa connessione è semplice. Apri lo storyboard selezionando il file chiamato Main.storyboard e selezionare il Visualizza controller oggetto nel Visualizza scena controller.
Con il Visualizza controller oggetto selezionato, apri il Connections Inspector nella barra laterale destra, la prima scheda da destra. Se hai seguito correttamente i passaggi, dovresti vedere la nostra nuova azione nella sezione etichettata Azioni ricevute.
Dovresti vedere un cerchio vuoto sulla destra di cambia colore: azione. Fare clic e trascinare dal cerchio al pulsante nella nostra interfaccia utente.
Un menu si aprirà quando rilasci il mouse. Il menu a comparsa contiene un elenco di tipi di eventi tattili. L'evento di tocco a cui siamo interessati è chiamato Ritocca Dentro. Questo evento viene attivato quando un utente tocca il pulsante e alza il dito. Questo è il comportamento più comune della maggior parte dei pulsanti.
Dopo aver collegato il pulsante e l'azione, dovresti vedere che la barra laterale destra riflette la connessione appena creata. Grande. Hai completato con successo la tua prima vera applicazione.
Crea ed esegui la tua applicazione in iOS Simulator e inizia a toccare lo schermo del simulatore. Ogni volta che tocchi lo schermo, il suo colore dovrebbe cambiare in un nuovo colore casuale. Quant'è fico?
Abbiamo coperto molto terreno in questo tutorial. Anche se questo post è stato piuttosto lungo, in realtà non abbiamo fatto molto. Se conosci la teoria, puoi creare Colorific in meno di cinque minuti.
Nei prossimi due post, tratterò le basi di C e Objective-C. Questo ti preparerà per le cose interessanti nel resto della serie.
Accentsconagua