Ghid de dezvoltare în interfața ios

Ghid de dezvoltare IOS: Interfață - Partea 1

Apple de mulți ani este lider în lumea telefoniei mobile cu iPhone și iPad. Ei dețin cea mai mare cotă de piață de platforme mobile, iar acesta este motivul pentru care majoritatea clienților doresc cererile lor au fost depuse la App Store de la Apple, care încurajează dezvoltatorii să învețe să creeze iPhone-aplicație.

Dezvoltarea aplicațiilor pentru iPhone nu este la fel de dificilă pe cât credeți și această postare vă va oferi un ghid complet pentru întregul proces de creare a unei aplicații pentru iPhone. Vom discuta motivele, etapele și instrumentele pentru dezvoltarea aplicațiilor și, în cele din urmă, veți obține un tutorial simplu pentru dezvoltarea unei aplicații iPhone de bază utilizând Xcode 4.2.
Dacă doriți să câștigați bani sau dacă aveți doar o idee interesantă pentru o aplicație care vă poate face un milionar, să începem să vă creați prima aplicație pentru iPhone.
Notă: Aveți nevoie de un computer cu sistem de operare Macintosh (Mac OS) pentru a instala Xcode și pentru a dezvolta aplicații; pe Windows, din punct de vedere legal, acest lucru nu se poate face.

De ce să dezvolte pentru Apple?

Această întrebare este adesea întrebată, deci merită explicată de ce ar trebui să fii interesat de dezvoltarea iPhone-ului. Așa cum sa spus în prefață, iPhone ocupă în prezent cea mai mare parte a pieței de platforme mobile. Acest lucru ar trebui să fie un motiv suficient pentru a învăța cum să dezvolte aplicații pentru iPhone, indiferent dacă sunteți proiectarea pentru ei înșiși sau clienții, pentru că cei mai mulți oameni sunt în speranța că aplicațiile lor pot fi accesate în întreaga lume.

Apple îi place simplitatea. și acest lucru se aplică produselor lor și platformei. iOS este un sistem de operare instalat pe toate dispozitivele mobile Apple. Acestea includ iPod Touch, iPhone și iPad. Așa că țineți minte când dezvoltați aplicații pentru iPhone, puteți crea aplicații pentru toate celelalte dispozitive cu iOS!
În plus, este remarcabil cât de mult efort este pus în scrierea codului, poate fi salvat. Când scrieți coduri pentru aplicațiile iPhone, utilizați același limbaj de programare ca și celelalte dispozitive Apple. Acest lucru înseamnă că, atunci când dezvoltați o aplicație iPhone, aplicația poate fi ulterior integrată în iPad și chiar pe Mac.
Obiectivul-C este limba principală de programare inclusă în toate platformele. Împreună cu Obiectiv-C, veți crea, de asemenea, o aplicație pentru iPhone utilizând mediul de programare Cocoa Touch.
Aceasta este doar o cantitate mică de informații, astfel încât să puteți începe să dezvoltați aplicații pentru iPhone. Dezvoltarea este un proces foarte complex, dar nu te grăbi să te superi. Decizia este a ta.

Planificarea unei structuri de aplicație

Cu ideologia standard de a crea aplicații iPhone, trebuie să treceți prin mai multe etape. Prima etapă include planificarea și schițarea. Mai întâi de toate, trebuie să aveți o idee despre ce va face cererea dumneavoastră. De ce doresc oamenii să-l descarce? Și ce caracteristici doriți să includeți? Acesta este cel mai important pas, deoarece dacă faceți totul corect, veți economisi mult timp și veți evita problemele în faza de codificare.

Se recomandă să schițați idei pentru mai multe pagini (sau ecrane) ale aplicației dvs. Doar desenați un dreptunghi, sau poate 5 sau 6, pe o bucată de hârtie, desenați ceea ce doriți să vedeți în fiecare pagină a aplicației. Puteți reprezenta ecrane ca pagini diferite ale unui site. Fiecare ecran va oferi diferite funcții, cum ar fi un formular de înregistrare, o listă de contacte sau un tabel de date.

Mai jos este o scurtă listă a diferitelor elemente ale meniului utilizatorului:

Bara de stare (Bara de stare) - afișează nivelul actual de încărcare, conexiune 3G, recepție și multe altele. Se recomandă să includeți întotdeauna aceste elemente.
Bară de navigare - Permite utilizatorilor să navigheze între pagini. Adesea, acestea includ butoanele din partea stângă a meniului, astfel încât utilizatorul să poată reveni la pagina anterioară.
Bara de instrumente - apare în partea de jos a aplicației pentru iPhone. Vor fi asociate mai multe iconițe cu unele funcții, cum ar fi partajarea, încărcarea, ștergerea, etc.
Meniul Tab - Foarte similar cu bara de instrumente, numai acum lucrați cu file. Când utilizatorul face clic pe pictograma filă, va fi evidențiat automat și va fi evidențiat. Acest meniu este utilizat pentru comutarea între ferestre.

