Share
Uno dei più grandi strumenti che Apple offre ai suoi sviluppatori iPhone è Interface Builder. Interface Builder è un'applicazione che consente allo sviluppatore di creare l'interfaccia grafica utente (GUI) per la tua app in un editor di stili WYSIWYG (What You Is What You Get). Quando l'app è compilata, IB genera quindi tutto il codice necessario per te. Ciò consente di creare interfacce in modo semplice e rapido. Questo tutorial ti guiderà attraverso la creazione di interfacce in Interface Builder e l'uso dei diversi elementi forniti da Apple
Prima di continuare con uno degli esempi in questo tutorial, è necessario leggere le linee guida sull'interfaccia umana di iPhone di Apple. Questo documento contiene informazioni essenziali sulla creazione di interfacce per l'iPhone, e il mancato rispetto delle linee guida definite potrebbe causare il rifiuto della tua app quando viene inviata all'App Store. Questo documento verrà discusso in maggior dettaglio mentre procediamo insieme e tutti gli esempi in questo tutorial si conformeranno a queste linee guida.
Interface Builder ha un layout abbastanza semplice. Consiste di quattro finestre principali, la vista, la libreria, il browser del documento pennino (o xib) e l'ispettore. Quindi cosa fanno ognuna di queste finestre? La vista è dove costruisci la tua interfaccia. Trascinerete elementi dalla finestra della libreria e sulla vista per posizionarli. Il browser documenti ti consente di esplorare gerarchicamente gli elementi che hai inserito nel tuo file pennino. Infine, l'ispettore ti mostra tutti i diversi attributi dell'elemento selezionato e ti consente di modificarli.
Dal lato più tecnico, Interface Builder consente al codice sorgente dell'applicazione di interagire con l'interfaccia in due modi fondamentali: prese e azioni. Gli outlets definiscono un elemento a cui si avrà accesso nel codice sorgente, quindi è possibile effettuare la connessione dalle proprie prese a quegli specifici elementi dell'interfaccia utente in Interface Builder.
Una presa è definita in questo modo:
IBOutlet id someElement;
La dichiarazione di IBOutlet potrebbe anche essere messa con la dichiarazione di proprietà in questo modo:
@property (nonatomic, retain) IBOutlet id someElement;
In ogni caso è accettabile. Un'azione è un tipo speciale di metodo che viene chiamato in risposta a un evento (ad esempio, l'utente tocca un pulsante) definito in Interface Builder. Un'azione viene definita facendo in modo che i metodi restituiscano il tipo IBAction, come questo:
-(IBAction) someAction: (id) del mittente;
Discuteremo di prese e azioni in modo più dettagliato in seguito.
La prima cosa che devi fare prima di giocare con Interface Builder è creare un nuovo progetto Xcode. Apri Xcode fai clic su Crea un nuovo progetto Xcode, quindi seleziona un progetto basato sulla vista. Titolo "contatore".
NOTA:
Assicurati di aver impostato il tuo target su iPhone e non su iPad in Xcode.
Ora che hai un progetto Xcode, vogliamo modificare il CounterViewController creato automaticamente per definire i nostri punti vendita e le nostre azioni. Aprire il file CounterViewController.h e modificarlo in modo che assomigli al seguente:
#importare@interface CounterViewController: UIViewController IBOutlet UILabel * countLabel; Numero intero NS; @property (nonatomic, retain) UILabel * countLabel; @property (nonatomic) NSInteger count; - (IBAction) aggiungere: (UIButton *) mittente; - (IBAction) sub: (UIButton *) mittente; - (vuoto) displayCount; @fine
Definisce un numero intero per contenere il conteggio e una presa per un'etichetta che visualizzerà quel conteggio. Definisce anche un insieme di metodi che riceveranno eventi da IB. Ora dobbiamo definire un'implementazione per queste azioni, quindi apri il corrispondente file CounterViewController.m e apporta le seguenti modifiche ad esso:
#import "CounterViewController.h" @implementation CounterViewController @synthesize count; @synthesize countLabel; - (IBAction) aggiungere: (UIButton *) mittente count ++; [self displayCount]; - (IBAction) sub: (UIButton *) mittente count--; [self displayCount]; - (void) displayCount [self.countLabel setText: [[NSString alloc] initWithFormat: @ "% d", self.count]]; ... - (void) dealloc [countLabel release]; [super dealloc]; @fine
Questo è semplicemente un file. Tutto ciò che fa è quando l'azione viene chiamata è modificare il conteggio verso l'alto o verso il basso e quindi visualizza tale conteggio sull'etichetta.
Ora espandi la cartella delle risorse in Xcode e vedrai tre file. Due di questi sono file .xib di Interfcae Builder. Per ora puoi ignorare MainWindow.xib, ci concentreremo sul CounterViewController.xib. Aprilo ora, questo avvierà il generatore di interfacce e vedrai una schermata come questa:
È tempo di iniziare a costruire la nostra interfaccia! Vai alla scheda della biblioteca e prendi un pulsante e trascinalo sulla tua vista. Se trascini il pulsante per un momento, noterai che appaiono delle guide blu. Interfcae Builder ti fornirà diverse guide per aiutare a collocare elementi all'interno della vista. Lo vedrete più mentre iniziamo a posizionare più elementi. Fatelo due volte. Quindi, trova un'etichetta e posizionala sulla tua vista.
Ora, seleziona uno dei pulsanti, vai alla scheda degli attributi nell'ispettore e cambia il suo titolo in "+". Fai la stessa cosa per l'altro pulsante, ma cambia il suo titolo in "-". Fare doppio clic ti permetterà anche di cambiare titolo. Fai doppio clic sull'etichetta e modifica il suo testo su "0", potresti anche voler cambiare l'allineamento del testo al centro, cosa che puoi fare nella scheda attributi dell'ispettore.
Ora dovresti avere un'interfaccia simile a questa:
L'ultima cosa che devi fare per far funzionare la tua contro-app è connettere l'interfaccia e la sorgente.
Collegare l'uscita countLabel all'etichetta effettiva. Questo può essere fatto facendo clic e trascinando il controllo dall'oggetto Proprietario del file, nella finestra del documento, fino all'etichetta, nella vista. Apparirà una piccola finestra grigia con due opzioni, una sarà la countLabel definita in precedenza e l'altra sarà la vista (questa è una presa predefinita richiesta per i controllori di vista, avrà un trattino per indicare che è già connessa a qualcosa ). Fare clic sull'opzione countLabel per selezionarlo.
Ora collegheremo i nostri pulsanti alle nostre azioni di aggiunta e sottrazione. Per i nostri scopi puoi semplicemente fare clic tenendo premuto il tasto e trascinare i pulsanti sull'oggetto proprietario del file (e selezionare l'azione appropriata per ciascun pulsante), tuttavia prendi nota del fatto che se apri il pannello di connessione sull'ispettore (che puoi arriva premendo il comando + 2), elenca una serie di eventi diversi che puoi utilizzare per attivare le tue azioni e ti permettono di creare una vasta gamma di funzionalità da un semplice pulsante. Per impostazione predefinita utilizza l'evento Ritocco interno.
Ora puoi tornare a Xcode e fare clic su build ed esegui e l'applicazione dovrebbe essere avviata nel simulatore. Se hai cablato tutto correttamente, dovresti essere in grado di aggiungere e sottrarre dal conteggio e dovresti vedere la modifica dell'etichetta per riflettere.
Un controllo UISegmented è come un paio di pulsanti incollati insieme, con una differenza importante. Lo scopo generale di un UISegmentedControl non è quello di essere come un pulsante, ma per la selezione. Consente di espandere la funzionalità della nostra app Counter, utilizzando un controllo segemted per consentire all'utente di selezionare tra "count by one" o "count by two" mode.
La prima cosa che devi fare è aprire il file CounterViewController.h in Xcode e aggiungere una definizione IBAction e un intero per memorizzare la nostra modalità.
Cambialo per assomigliare a questo:
#importare@interface CounterViewController: UIViewController IBOutlet UILabel * countLabel; Numero intero NS; Modalità NSInteger @property (nonatomic, retain) UILabel * countLabel; @property (nonatomic) NSInteger count; @property (nonatomic) modalità NSInteger; - (IBAction) aggiungere: (UIButton *) mittente; - (IBAction) sub: (UIButton *) mittente; - Modalità (IBAction): mittente (UISegmentedControl); - (vuoto) displayCount; @fine
Questo è un buon momento per sottolineare il fatto che finora le definizioni di azione in questo tutorial hanno tutte definito un tipo di classe per il mittente, che limita gli oggetti che possono chiamare questa azione a quelli di quel tipo di classe. Trovo che questa sia una pratica utile perché ti impedisce di connettere le cose in modo errato. Va notato, tuttavia, che questo è non un requisito, queste definizioni potevano altrettanto facilmente essere:
- (IBAction) aggiungere: (id) del mittente; - (IBAction) sub: (id) mittente; - Modalità (IBAction): (id) mittente;
Permettendo a qualsiasi oggetto di chiamarli. In entrambi i casi è necessario che l'implementazione di queste azioni coincida, quindi aprire CounterViewController.m e apportare le modifiche seguenti:
#import "CounterViewController.h" @implementation CounterViewController @synthesize count; @synthesize countLabel; @sinthesize mode; - (IBAction) aggiungere: (UIButton *) mittente switch (mode) case 0: count ++; rompere; caso 1: count + = 2; rompere; default: break; [self displayCount]; - (IBAction) sub: (UIButton *) sender switch (mode) case 0: count--; rompere; caso 1: count - = 2; rompere; default: break; [self displayCount]; - Modalità (IBAction): (UISegmentedControl) mittente mode = sender.selectedSegmentIndex; … @fine
Ora dobbiamo modificare l'interfaccia. Quindi, apri CounterViewController.xib.
Vai alla libreria e trascina in un controllo segmentato. Ora dobbiamo configurarlo. Assicurati che il controllo segmentato sia selezionato e apri il pannello degli attributi dell'ispettore. Scendendo leggermente sotto il menu a discesa del segmento, che dovrebbe leggere "segmento 0 - prima", vogliamo cambiare il titolo in "Uno". Ora apri il menu dei segmenti e passa al segmento "segmento 1 - secondo" e cambia il suo titolo in "Due".
Dobbiamo anche collegarlo alla nostra azione. Aprire il pannello delle connessioni e trascinare da "Valore modificato" al proprietario dei file. Seleziona la modalità "azione".
Questo è tutto. Ora dovresti avere un'app contatore che può contare su o giù di uno o due.
Finora gli elementi di cui abbiamo parlato hanno numerosi possibili usi e pochissime restrizioni. La barra degli strumenti è il primo elemento di cui discuteremo che ha delle restrizioni nelle linee guida per l'interfaccia umana di iPhone. Se pianifichi di utilizzare pesantemente le barre degli strumenti, dovresti consultare tali linee guida, ma in breve, le barre degli strumenti dovrebbero sempre essere collocate nella parte inferiore dell'interfaccia e dovrebbero essere composte da pulsanti con icone non più grandi di 44px per 44px. Non è un elemento di navigazione, e questa è una distinzione importante. Se desideri utilizzarlo per modificare la visualizzazione o le modalità nella tua app, utilizza invece una barra delle schede. Tuttavia, se si seguono queste linee guida rispetto alla barra degli strumenti è molto semplice; è semplice una collezione di pulsanti su una barra, e quindi può essere usato esattamente come si farebbe con un gruppo di pulsanti. L'unica differenza è che Apple fornisce un set di preset di sistema più ampio rispetto a quello dei pulsanti standard. Puoi anche posizionare i distanziatori nella barra degli strumenti tra i pulsanti per cambiare la loro posizione. Proviamolo.
Torna al CounterViewController.h e aggiungi la seguente riga dopo le precedenti dichiarazioni di azione.
- (IBAction) resettare: (UIBarButtonItem *) del mittente;
Nota:
Il mittente qui è un UIBarButtonItem, non un UIToolbar. Ogni UIBarButtonItem invia il proprio evento, la UIToolbar è semplicemente un contenitore.
Ora, aggiungi questo al tuo CounterViewController.m, seguendo le azioni che abbiamo definito in precedenza:
- (IBAction) reset: (UIBarButtonItem *) sender count = 0; [self displayCount];
Tornando in IB, rilasciamo una UIToolbar dalla libreria sulla vista, notiamo che ha già un pulsante su di essa. Per selezionare quel pulsante devi fare doppio clic su di esso (il primo clic seleziona la barra degli strumenti, il secondo seleziona il pulsante).
Vai agli attributi nell'ispettore. Noterai che ci sono molte meno opzioni per un UIBarButtonItem che per altri elementi. Ciò è dovuto al fatto che le barre degli strumenti sono pensate per essere uniformi, quindi cose come il colore devono essere impostate per l'intera barra degli strumenti (è possibile provare semplicemente facendo clic una volta sulla barra degli strumenti e quindi aprendo l'ispettore attributi). Cambia l'identificativo del pulsante in "Cestino".
Quindi connetti il pulsante al comando di reset controllando il trascinamento sul proprietario del file. Se esegui la tua app, dovresti essere in grado di riposare il conteggio toccando il cestino.
Lo switch è probabilmente l'elemento più limitato fornito da Interface Builder. Non ha quasi opzioni di personalizzazione. Ha uno stato "On" e uno stato "Off". Non è possibile modificare le etichette o i colori. Gli interruttori devono sempre apparire identici, indipendentemente da cosa. Nonostante siano molto limitati, gli switch sono utili occasionalmente. Ad esempio, le impostazioni tendono a fare un uso pesante degli switch e lo switch può essere utile per attivare e disattivare le funzionalità nella tua app, questo è esattamente ciò che faremo. Faremo un interruttore che si accenderà e spegnerà se possiamo contare i negativi nella nostra app.
La prima cosa da fare è apportare le seguenti modifiche al tuo CounterViewController.h:
#importare@interface CounterViewController: UIViewController ... Booleano negativo; ... @property (nonatomic) Boolean negative; ... - (IBAction) negativeSwitch: (UISwitch *) mittente; ... @end
Questo semplicemente definisce un booleano che memorizzerà se siamo in modalità negativa o meno e un'azione inviata da un UISwitch che cambierà quel valore booleano. Quindi ora definiamo la nostra azione e facciamo in modo che il resto della nostra applicazione risponda al nostro nuovo booleano negativo. Modifica il tuo file CounterViewController.m in modo che corrisponda al seguente:
#import "CounterViewController.h" @implementation CounterViewController ... @synthesize negative; ... - (IBAction) sub: (UIButton *) mittente switch (mode) caso 0: count--; rompere; caso 1: count - = 2; rompere; default: break; if (negativo) // Questo semplicemente controlla se la modalità negativa è disattivata se (count < 0) //and if count is negative count = 0; //sets it back to zero [self displayCount]; … - (void)viewDidLoad negative = TRUE; - (IBAction)negativeSwitch:(UISwitch*)sender negative = sender.on; if (!negative) if (count < 0) count = 0; [self displayCount];
Tutto ciò che viene fatto qui è impostare la modalità negativa in base allo stato dell'interruttore, e poi quando si verifica una sottrazione controllando in quale modalità lo switch è attualmente inserito (memorizzato nel booleano negativo).
Tornare al generatore di interfacce, trovare un interruttore nella libreria e rilasciarlo nella vista. Ora dobbiamo connettere lo switch all'azione, ma nel caso dello switch come il controllo segmentato vogliamo utilizzare l'evento Value Changed, non ritoccare all'interno. Quindi vai alla scheda delle connessioni nell'Inspector e trascina sul Proprietario del file e connettiti a negativeMode: action. Potresti anche voler mettere un'etichetta per marcare ciò che fa l'interruttore.
A questo punto la tua applicazione dovrebbe apparire come sopra.
L'ultimo e più complicato elemento di cui discuteremo è il cursore. I cursori rappresentano un intervallo di valori (che puoi specificare), che cambiano mentre ti sposti lungo il cursore. Questo elemento è estremamente personalizzabile, ma la maggior parte di queste personalizzazioni deve essere eseguita in codice e va oltre lo scopo di questo tutorial. Lo useremo per creare un moltiplicatore e un divisore per il nostro contatore.
La prima cosa di cui abbiamo bisogno è, hai indovinato, un'altra azione. Aggiungi quanto segue al CounterViewController.h con il resto delle dichiarazioni di azione:
- (IBAction) moltiplicatore: (UISlider *) del mittente;
Successivamente dobbiamo implementare la funzione di moltiplicazione e divisione per il nostro contatore, quindi modifica il tuo CounterViewController.m in questo modo:
#import "CounterViewController.h" @implementation CounterViewController ... @synthesize mult; ... - (IBAction) aggiungere: (UIButton *) mittente count + = modalità; conteggio * = mult; se (! negativo) if (conta < 0) count = 0; [self displayCount]; - (IBAction)sub:(UIButton*)sender count -= mode; count /= mult; if (!negative) if (count < 0) count = 0; [self displayCount]; - (IBAction)mode:(UISegmentedControl*)sender mode = sender.selectedSegmentIndex+1; //Don't forget to add the +1 here - (IBAction)multiplier:(UISlider*)sender mult = sender.value; … - (void)viewDidLoad negative = TRUE; mult=1; … @end
Ora quando aggiungi o sottrai il numero viene moltiplicato o diviso per il valore del cursore. Se il cursore è a 1 (che sarà il limite inferiore) il contatore agisce normalmente su 9 (che sarà il massimo).
Tornati in IB, prendi e trascina un cursore dalla libreria nella vista e apri i suoi attributi nell'ispettore. La prima cosa che dovresti notare qui sono i valori. Vogliamo cambiarli un po '. Come accennato in precedenza, si desidera che il valore minimo sia 1, il valore massimo sia 9 e il valore iniziale sia 1. Deseleziona la casella continua in modo da non ottenere alcun punto decimale e il gioco è fatto. Collega semplicemente l'evento "valore modificato" del tuo cursore al proprietario del file e hai il tuo moltiplicatore!
La tua app finale dovrebbe assomigliare a quella mostrata qui sotto:
Questo tutorial ha appena scalfito la superficie di ciò che è possibile in Interface Builder. È un'applicazione estremamente potente. Oggi, abbiamo coperto l'utilizzo di base di IB e gli elementi più basilari forniti nella libreria IB. Questo tutorial ha mostrato come è possibile creare un'applicazione completamente funzionale, utilizzando Interface Builder, senza molto codice. Ricordati sempre di consultare le linee guida per l'interfaccia umana dell'iPhone prima di fare qualcosa di drastico, e per una maggiore ispirazione e assistenza per l'interfaccia assicurati di controllare l'UICatalog di Apple.
Accentsconagua