Share
Unul dintre cele mai mari instrumente pe care Apple le oferă dezvoltatorilor iPhone-ului său este Interface Builder. Interface Builder este o aplicație care vă permite dezvoltatorului să creeze Graphical User Interface (GUI) pentru aplicația dvs. într-un editor de stil WYSIWYG (What You Is What You Get). Atunci când aplicația este compilată, IB generează apoi tot codul necesar pentru dvs. Acest lucru vă permite să creați rapid și ușor interfețe. Acest tutorial vă va îndruma prin crearea interfețelor în Interface Builder și prin utilizarea diferitelor elemente pe care le oferă Apple
Înainte de a continua cu oricare dintre exemplele din acest tutorial, ar trebui să citiți Ghidul Interfeței Umane iPhone Apple. Aceste documente conțin informații esențiale despre crearea interfețelor pentru iPhone și nerespectarea indicațiilor pe care le stabilește ar putea determina respingerea aplicației atunci când este trimisă la App Store. Acest document va fi discutat mai detaliat pe măsură ce vom merge și toate exemplele din acest tutorial se vor conforma acestor instrucțiuni.
Interface Builder are un aspect destul de simplu. Este alcătuită din patru ferestre principale, vizualizarea, biblioteca, browserul de documente pentru nib (sau xib) și inspectorul. Deci, ce fac fiecare din aceste ferestre? Vederea este locul unde vă construiți interfața. Veți trage elemente din fereastra bibliotecii și în vizualizare pentru a le plasa. Browserul de documente vă permite să răsfoiți, ierarhic, elementele pe care le-ați plasat în fișierul dvs. de fișiere. În cele din urmă, inspectorul vă arată toate atributele diferite ale elementului selectat și vă permite să le editați.
În ceea ce privește partea tehnică, Interface Builder permite codului sursă al aplicației să interacționeze cu interfața în două moduri de bază: ieșiri și acțiuni. Prizele definesc un element la care veți avea acces în codul sursă, puteți apoi să vă conectați de la prizele dvs. la acele elemente UI specifice din Interface Builder.
O priză este definită astfel:
IBOutlet id someElement;
Instrucțiunea IBOutlet ar putea fi pusă și cu declarația de proprietate cum ar fi:
@property (nonatomic, reține) IBOutlet id someElement;
Oricum este acceptabil. O acțiune este un tip special de metodă care se numește ca răspuns la un eveniment (adică utilizatorul întrerupe un buton) pe care îl definiți în Interface Builder. O acțiune este definită prin faptul că metodele returnează tipul IBAction, astfel:
-(IBAction) someAction: (id) expeditor;
Vom discuta mai târziu despre piețe și acțiuni.
Primul lucru pe care trebuie să-l faceți înainte de a putea juca cu Interface Builder este să creați un nou proiect Xcode. Deschideți Xcode, faceți clic pe Creare proiect nou Xcode, apoi selectați un proiect bazat pe vizualizare. Titlul este "contra".
NOTĂ:
Asigurați-vă că ați setat țintă la iPhone și nu la iPad în Xcode.
Acum că aveți un proiect Xcode, dorim să modificăm CounterViewController creat automat pentru a defini punctele de desfacere și acțiunile noastre. Deschideți fișierul CounterViewController.h și modificați-l astfel încât să arate următoarele:
#import@ interfata CounterViewController: UIViewController IBOutlet UILabel * countLabel; Numar NS; @property (nonatomic, reține) UILabel * countLabel; @property (nonatomic) Count NSInteger; - (IBAction) adăugați: (UIButton *) expeditor; - (IBAction) sub: (UIButton *) expeditor; - (void) displayCount; @Sfârșit
Aceasta definește un număr întreg care să țină numărul și o priză la o etichetă care va afișa acel număr. De asemenea, definește un set de metode care vor primi evenimente de la IB. Acum trebuie să definim o implementare a acestor acțiuni, deschizând astfel fișierul CounterViewController.m corespunzător și efectuând următoarele modificări la acesta:
#import CounterViewController.h "@implementation CounterViewController @synthesize count; @synthesize countLabel; - (IBAction) adăugați: (UIButton *) expeditor count ++; [self displayCount]; - (IBAction) sub: (UIButton *) expeditor count--; [self displayCount]; - (void) displayCount [auto.countLabel setText: [[NSString alocare] initWithFormat: @ "% d", auto.count]]; ... - (void) dealloc [countLabel release]; [super dealloc]; @Sfârșit
Acesta este destul de simplu dosar. Tot ceea ce face este ori de câte ori se numește acțiunea este modificarea contorului fie în sus, fie în jos și apoi afișează acel număr pe etichetă.
Acum extindeți folderul de resurse în Xcode și veți vedea trei fișiere. Două dintre acestea sunt fișiere .xib de la Interfcae Builder. Pentru moment, puteți ignora MainWindow.xib, ne vom concentra pe CounterViewController.xib. Deschideți-l acum, acesta va începe interfața constructor și veți vedea un ecran ca acesta:
Este timpul sa incepem sa construim interfata noastra! Mergeți la fila bibliotecă și apucați un buton și trageți-l pe vizualizarea dvs. Dacă trageți butonul în jur pentru o clipă, veți observa că ghidajele albastre apar. Interfcae Builder vă va oferi diferite ghiduri pentru a ajuta elementul de loc în cadrul vizualizării. Veți vedea acest lucru mai mult pe măsură ce începem să aducem mai multe elemente. Faceți asta de două ori. Apoi, găsiți o etichetă și plasați-o pe vizualizarea dvs..
Acum, selectați unul dintre butoane, accesați fila atribute din inspector și schimbați titlul în "+". Faceți același lucru pentru celălalt buton, dar schimbați titlul acestuia la "-". Dublu-clic va permite, de asemenea, să schimbați titlul. Faceți dublu clic pe etichetă și modificați textul la "0"; de asemenea, puteți modifica alinierea textului la centru, ceea ce se poate face în fila atribut a inspectorului.
Acum ar trebui să aveți o interfață care arată aproximativ așa:
Ultimul lucru pe care trebuie să-l faceți pentru a vă face munca de contor este să conectați interfața și sursa.
Conectați priza de citire la eticheta actuală. Acest lucru se poate face prin clic și trăgând de control din obiectul Proprietății fișierului, în fereastra documentului, în etichetă, în vizualizare. Va apărea o fereastră mică, gri, cu două opțiuni, una va fi numărătoarea pe care am definit-o mai devreme, iar cealaltă va fi vizualizarea (aceasta este o priză implicită necesară pentru controlorii de vizualizare, va avea o liniuță pentru a indica că este deja conectată la ceva ). Faceți clic pe opțiunea de numărare pentru a selecta această opțiune.
Acum, vom conecta butoanele noastre la acțiunile noastre de adăugare și scădere. Pentru scopurile noastre, puteți pur și simplu să faceți clic și să trageți de la butoane la obiectul proprietății Fișierului (și să selectați acțiunea potrivită pentru fiecare buton), totuși luați notă de faptul că dacă deschideți panoul de conexiuni pe inspector ajungeți la apăsarea comenzii + 2), afișează o serie de evenimente diferite pe care le puteți utiliza pentru a declanșa acțiunile dvs. și pentru a vă permite să creați o gamă imensă de funcții dintr-un simplu buton. Implicit folosește evenimentul Touch Up Inside.
Acum puteți să reveniți la Xcode și să faceți clic pe construire și rulare, iar aplicația dvs. ar trebui lansată în simulator. Dacă ați conectat totul corect, ar trebui să puteți adăuga și scădea din contor și ar trebui să vedeți modificarea etichetei pentru a reflecta faptul că.
Un control UISegmented este ca o pereche de butoane lipite împreună, cu o diferență majoră. Scopul general al unui control UISegmented nu este să fie un buton, ci pentru selecție. Permite extinderea funcționalității aplicației noastre Counter, folosind un control segemtned pentru a permite utilizatorului să selecteze fie între modurile "numărătoarea după unu" fie "numărătoarea cu două".
Primul lucru pe care trebuie să-l faceți este să deschideți fișierul CounterViewController.h în Xcode și să adăugați o definiție IBAction și un număr întreg pentru a stoca modul nostru.
Modificați-l astfel încât să arate astfel:
#import@ interfata CounterViewController: UIViewController IBOutlet UILabel * countLabel; Numar NS; Modul NSInteger @property (nonatomic, retain) UILabel * countLabel; @property (nonatomic) Count NSInteger; @property (nonatomic) modul NSInteger; - (IBAction) adăugați: (UIButton *) expeditor; - (IBAction) sub: (UIButton *) expeditor; - Modul (IBAction): expeditor (UISegmentedControl); - (void) displayCount; @Sfârșit
Este un moment bun pentru a sublinia faptul că, până în prezent, definițiile de acțiune din acest tutorial au definit toate tipurile de tip pentru expeditor, care restricționează obiectele care pot numi această acțiune la cele ale acelui tip de clasă. Consider că aceasta este o practică utilă pentru că vă împiedică să conectați lucrurile incorect. Trebuie remarcat, totuși, că aceasta este nu o cerință, aceste definiții ar putea fi la fel de ușor:
- (IBAction) se adaugă: (ID) expeditor; - (IBAction) sub: (id) expeditor; - modul (IBAction): (id) expeditor;
Permite oricărui obiect să le apeleze. Oricum ar trebui să faceți ca implementarea acestor acțiuni să se potrivească, deschideți astfel CounterViewController.m și efectuați aceste modificări:
#import CounterViewController.h "@implementation CounterViewController @synthesize count; @synthesize countLabel; modul @synthesize; - (IBAction) adăugați: (UIButton *) expeditor switch (mode) caz 0: count ++; pauză; cazul 1: numărul + = 2; pauză; prestabilit: pauză; [auto displayCount]; - (IBAction) sub: (UIButton *) expeditor comutare (mod) caz 0: numar--; pauză; cazul 1: număr - = 2; pauză; prestabilit: pauză; [auto displayCount]; - Modul (IBAction): expeditor (UISegmentedControl) mode = sender.selectedSegmentIndex; … @Sfârșit
Acum trebuie să modificăm interfața. Deci, deschideți CounterViewController.xib.
Du-te la bibliotecă și trageți într-un control segmentat. Acum trebuie să o configuram. Asigurați-vă că este selectat controlul segmentat și deschideți panoul de atribute al inspectorului. Trecând în jos puțin căi sub rubrica drop-down, care ar trebui să citească "segmentul 0 - primul", dorim să schimbăm titlul în "One". Acum trageți în jos meniul segmentului și treceți la segmentul "segment 1 - secundă" și schimbați titlul acestuia la "Două".
Trebuie, de asemenea, să conectăm acest lucru la acțiunea noastră. Deschideți panoul de conexiuni și trageți din "Valoare modificată" în Proprietarul de fișiere. Selectați modul "acțiune".
Asta e. Ar trebui să aveți acum o aplicație de contorizare care poate conta în sus și în jos cu una sau două.
Până acum, elementele despre care am vorbit au numeroase utilizări posibile și foarte puține restricții. Bara de instrumente este primul element pe care îl vom discuta care are restricții în Ghidul Interfeței Umane iPhone. Dacă intenționați să folosiți cu greu barele de instrumente, ar trebui să consultați aceste linii directoare, dar pe scurt, barele de instrumente ar trebui să fie întotdeauna plasate în partea de jos a interfeței și ar trebui să fie compuse din butoane cu pictograme care nu depășesc 44 de pixeli până la 44 de pixeli. Nu este un element de navigație, și aceasta este o distincție importantă. Dacă doriți să îl utilizați pentru a modifica vizualizarea sau modurile din aplicație, utilizați în schimb o bară Tab. Cu toate acestea, dacă urmați aceste instrucțiuni decât bara de instrumente este foarte simplă; este simplu o colecție de butoane pe o bară și, prin urmare, poate fi utilizată exact așa cum ar fi o grămadă de butoane. Singura diferență este că Apple furnizează un set mai mare de setări presetate de sistem decât pentru butoanele standard. De asemenea, puteți amplasa distanțiere în bara de instrumente între butoane pentru a schimba pozițiile acestora. Să încercăm.
Reveniți la CounterViewController.h și adăugați următoarea linie după declarațiile de acțiune anterioare.
- (IBAction) reset: (UIBarButtonItem *) expeditor;
Notă:
Expeditorul aici este un UIBarButtonItem, nu un UIToolbar. Fiecare UIBarButtonItem trimite evenimentul propriu, bara UIT este pur și simplu un container.
Acum, adăugați acest lucru la CounterViewController.m, urmând acțiunile pe care le-am definit mai devreme:
- (IBAction) resetare: (UIBarButtonItem *) expeditor count = 0; [self displayCount];
Înapoi în IB, să lăsăm o bibliotecă UIT din bibliotecă în vedere, rețineți că are deja un buton pe ea. Pentru a selecta acel buton, trebuie să faceți dublu clic pe el (primul clic selectează bara de instrumente, al doilea selectează butonul).
Mergeți la atributele din inspector. Veți observa că există opțiuni semnificativ mai puține pentru UIBarButtonItem decât pentru alte elemente. Acest lucru se datorează faptului că barele de instrumente sunt menite a fi uniforme, deci lucrurile precum culoarea trebuie să fie setate pentru întreaga bara de instrumente (puteți încerca acest lucru făcând clic o singură dată pe bara de instrumente și apoi deschizând inspectorul atributelor). Modificați identificatorul butonului în "Coșul de gunoi".
Apoi, conectați butonul la actonul de resetare prin glisare spre proprietarul fișierului. Dacă rulați aplicația, acum ar trebui să puteți restabili contorizarea atingând coșul de gunoi.
Comutatorul este probabil cel mai restricționat element furnizat de Interface Builder. Nu are aproape opțiuni de personalizare. Are o stare "On" și o stare "Off". Nu puteți schimba etichetele sau culorile. Comutatoarele trebuie să pară întotdeauna la fel. În ciuda faptului că sunt foarte restricționate, comutatoarele sunt utile ocazional. De exemplu, setările tind să facă uz de comutatoare și comutatorul poate fi util pentru activarea și dezactivarea funcțiilor din aplicația dvs. - exact ceea ce vom face. Vom face un comutator care va porni și opri dacă putem conta negativ în aplicația noastră.
Primul lucru pe care trebuie să faceți este să efectuați următoarele modificări la CounterViewController.h:
#import@interface CounterViewController: UIViewController ... Boolean negativ; ... @property (nonatomic) negativ Boolean; ... - (IBAction) negativeSwitch: (UISwitch *) expeditor; ... @end
Acest lucru definește pur și simplu un boolean care se va stoca dacă suntem mod negativ sau nu și o acțiune trimisă de o interfață UIS care va schimba booleanul. Așadar, acum permitem să definim acțiunea noastră și să facem ca restul aplicației noastre să răspundă noului nostru boolean negativ. Modificați-vă fișierul CounterViewController.m pentru a se potrivi cu următoarele:
#import "CounterViewController.h" @implementation CounterViewController ... @synthesize negative; ... - (IBAction) sub: (UIButton *) expeditor comutare (mod) caz 0: contor--; pauză; cazul 1: număr - = 2; pauză; prestabilit: pauză; dacă (negativ) // Aceasta verifică pur și simplu dacă modul negativ este dezactivat dacă (număr < 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];
Tot ce se face aici este setarea modului negativ bazat pe starea comutatorului, iar atunci când se face o scădere, se verifică ce mod este în prezent în comutator (stocat în booleanul negativ).
Reveniți la constructorul de interfață, găsiți un comutator în bibliotecă și lăsați-l în vedere. Acum trebuie să conectăm întrerupătorul la acțiune, dar în cazul comutatorului, cum ar fi controlul segmentat, dorim să folosim evenimentul Value Changed, să nu atingem înăuntru. Deci, mergeți la fila de conexiuni din inspector și trageți la Proprietarul fișierului și conectați-vă la acțiunea negativeMode:. De asemenea, puteți dori să plasați o etichetă pentru a marca ce face întrerupătorul.
În acest moment, cererea dvs. ar trebui să arate ceva de genul celor de mai sus.
Ultimul și cel mai complicat element pe care îl vom discuta este cursorul. Glisoarele reprezintă o gamă de valori (pe care le puteți specifica), care se schimbă pe măsură ce vă deplasați de-a lungul cursorului. Acest element este foarte personalizabil, dar majoritatea acestor personalizări trebuie făcute în cod și sunt dincolo de scopul acestui tutorial. O vom folosi pentru a face un multiplicator și un divider pentru contorul nostru.
Primul lucru de care avem nevoie este, după cum ați ghicit, o altă acțiune. Adăugați următoarele la CounterViewController.h cu restul declarațiilor dvs. de acțiune:
- (IBAction) multiplicator: (UISlider *) expeditor;
Apoi trebuie să implementăm funcția de multiplicare și divizare pentru contorul nostru, astfel încât să vă modificăm CounterViewController.m:
#import "CounterViewController.h" @implementation CounterViewController ... @synthesize mult; ... - (IBAction) adăugați: (UIButton *) expeditor count + = mode; număr * = mult; dacă (! negativ) if (count < 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
Acum când adăugați sau scadeți numărul este înmulțit sau împărțit la valoarea cursorului. Dacă cursorul este la 1 (care va fi limita inferioară), contraul acționează normal la 9 (care va fi maximul).
Înapoi în IB, apucați și plasați un cursor din bibliotecă în vizualizare și deschideți atributele acestuia în inspector. Primul lucru pe care ar trebui să-l observați aici sunt valorile. Vrem să le schimbăm puțin. Așa cum am menționat mai devreme, doriți ca valoarea minimă să fie 1, valoarea maximă să fie 9 și valoarea inițială să fie 1. Debifați caseta continuă, astfel încât să nu obțineți niciun punct zecimal acolo și asta este. Conectați doar evenimentul "valoare modificată" a cursorului dvs. la Proprietarul fișierului și aveți multiplicatorul!
Aplicația dvs. finală ar trebui să pară ca cea afișată mai jos:
Acest tutorial abia a zgâriat suprafața a ceea ce este posibil în Interface Builder. Este o aplicație extrem de puternică. Astăzi, am acoperit utilizarea de bază a IB și cele mai elementare elemente furnizate în biblioteca IB. Acest tutorial a arătat cum puteți crea o aplicație complet funcțională, utilizând Interface Builder, fără un cod foarte mare. Amintiți-vă întotdeauna să consultați liniile directoare pentru interfața umană iPhone înainte de a face ceva drastic și, pentru mai multă inspirație și asistență la interfață, asigurați-vă că verificați UICatalog-ul Apple.
Accentsconagua