Compatibile con Xcode 8

Guida all’interfaccia di Xcode. Come muovere i primi passi su Xcode

ENTRA NEL NOSTRO GRUPPO FACEBOOK

Ti sei messo le mani ai capelli non appena hai visto l’interfaccia di Xcode? Hai dato fuoco al Mac e preso a martellate ciò che rimaneva?

Non distruggere ciò che ti farà guadagnare!

Con questa guida, che è un estratto di un modulo del corso di sviluppo applicazioni per iOS con il linguaggio Swift, analizzerai l’interfaccia dello strumento che più utilizzerai per la creazione delle tue applicazioni, Xcode.

Una delle cose più frustanti per uno sviluppatore alle prime armi è sicuramente quello di trovarsi difronte ad uno strumento, con centinaia di bottoni, che non ha mai utilizzato e che non sa come utilizzarlo. Non ti è mai capitato?

Per questo ho deciso di scrivere questa guida, per poter dare a tutti una visione generale di come si presenta l’interfaccia di Xcode. Voglio comunque precisare che, con questa guida all’interfaccia di Xcode, non ti mostrerò come utilizzare i vari strumenti, cosa che faccio nei vari tutorial e corsi, bensì mi limiterò a farti vedere dove sono e cosa fanno.

La guida non è esaustiva ed offre solo un approccio generale dell’interfaccia di Xcode. Se vuoi approfondire, o sapere come utilizzare i vari strumenti, vai ai corsi o ai tutorial del blog. Quindi ti consiglio di utilizzare questa guida in concomitanza ai tutorial che segui sul blog. 

Premessa fatta! vediamo come utilizzare Xcode e come non perdersi nella sua interfaccia (In alto al tutorial, sotto l’immagine di presentazione, puoi vedere con che versione è compatibile questa guida).

Launchscreen di Xcode

Premesso che puoi scaricare Xcode, cioè il programma con cui crei le applicazioni per iPhone e iPad, da App Store in modo gratuito, questa è l’interfaccia che dovresti vedere al primo avvio di Xcode:

interfaccia di lancio xcode

L’interfaccia è identica per le versioni di Xcode successive alla 6/7 ecc.

  1. Version: Indica la versione di Xcode utilizzata e la rispettiva Build di riferimento tra parentesi.
  2. Abbiamo 3 scelte in questa area:
    Get started with a playground: Ti permette di programmare in Swift con il playground, uno strumento presente dalla versione 6.0 di Xcode (per maggiori info visita questo link: corso gratuito linguaggio swift).
    – Create a new Xcode project: Da qui puoi creare un nuovo progetto per applicazioni iOS, OSX, WatchOS e tvOS.
    Check out an existing project: Ti permette di collegarti ad una repository online e aprire da qui un progetto.
    – La spunta Show this windows when Xcode launches ti apre questa finestra all’avvio di Xcode.
  3. Il Project List ti mostra la lista degli ultimi progetti aperti. In basso puoi aprire altri progetti all’interno del computer (Open another project…).

Le macro aree dell’interfaccia di Xcode

Dato che tu ti occuperai principalmente della creazione di applicazioni, vediamo qual’è l’interfaccia che ti ritroverai al momento in cui creerai un progetto Single View per iOS.

interfaccia Xcode

L’interfaccia è pressoché invariata per la versione di Xcode 6/7 e successive.

La tua interfaccia di Xcode potrebbe essere diversa dalla mia perché potresti non avere tutte le aree aperte. Nel corso di questa guida imparerai a conoscere tutti i trucchi per destreggiarti al meglio con i comandi di Xcode.

Comunque in linea generale l’interfaccia di Xcode è divisa in cinque grandi aree:

  1. La ToolBar
  2. Il Navigator
  3. L’Utilities
  4. La Debug Area
  5. Lo Standard Editor

Ognuna di queste aree permette di compiere determinate azioni o si limita semplicemente a mostrare delle informazioni. Iniziamo ad analizzare tutte queste macro aree partendo dall’alto.

P.S. Ogni spiegazione delle macro aree è divisa dall’altra da ogni titolo scritto in verde.

ToolBar

toolbar Xcode 6

Anche graficamente è ben visibile come la Tool Bar di Xcode sia divisa in 3 sezioni:

Run & Stop

A sinistra della toolbar troviamo i bottoni per l’avvio e lo stop dell’applicazione.

toolbar Xcode 6 sinistra

Run Xcode 6 Avvia l’applicazione.
Stop Xcode 6 Stoppa l’esecuzione dell’applicazione.
target test app A sinistra il nome del progetto e a destra il target dove provare l’applicazione.

Console informazioni build app

console dettagli

Vi informa se l’applicazione è stata Buildata con successo oppure in caso contrario la presenza di errore tramite un triangolo giallo o rosso.

Layout Editor

layout editor xcode 6

Modificano l’aspetto del layout di Xcode aprendo o chiudendo alcune finestre di lavoro.

toolbar show navigator Se deselezionato apre e chiude il Navigator, l’area in verde nello screen sopra.
toolbar show debug area Apre e chiude la Debug area.
toolbar show utilities Apre e chiude l’Utilities area.
Schermata 2014-11-13 alle 00.29.34 Apre lo standard editor. Se selezionate un file del Navigator verrà mostrato nell’area centrale
Schermata 2014-11-13 alle 00.29.39 Apre l’Assistant editor. Divide in due lo standard editor. Mostra ad esempio il file associato ad un elemento dello storyboard.
Schermata 2014-11-13 alle 00.29.44 Apre il Version Editor.

