Iesācēja ceļvedis iOS izstrādei Interfeiss - I daļa
Apple ir vadošā nozare mobilajā pasaulē jau vairākus gadus ar iPhone un iPad sēriju. Neskatoties uz hipotēku, ko tā var izveidot ar katru oficiālo izlaidumu, tā arī tur lielu daļu no mobilās platformas tirgus daļām, un tas, iespējams, ir iemesls tam, ka lielākā daļa klientu vēlēsies, lai viņu lietotne būtu Apple lietotņu veikalā; tādējādi kļūstot par iemeslu izstrādātājiem mācīties un veidot iPhone lietotni.
Labā ziņa ir tāda, ka iPhone lietojumprogrammu izstrāde nav tik grūti, kā jūs domājat, un šis amats pastāv kā visaptverošs ceļvedis, lai jūs varētu nokļūt pilnīgā iPhone lietojumprogrammas izveides procesā..
Mēs diskutēsim par programmas izstrādes iemesliem, fāzēm un rīkiem, un galu galā jūs sekosiet vienkāršai apmācībai, lai izstrādātu pamata iPhone lietojumprogrammu, izmantojot Xcode.
Tātad, vai jūs mācāties uzņēmējdarbībā vai jums ir tikai pārsteidzošs lietotnes ideja, kas varētu padarīt jūs par miljonāru, sāciet darbu pie pirmās iPhone lietotnes izveides!
Piezīme: Xcode instalēšanai, lietojumprogrammu izstrādei un lietojumprogrammai būs nepieciešams dators ar Macintosh operētājsistēmu (Mac OS), turklāt to nevar izdarīt juridiski..
Kāpēc izstrādāt Apple?
Es redzu šo jautājumu bieži, tāpēc es vēlos paskaidrot, kāpēc jūs interesē iPhone attīstība. Tāpat kā es esmu norādījis ievadā, iPhone pašlaik pieder liela daļa mobilo sakaru platformas tirgus daļu.
Es domāju, ka šim iemeslam ir jābūt pietiekamam, lai jūs varētu iemācīties attīstīt iPhone programmu, jo tā, vai jūs izstrādājat sev vai klientiem, lielākā daļa cilvēku, iespējams, cer, ka viņu lietotnei var piekļūt daudzi cilvēki pasaulē..
No attīstības viedokļa, Apple patīk lietas vienkārši, un tas attiecas uz viņu produktiem un ietvariem. iOS ir operētājsistēma, kas pilnvaro visas Apple mobilās ierīces. Tie ietver iPod Touch, iPhone un iPad. Tātad, paturiet prātā, kad jūs attīstāt lietotnes iPhone, jūs varētu būt attīstīt visas citas ierīces ar iOS!
Turklāt tas, kas padara iepriekš minēto funkciju vēl lielāku, ir tas, cik daudz kodēšanas darbu var saglabāt. Kad jūs rakstāt kodu iPhone programmai, jūs esat izmantojot to pašu programmēšanas valodu visām Apple skaitļošanas ierīcēm. Tas nozīmē, ka, izstrādājot iPhone programmu, lietotne vēlāk var tikt integrēta iPad un pat Mac.
C mērķis ir galvenā programmēšanas valoda, kas nodrošina visu to sistēmu darbību. Kopā ar Objective-C jūs arī izveidosiet iPhone lietotni ar Kakao pieskāriens, programmēšanas sistēma, kas vada lietotāja mijiedarbību iOS.
Tas viss ir tikai nedaudz informācijas, lai jūs sāktu lietot iPhone lietotņu izstrādē. Attīstība ir diezgan sarežģīts process, bet atpūsties, lēnām. Tātad iemesli ir šeit, un lēmums ir jūsu. Vai atbilde ir „jā” vai „nē”, jūs vienmēr varat apiņu uz nākamo tēmu: lietojumprogrammas iPhone.
IPhone lietotņu struktūras plānošana
Standarta ideoloģijā izveidot iPhone lietotni, kuru vēlaties iet cauri dažām fāzēm. Pirmais posms ietver plānošana un skicēšana.
Pirmkārt, jums ir nepieciešama ideja ko jūsu lietotne darīs. Kāpēc cilvēki vēlas to lejupielādēt? Un kādas funkcijas vēlaties iekļaut? Tas ir vissvarīgākais posms, it kā jūs to darītu pareizi, jūs ietaupīt daudz neskaidrību un nepatikšanas kodēšanas fāzē.
Sliktākais, tas izpaužas atpakaļ uz zīmēšanas dēļa.
Es iesaku ieskicējiet dažas aptuvenas idejas dažām lapām (vai skatījumiem) jūsu pieteikumu. Vienkārši uzzīmējiet taisnstūra formu, varbūt 5 vai 6 formas uz papīra lapas, pēc tam uzzīmējiet vajadzīgās funkcijas katrā lietotnes skatījumā.
Jūs varat iedomāties viedokļus, piemēram, dažādas lapas tīmekļa vietnē. Katrs skats piedāvās dažādas funkcijas, piemēram, pieteikšanās veidlapu, kontaktu sarakstu vai datu tabulu.
Zemāk esmu izveidojis īsu dažādu UI joslu elementu kolekciju:
- Statusa josla - Parāda ierīces pašreizējo akumulatora līmeni, 3G savienojumu, uztveršanas bārus, tālruņa operatoru un daudz ko citu. Ieteicams vienmēr iekļaut šos elementus.
- Navigācijas josla - Sniedz lietotājiem iespēju pārvietoties starp lapu hierarhijām. Bieži vien tas ietver pogu joslas kreisajā pusē, lai lietotājs varētu atgriezties iepriekšējā lietotņu skatā.
- Rīkjosla - Parādās iPhone lietotnes apakšdaļā. Tam būs dažas ikonas, kas saistītas ar dažām funkcijām, piemēram, Kopīgot, Lejupielādēt, Dzēst, utt.
- Tab Bar - Ļoti līdzīgs rīkjoslai, izņemot tagad, kad strādājat ar cilnēm. Kad lietotājs noklikšķina uz cilnes ikonas, tas tiks automātiski izcelts, un tas parādīs glancētu pārvietošanās stāvokli. Šo joslu izmanto, lai pārslēgtos starp skatiem, nevis piedāvātu tiešu funkcionalitāti.
Šajā sarakstā ir tikai rīkjoslas, kuras var atrast vairumā lietotņu. Ir daži citi viedokļi un stili, kas jāapsver, kurus jūs varat atrast Apple iOS UI elementu lietošanas vadlīnijās. Es ļoti ieteiktu atsaukties uz šo dokumentāciju, ja jums ir šaubas par iPhone UI elementiem.
Laika interesēs es neuzrakstīšu katru UI elementu. Ir pārāk daudz elementu, kas jāapsver, un jūs nevarēsiet izmantot visus tos savā vienīgajā lietotnē. Bet, skatot savus uzskatus, jūs varat iedvesmu no iepriekš ieteiktajām vadlīnijām un citām iPhone lietotnēm esat baudījis to lietošanu.
Photoshop maketu projektēšana
Es pieņemu, ka lielākā daļa no jums ir diezgan ērti strādājot ar Adobe Photoshop. Tā ir pirmizrādes programmatūra grafikas izveidei tīmekļa vietnēm, baneriem, logotipiem un mobilajiem maketiem. Grafikas izstrāde tīmeklī ir diezgan vienkāršs process, bet tas ir nedaudz sarežģītāks, ja runa ir par iPhone lietotņu dizainu.
Ja jūs meklējat, lai izveidotu lietojumprogrammu, kas jums tiešām būtu no sākuma izveidojiet perfektus pikseļu maketus.
Lai sāktu, mums vajadzētu apspriest Photoshop iestatījumus. Tā kā mēs izstrādājam iPhone, mums ir jāapsver 2 dažādi dizaina stili. The regulārs iPhone displejs ir 320 x 480 pikseļi. Tomēr iPhone 4 ietver a tīklenes displejs, kas divkāršo pikseļu skaitu vienā ekrāna izmērā. Tātad jums vajadzētu divkāršojiet izšķirtspēju līdz 640 x 960 pikseļiem un veidojiet savu izkārtojumu atbilstoši šim standartam.
Tas nozīmē, ka jums būs nepieciešams izveidot 2 ikonu kopas jūsu maketiem. Sākotnēji ikonas būtu iestatīts uz 163ppi bet jums būs nepieciešams Ietveriet ikonas ar 326ppi iPhone 4. Ikonas tiek tradicionāli atzīmētas ar @ 2x faila nosaukuma beigās, piemēram, “[email protected]“.
Tagad optimizēsim jaunos dokumentu iestatījumus. Vispirms mums būs nepieciešams rediģēt dažas preferences, lai piekļūtu Photoshop> Edit> Preferences> Rokasgrāmatas, režģis un šķēles. Mēs būsim nosakot mūsu Gridline ik pēc 20px ar apakšgrupām 2. Projektējot tīklenes displeju 2px līnija parādīs 1 punktu ekrānā. Tas ir svarīgs noteikums, kas jums jāpatur prātā, lai samazinātu jūsu lietotni.
Man ir tendence, ka man ir vieglāk veidot savu dizainu ar augstāku izšķirtspēju, pēc tam tos samazināt, bet jūs varat izmēģiniet abas metodes un redzēt, kas jums vislabāk atbilst. Mēs izmantojam 640 x 960 pikseļus pie 326ppi - saglabājiet to kā pielāgotu iestatījumu, ja domājat, ka to bieži izmantosiet.
Ēka ar veidņu elementiem
Tagad jūs varat izmantot Photoshop, lai izveidotu pikseļu perfektu izkārtojumu, taču tas izrādās ļoti nogurdinošs un garlaicīgs darbs.
Tas ir milzīgs fails ar pārāk daudziem elementiem. Lai padarītu lietas vieglāku, varat nospiest v aktivizēt Pārvietot rīku un noklikšķiniet uz “Automātiskā izvēle” un pēc tam atlasiet “Slānis” nevis “Grupa”. Ar iestatījumiem jūs varat noklikšķināt uz jebkura elementa, un Photoshop dos jums atbilstošo slāni!
Jūtieties brīvi spēlēt apkārt ar maketu, vai jūs pat varat izveidot savu lietojumprogrammas prototipu no maketa. Atkarībā no jūsu lietotnes jūs varētu iekļaut galvenās jomas funkcijas, no kurām daudzas var atrast šajā PSD failā. Ir iespējams arī doties uz šiem elementu slāņiem un rediģēt fontus, gradienta krāsas un citus dizaina stilus. Tikai pārliecinieties, ka jūs neko nemainīsiet jo visi joslas un UI elementi ir iestatīti uz standarta standarta izmēriem.
Lietojumprogrammu izstrāde Xcode
Izstrādātājs rīks iOS un Mac OS X programmēšanai ir nosaukts kā Xcode. Ja izmantojat OS X Lion, Xcode un visus piemērojamos paketes varat atrast bez maksas Mac App Store.
Kad instalēšana ir pabeigta, atveriet Xcode un tā sveiciena ekrānu. No šejienes varat ielādēt vecāku projektu vai izvēlēties jaunu. Tagad jums ir jānoklikšķina “Izveidojiet jaunu Xcode projektu“, tad veidnes logs parādīs dažas iespējas. Sadaļā iOS> Programma noklikšķiniet uz “Viena skata lietojumprogramma” un hit “Nākamais”. Jūs varat dodiet jaunajai lietotnei nosaukumu, piemēram, Pārbaude (vēlams nav atstarpes), tad uz Uzņēmuma identifikators, ierakstiet jebkuru vārdu, piemēram, Mans uzņēmums, un beidzot izvēlieties direktoriju un nospiediet “Saglabāt”.
Xcode veidos failu direktoriju un nosūtīs jums jaunu logu darbam. Jums vajadzētu redzēt daudz failu opciju sarakstā, bet mapi, kas ir nosaukta pēc jūsu pieteikuma ir galvenā uzmanība.
Ar Xcode jums ir divas iespējas priekšējo elementu projektēšanai. Klasika xib / nib formāts ir standarta Mac OS X un iOS lietojumprogrammām, kas prasa katru reizi izveidot jaunu lapas skatu. Tomēr, tā kā jūs izveidojat vairākus skatus vienā lietotnē, nib failu skaits var kļūt pārāk milzīgs, tāpēc jauns storyboard failā ir visi jūsu nib skati vienā redaktoru rūtī. No šejienes varat viegli noņemt un pievienot UI elementus un funkcijas.
Turklāt jūs sastapsieties .h un .m tajā pašā mapju grupā. Šie ir īsi failu nosaukumi galvenes un īstenošanu kodu. Šie faili ir tie, kuros jūs rakstāt visas mērķa-C funkcijas un mainīgos, kas nepieciešami jūsu lietotnei darboties. Varētu būt labi izskaidrot, kā darbojas Xcode MVC (modelis, skats, kontrolieris), tas ir iemesls, kāpēc mums ir nepieciešami 2 faili katram kontrolierim.
MVC programmēšanas hierarhija
Lai saprastu, kā lietotne darbojas, jums būs jāsaprot tās programmēšanas arhitektūra. Ar Modelis, skats, kontrolieris (MVC) kā pamats, Xcode var atdalīt visus jūsu displejus un interfeisa kodu no jūsu loģikas un apstrādes funkcijām, un nav īsti citas izvēles iespējas. Sākotnēji MVC var šķist mulsinoši, bet, ja jūs mēģinājāt to saprast un sākt veidot dažas pamata lietojumprogrammas, jūs iemīlēsiet struktūru.
Lai būtu vieglāk saprast, es esmu iepazīstinājis ar katru objektu zemāk esošajā sarakstā:
- Modelis - Tur visus jūsu loģikas un pamatdatus. Tas ietver mainīgos lielumus, savienojumus ar ārējām RSS plūsmām vai attēliem, sīki izstrādātas funkcijas un skaitļu kropļošanu. Šis slānis ir pilnībā atdalīts no jūsu skatiem, lai jūs varētu viegli mainīt viedokļus un joprojām izmantot tos pašus datus.
- Skatīt - Jūsu pieteikumā ir ekrāns vai displeja stils. Tabulu saraksts, profila lapa, rakstu kopsavilkuma lapa, audio atskaņotājs, video atskaņotājs, ir visi skatījumu piemēri. Jūs varat mainīt savu stilu un noņemt elementus, bet jūs joprojām strādājat ar tiem pašiem datiem savā modelī.
- Kontrolieris - Darbojas kā starpnieks starp pārējiem diviem. Jūs savienojat objektus savā skatījumā uz ViewController, kas nodod informāciju uz jūsu modeli un no tā. Tādā veidā ir iespējams, ka lietotājs pieskaras pogai un reģistrē to savā modelī. Tad palaidiet izrakstīšanās funkciju un caur to pašu kontrolieri nododiet ziņojumu “veiksmīgi izrakstījies!”.
Tātad būtībā jūsu modelim ir visa informācija un funkcijas ka jums būs jāparādās kaut kur ekrānā. Bet modeļi nevar mijiedarboties ar ekrānu, var tikai skatījumi. Skati galvenokārt ir visi vizuālie attēli, un datus var vilkt tikai caur ViewController. The Kontrolieris faktiski ir daudz izsmalcinātāks veids, kā slēpt jūsu gala datus no priekšējā gala. Tādā veidā jūs varat vairākkārt atjaunot dizainu, vienlaikus nezaudējot funkcionalitāti.
Ar šīm zināšanām nevajadzētu būt grūti sākt veidot pirmās dažas lietotnes. Kā minēts iepriekš, C mērķis ir pamata programmēšanas valoda, kuru izmantosiet, lai izstrādātu lietotni. Tā ir veidota uz C valodas ar atjauninātu sintaksi un dažām papildu paradigmām. Jums būs nepieciešams daudz laika, lai iepazītos ar valodu, bet iesācēju stundai es ieteiktu apmācības sēriju no Mobiletuts+.
Dizaina skats ar Storyboards
Tagad, kad mēs esam izskatījuši lietojumprogrammas tehniskos aspektus, mums vajadzētu pavadīt mazliet laika, veidojot saskarni. Es pieņemu, ka esat turējis “Rakstniece” opcija pārbaudot, veidojot projektu, kas nozīmē, ka jūs varat atrast vienu MainStoryboard_iPhone.storyboard failu kaut kur mapju grupā, kas atrodas loga kreisajā pusē. Noklikšķiniet uz faila, lai to atlasītu un atvērtu skatu.
Jauna sānjosla parādās tieši mapes grupas labajā pusē. To sauc par Dokumenta izklāsts un tas ir sava veida ātra priekšskatīšanas metode, lai pārbaudītu visus pieejamos skatus šajā skulptūras ekrānā.
Mēs vēlamies sākt, pievienojot tikai dažus lapas elementus mūsu skata kontrolierim. Mums ir vajadzīgi divi dažādi elementi: a Navigācijas josla un a Tab Bar. Pirms mēs tos sagūstām, piekļūt Atribūtu inspektors (Skats> Utilities> Show Attributes Inspector) loga labajā pusē, pēc tam meklējiet Statusa josla marķējums. Pēc noklusējuma tas ir iestatīts uz Secināts kas izmanto standarta iPhone statusa krāsu, bet jūs varat arī izvēlēties Melns vai Caurspīdīgs Melns ja jūsu lietotnes dizains labāk atbilst krāsai.
Objektu bibliotēka
Ja Komunālie pakalpojumi logs labajā pusē nav redzams, varat to iespējot, piekļūstot pārlūkam View> Utilities> Show Utilities. Rūtī Utilities (Palīgrīki) skatiet apakšu, uz kuru tiek izsaukts zvans Objektu bibliotēka. Tā ieguva nolaižamo izvēlni ar “Objekti” kā saraksta pirmo punktu. Ja to nevarēja atrast, varat izvēlēties View> Utilities> Show Object Library.
Objektu bibliotēkas nolaižamajā izvēlnē atrodiet un izvēlieties Windows un bāri. Tagad noklikšķiniet uz Navigācijas josla, velciet to skata logā un novietojiet to tieši zem melnā Statusa josla (ar akumulatora ikonu). Tagad mēs varam pielāgot joslas nosaukuma aprakstu. Veiciet dubultklikšķi uz pašreiz lasāmā teksta “Nosaukums“, un jūs redzēsiet nosaukumu “Nosaukums” logā Utilities, kas var mainīt nosaukuma aprakstu uz “Pārbaude” no turienes. Sist “Ievadiet” liecināt par izmaiņām.
Windows un joslu panelī atkal ritiniet uz leju, lai atrastu Tab Bar, pēc tam velciet to skata logā un novietojiet to savā lietotnes apakšā. Pēc noklusējuma šie divi elementi izskatās fantastiski.
Tagad varbūt vēlaties, lai navigācijas joslas slīpums atbilstu cilnes joslai apakšā, un, lai to izdarītu, varat noklikšķināt uz navigācijas joslas un skatīties pa labi pie Atribūti panelī Utilities. Tiek aicināta pirmā iespēja Stils, kas ir iestatīts uz Noklusējums. Mainiet stilu no noklusējuma uz Melns necaurspīdīgs un mums būs atbilstoša krāsu kopa!
Pievienosim arī citu cilnes pogu lietotnes apakšējā joslā. Pārvietojiet peles kursoru uz Windows un joslu paneli vēlreiz un ritiniet uz leju līdz Cilnes joslas vienums, tieši zem cilnes Tab. Velciet to savā lietojumprogrammas logā un novietojiet to divu esošo cilnes joslas taustiņu vidū. Ja veicat dubultklikšķi uz šīs jaunās pogas, utilītprogrammas rūtī varat redzēt dažas papildu opcijas, mainot vienuma opcijas attēlu un nosaukums no turienes. Piemēram, esmu mainījis nosaukumu uz “Grāmatzīme” jaunizveidotajai cilnes joslas vienībai.
Tātad šī ir īsa apmācība par skatījumu veidošanu Xcode. Tas nav briesmīgi sarežģīts process, bet tam būs nepieciešams nedaudz vairāk laika, lai pierastu pie saskarnes. Spēlējiet ar vēl dažiem elementiem, ja jūtaties ērti, kā arī varat doties uz Apple iOS izstrādes resursiem, lai iegūtu vairāk mācību resursu, nekad nav slikti uzzināt vairāk!
Uzturiet II daļu
Tas beidzas ar mūsu pirmās daļas iPhone lietotnes izstrādes un izstrādes rokasgrāmatas daļu. Nākamajā daļā mēs nedaudz ienāksim mērķa-C un kakao pieskārienā, un jūs galu galā iemācīsieties veidot funkcionējošu iPhone lietotni, sekot līdzi!
iOS dizaina galerija
Dizaineriem, kas tur es esmu arī cer, lai jums dažas iedvesmas, tāpēc es esmu iekļāvis sarakstu awesome iPhone app viedokļus zemāk. Sarakstā ir daudz dažādu iedvesmojošu lietotņu elementu, kurus jūs, iespējams, nekad agrāk neesat pamanījuši. Jūtieties brīvi, lai dalītos savās idejās, lietojumprogrammu skatījumos vai jautājumos tālāk esošajā komentāru sadaļā, paldies!
Race Splitter
Apmierinātības tālvadības pults
Tweetbot iPhone
Reeder
Foursquare
MailChimp
Joystiq
Piictu
Tumsa