Această listă conține numai barele de instrumente pe care le puteți găsi în majoritatea aplicațiilor. Există și alte stiluri pe care le puteți găsi în Ghidul de utilizare a elementelor de interfață pentru IOS UI. Este recomandat să consultați acest ghid dacă aveți îndoieli cu privire la interfața iPhone.
În acest articol, nu voi descrie fiecare element al interfeței utilizator. Prea multe elemente de luat în considerare și nu le veți folosi pe toate într-o singură aplicație. Dar vă puteți inspira din principiile sugerate mai sus și din alte aplicații iPhone pe care le-ați plăcut.

Layout Design în Photoshop

În primul rând, trebuie să discutăm setările din Photoshop. Deoarece dezvoltam pentru iPhone, trebuie să luăm în considerare două stiluri de design diferite. Afișajul iPhone standard este de 320 x 480 pixeli. Cu toate acestea, iPhone 4 are un nou afișaj "retina", care dublează numărul de pixeli într-un singur ecran. Astfel, trebuie să dublați rezoluția la 640 x 960 pixeli și să creați modele de aspect pentru acest standard.

Aceasta înseamnă că, de asemenea, trebuie să creați 2 seturi de pictograme pentru machetele dvs. Inițial, pictogramele vor fi la 163 ppi. dar trebuie să includă pictograme cu 326 ppi pentru iPhone 4. Icoane marcate în mod tradițional @ 2x la sfârșitul numelui fișierului, de exemplu «[email protected]» (puțin mai multe despre acest articol iPhone 4 Retina Display: Tehnici și flux de lucru).
Acum, să optimizăm noile setări. Mai întâi trebuie să editați câteva setări, așa că accesați Photoshop> Editare> Preferințe> Ghiduri. Grilă și felii. Stabilim linii de grilă la fiecare 20 de pixeli cu linii tip grilă pe subdiviziuni 2. La proiectarea pe ecran pentru iPhone 4, linia 2px va indica pe ecran 1 pct. Trebuie să țineți cont de acest lucru atunci când vă scalați aplicația.

De obicei, este mai ușor să creați proiectele mele cu o rezoluție mai mare și apoi să le scalați, dar puteți încerca în ambele feluri și pentru a vedea ce funcționează cel mai bine pentru dvs. Utilizați setările de 640 x 960 pixeli la 326 ppi - mai bine păstrați aceste setări dacă așteptați să le utilizați frecvent.

Utilizarea elementelor șablonului

Acum poți folosi Photoshop pentru a crea aspectul perfect al pixelilor, dar este o muncă foarte obositoare. Vă recomandăm iPhone 4 GUI PSD de la Teehan + Lax (a se vedea Elementele interfeței Mac, iPhone și iPad PSD).

Este un dosar imens, are multe elemente.

Sfat: pentru a face lucrurile mai ușoare, puteți apăsa V și activați Instrumentul de mutare. apoi selectați Auto-Select în panoul de sus. și selectați Layer. Cu aceste setări, puteți face clic pe orice element și Photoshop vă duce la stratul corespunzător.

Nu vă fie frică să experimentați aspectul. puteți crea chiar o aplicație prototip utilizând un aspect. În funcție de aplicația dvs., puteți include multe funcții, dintre care multe puteți găsi în acest fișier PSD. În plus, puteți accesa stratul acestor elemente și puteți modifica fontul, gradientul de culori și alte stiluri de design. Principalul lucru este să nu schimbați dimensiunea. deoarece toate panourile și elementele interfeței cu utilizatorul sunt setate implicit la dimensiunile implicite.

Dezvoltarea aplicațiilor în Xcode

Instrumentul de dezvoltare pentru programarea IOS și Mac OS X se numește Xcode. Dacă utilizați OS X Lion, puteți găsi Xcode și toate pachetele relevante gratuit în Mac App Store.

După ce ați terminat instalarea, porniți Xcode și apare ecranul de întâmpinare. De aici puteți descărca vechiul proiect sau creați unul nou. Acum ar trebui să faceți clic pe butonul "Creați un nou proiect Xcode", iar într-o fereastră nouă veți fi prezentat mai multe opțiuni. Selectați "Single View Application" și faceți clic pe "Next". Puteți numi noua aplicație. de exemplu, Test (de preferință fără spații), apoi în câmpul "Company Identifier" introduceți orice cuvânt, de exemplu, MyCompany, selectați folderul și faceți clic pe butonul "Save".
Xcode creează un director și deschide o fereastră nouă pentru a funcționa. Veți vedea o listă de fișiere, iar dosarul numit după cererea dvs. va fi primul.