Il Navigator

Il Navigator di Xcode, accessibile dal primo bottone del secondo gruppo in alto a destra, oltre a mostrarci i file contenuti nel progetto offre altre opzioni accessibili dalla propria tool bar.

Project Navigator

navigator xcode 6

Accessibile dal primo bottone in alto a sinistra della tool bar del Navigator permette di visualizzare l’intera lista dei componenti del progetto. Ogni elemento se selezionato mostrerà quello che rappresenta nello Standard Editor (la finestra al centro di Xcode).

Tutti i componenti del progetto sono figli del progetto, il primo file in alto definito dal simbolo blu e dal nome del progetto, infatti le cartelle e gli altri file sono sotto cartelle del file project.

  • Il simbolo M accanto ad un file indica che è avvenuta una Modifica mentre la lettera A indica che quel file è stato aggiunto dal target, cioè automaticamente da Xcode.

La botton tool bar offre la possibilità di aggiungere, selezionare e cercare file:

project navigator xcode 6 botton toolbar

  1. Il simbolo + permette di aggiungere un New File. Comunque è possibile fare la stessa operazione con il tasto destro all’interno del project navigator.
  2. L’orologio mostra all’interno del project navigator i file più recenti.
  3. Il quadrato mostra i file detti di Source Control, in genere quelli che sono stati associati a degli elementi grafici o a modelli.
  4. La barra di ricerca, “cerca” elementi all’interno del project navigator.

Symbol Navigator

Symbol Navigator Xcode 6

Mostra tutti metodi e gli attributi di ogni singola classe presente nel progetto. La botton tool bar permette di visualizzare anche i riferimenti impliciti aggiunti da Xcode oltre a cercare all’interno del Symbolo Navigator.

Find Navigator

Find Navigator Xcode 6

Permette la ricerca di qualsiasi testo all’interno del progetto.

Issue Navigator

Issue Navigator xcode 6

Mostra, qualora fossero presenti, gli errori di compilazione, sintassi o grafici del vostro progetto. Potete dividere gli errori sia per File che per Tipo.

  • Gli errori in Rosso sono errori gravi e non vi permetteranno di avviare l’applicazione.
  • Gli errori in Giallo sono meno gravi e vi permettono comunque di avviare l’applicazione.

[addtoany]

Utilities

Utilities xcode 6

Area Utilities di divide in due parti. La parte superiore (quella in verde) offre degli strumenti sia per la personalizzazione sia per l’informazione di un determinato file o oggetto grafico selezionato.

Nello screen l’utilities area superiore mostra le informazioni di un View Controller dello Storyboard.

La parte inferiore permette di aggiungere nuovi file, blocchi di codice pre impostati, oggetti grafici e altro.

Per adesso limitiamoci a visionare la parte superiore. Cercate di memorizzare soprattutto i nomi perché in ogni tutorial, sia su questo sito che su altri, vengono nominati praticamente sempre.

File Inspector

file ispector xcode 6

Se riguarda un elemento grafico dello storyboard permette di, settare alcune impostazioni sul comportamento all’interno dell’Interface Builder, come la possibilità di usare l’auto layout, le Size Classes e inoltre fornisce informazioni generali sull’oggetto in questione.

Se invece riguarda un file, come una classe, da informazioni generali su quel file.

Quick Help

quick help xcode 6

Il quick help provvede a fornire informazioni sia su un determinato oggetto grafico selezionato che su metodi, classi e attributi del codice.

Uno degli strumenti meno utilizzati ma che se usato con costanza vi permette di apprendere tantissime cose sui framework utilizzati.

Identity Inspector

Identity Inspector xcode 6

Accessibile solo per gli oggetti dello storyboard, in genere viene utilizzato per associare ad un elemento grafico una nuova classe di controllo. In caso contrario mostra la classe standard di controllo.

Attributes Inspector

Attributes Inspector xcode 6

Uno degli strumenti più utilizzati, permette di modificare gli attributi di un oggetto grafico. Ad esempio può cambiare il colore di un bottone, il testo di sfondo (placeholder) di un TextField, il tipo di tastiera da mostrare, il background di un oggetto ecc ecc.

Size Inspector

Size Inspector xcode 6

Permette di modificare le dimensioni di un oggetto grafico e, qualora fossero presenti, mostra e permette di modificare i vincoli di auto layout creati.

Connection Inspector

Connection Inspector xcode 6

Mostra le connessioni creata sia tra i vari elementi grafici che tra un elemento e il codice (ad esempio le IBOutlet o le IBAction).

Object Library

Siamo passati nella parte inferiore dell’Utilities. Uno degli strumenti più utilizzati di questa sezione è l’Object Library.

Object Library xcode 6

Permette grazie al drag and drop (trascina e lascia cadere) di aggiungere elementi alla grafica della propria applicazione. Potete aggiungere bottoni ad una View come Table View o View Controller ecc ecc.

Start typing and press Enter to search

Segue ed Unwind Segue in Swift. Passare dati avanti e indietro tra ViewController