Cu noul Xcode 4.2, avem două opțiuni pentru elementele de proiectare ale capătului frontal. Formatul clasic xib / nib este standard pentru aplicațiile Mac OS X și iOS, necesită să creați o nouă vizualizare de pagină de fiecare dată.
În plus, veți vedea atât fișierele .h și .m. Acestea sunt nume de fișiere abreviate pentru anteturi și execuții. Aceste fișiere sunt în cazul în care scrieți toate funcțiile și variabilele Obiectiv-C necesare pentru a rula aplicația.
Acum trebuie să explicăm cum funcționează Xcode cu MVC (Model, View, Controller). care este motivul pentru care avem nevoie de 2 fișiere pentru fiecare controler.

Ierarhia software-ului MVC

Pentru a înțelege modul în care funcționează aplicația, trebuie să înțelegeți arhitectura programării sale. Cu modelul, vizualizarea, controlerul (MVC) ca bază. Xcode poate partaja toate afișările și codurile de interfață, pe baza funcțiilor logice și de procesare. La prima vedere, MVC poate părea confuz, dar este o chestiune obișnuită.

Pentru a face mai ușor de înțeles, vom analiza fiecare obiect:

Practic, modelul dvs. conține toate informațiile și funcțiile. pe care va trebui să le afișați pe ecran. Dar modelele nu pot interacționa cu ecranul, dar pot face și speciile. Vizualizările sunt în principiu toate efectele vizuale și pot prelua date numai prin ViewController. Controlerul este de fapt un mod complex de transfer de date prin interfață. Astfel, puteți actualiza designul fără a pierde nici o funcționalitate.
Cu aceste cunoștințe, nu ar trebui să întâmpinați dificultăți atunci când încercați să creați o nouă aplicație. După cum am menționat mai devreme, obiectivul C este principalul limbaj de programare pe care îl veți folosi pentru a dezvolta aplicații. Este construit în limbajul C, cu sintaxă actualizată și câteva paradigme suplimentare. Va dura mult timp pentru a vă familiariza cu limba.

Proiectați o vizualizare cu Storyboard-urile iOS 5

Acum că am acoperit aspectele tehnice ale aplicației, trebuie să petrecem puțin timp proiectând interfața. Presupun că ați ales "Storyboard" atunci când creați un proiect, ceea ce înseamnă că puteți găsi fișierul MainStoryboard_iPhone.storyboard în dosarul din partea stângă a ferestrei. Faceți clic pe fișier pentru ao selecta și ao deschide.

Vrem să începem prin adăugarea a mai mult de un element de pagină. Avem nevoie de două elemente diferite: bara de navigare și bara Tab. Înainte de a le crea, accesați Inspectorul de atribute (Vizualizați> Utilități> Afișați inspectorul de atribute) din partea dreaptă a ferestrei și apoi uitați-vă la bara de stare. Implicit, este setat la Inferred (Inferred), care utilizează culoarea standard pentru starea iPhone-ului, dar puteți alege și Negru (Negru) sau Negru Transparent (Translucent Negru) dacă sunt mai potrivite pentru aplicația dvs.

Biblioteca de obiecte

Când panoul de utilitate pe partea dreaptă a ferestrei nu este vizibil, o puteți activa de a merge la View> Utilities> Afișare Utilități. Pe panoul Utilities, uita-te la panoul de jos numit Library Object. Există un meniu drop-down cu elementul "Obiecte" din partea de sus a listei. Dacă nu le puteți găsi, puteți accesa View> Utilities> Show Library Object.

Acum, poate doriți ca gradientul barei de navigare să fie combinat cu bara de tab-uri din partea inferioară și pentru aceasta puteți să faceți clic pe bara de navigare și să priviți în partea dreaptă a panoului Atribute din panoul Utilities. Prima opțiune este numită Stil. care este setat implicit. Schimbați stilul c implicit la Black Opaque. iar culorile tale se vor amesteca.

Să adăugăm, de asemenea, încă un buton de file în linia de jos a aplicației. Treceți cursorul mouse-ului peste bara de instrumente Windows # 038; Bara și derulați în jos până la elementul Tab Tab. chiar sub bara de tab-uri. Glisați-l în aplicație și plasați-l între cele două butoane existente de pe bara de file. Dacă faceți dublu clic pe acest buton, puteți vedea câteva opțiuni suplimentare în panoul Utilities, aici puteți schimba imaginea și numele elementului. De exemplu, în exemplul nostru, numele este schimbat la "Marcaj" pentru elementul nou adăugat în bara de file.

Ați citit ghidul scurt al designului în Xcode. Acesta nu este un proces foarte complicat, dar este nevoie de puțin timp să vă obișnuiți cu interfața. Încercați să adăugați alte elemente pentru a face să vă simțiți mai încrezător, și puteți vizita iOS resurse de dezvoltare de la Apple pentru mai multe, pentru că nu-l doare!

Nu uitați de Partea a 2-a

Aceasta incheie prima parte a ghidului de proiectare pentru aplicatii iPhone. In continuare vom vorbi despre Objective-C si Cocoa Touch, și veți învăța să creați aplicații de lucru pentru iPhone, stați așa acordat! UPD Partea 2