Pradedančiųjų vadovas iOS kūrimui Sąsaja - I dalis

„Apple“ jau daugelį metų yra pirmaujanti mobiliojo pasaulio pramonė savo „iPhone“ ir „iPad“ serijomis. Nepaisant to, kad ji gali sukurti kiekvieną oficialų leidinį, ji taip pat turi didelę dalį rinkos dalių mobilioje platformoje, ir tai tikriausiai yra priežastis, kodėl dauguma klientų norės, kad jų programa būtų „Apple“ parduotuvių parduotuvėje; taip tampa kūrėjų mokymosi ir „iPhone“ programos kūrimo priežastimi.

Geros naujienos yra tai, kad „iPhone“ programų kūrimas nėra toks sunkus, kaip manote, ir šis pranešimas yra išsamus vadovas, leidžiantis jums atlikti visą „iPhone“ programos kūrimo procesą..

Mes aptarsime programos kūrimo priežastis, etapus ir įrankius, o galiausiai atliksite paprastą pamoką, kurdami pagrindinę „iPhone“ programą, naudodami „Xcode“.

Taigi, nesvarbu, ar mokotės verslui, ar turite tiesiog nuostabią programos idėją, galinčią tapti milijonieriu, pradėkime kurti pirmą „iPhone“ programą!

Pastaba: jums reikės kompiuterio su „Macintosh“ operacine sistema („Mac OS“), skirta „Xcode“ diegimui, programų kūrimui ir programų pateikimui..

Kodėl sukurti „Apple“?

Matau šį klausimą dažnai, todėl noriu paaiškinti, kodėl turėtumėte domėtis iPhone plėtra. Kaip ir įvardijau, „iPhone“ šiuo metu turi didelę dalį mobiliosios platformos rinkos dalių.

Manau, kad ši priežastis turėtų būti pakankama, kad galėtumėte išmokti plėtoti „iPhone“ programą, nes tai, ar esate besivystantis sau ar klientams, dauguma žmonių tikriausiai tikisi, kad daugelis žmonių galės pasiekti savo programą.

Plėtros požiūriu, Apple mėgsta paprastus dalykus, ir tai taikoma jų produktams ir sistemoms. iOS yra operacinė sistema, kuri įgalina visus „Apple“ mobiliuosius įrenginius. Tai apima „iPod Touch“, „iPhone“ ir „iPad“. Taigi turėkite omenyje, kad kurdami „iPhone“ programas, galite būti visų kitų įrenginių, turinčių „iOS“, kūrimas!

Be to, tai, kas daro aukščiau minėtą funkciją, yra tai, kiek kodavimo darbas gali būti išsaugotas. Kai rašote „iPhone“ programos kodą naudojant tą pačią programavimo kalbą visiems „Apple“ kompiuteriniams įrenginiams. Tai reiškia, kad kurdami „iPhone“ programą, programa vėliau gali būti integruota į „iPad“ ir net „Mac“.

C tikslas yra pagrindinė programavimo kalba, maitinanti visas jų sistemas. Kartu su „Objective-C“ jūs taip pat kursite „iPhone“ programą su „ Cocoa Touch, programavimo sistema, skatinanti vartotojo sąveiką iOS.

Visa tai tik šiek tiek informacijos, kad galėtumėte pradėti naudoti „iPhone“ programų kūrimą. Vystymasis yra gana sudėtingas procesas, bet atsipalaiduoti, lėtai paimti. Taigi čia yra priežasčių ir sprendimas yra jūsų. Nesvarbu, ar atsakymas yra „taip“, ar ne, visuomet galite apynių į kitą temą: „iPhone“ programų kūrimas.

„IPhone“ programos struktūros planavimas

Standartinėje „iPhone“ programos kūrimo ideologijoje norite eikite per keletą etapų. Pirmasis etapas apima planavimas ir eskizas.

Pirmiausia turite turėti idėją ką jūsų programa ketina daryti. Kodėl žmonės norėtų jį atsisiųsti? Ir kokias funkcijas norite įtraukti? Tai pats svarbiausias etapas, tarsi tai padarytumėte teisingai sutaupyti daug painiavos ir rūpesčių kodavimo fazėje.

Blogiausia, jis jums grįžta į piešimo lentą.

Aš rekomenduoju sugalvokite keletą neapdorotų kelių puslapių (arba peržiūrų) paraiškos. Tiesiog pieškite stačiakampio formą, galbūt 5 ar 6 figūras ant popieriaus lapo, tada kiekviename savo programos vaizde pieškite norimas funkcijas..

Jūs galite pagalvoti kaip skirtingus tinklalapio puslapius. Kiekvienas rodinys suteiks įvairias funkcijas, pvz., Prisijungimo formą, kontaktų sąrašą arba duomenų lentelę.

Žemiau pateikiau trumpą įvairių UI juostos elementų rinkinį:

• Būsenos juosta - Rodo dabartinį prietaiso akumuliatoriaus lygį, 3G ryšį, priėmimo barus, telefono laikmeną ir daug daugiau. Rekomenduojama visada įtraukti šiuos elementus.
• Naršymo juosta - Suteikia naudotojams galimybę naršyti tarp puslapio hierarchijų. Tai dažnai apima mygtuką kairėje juostos pusėje, kad vartotojas galėtų grįžti į ankstesnį programos rodinį.
• Įrankių juosta - Pasirodo „iPhone“ programos apačioje. Tai bus keletas piktogramų, susietų su kai kuriomis funkcijomis, pvz., Dalintis, parsisiųsti, Ištrinti, ir kt.
• Skirtukų juosta - Labai panašus į įrankių juostą, išskyrus dabar, kai dirbate su skirtukais. Kai naudotojas spusteli ant skirtuko piktogramos, jis bus automatiškai paryškintas ir bus rodoma blizgaus judėjimo būsena. Ši juosta naudojama perjungti vaizdus, ​​o ne teikti tiesiogines funkcijas.

Šiame sąraše yra tik įrankių juostos, kurias galite rasti daugelyje programų. Yra keletas kitų požiūrių ir stilių, kuriuos galite apsvarstyti, kuriuos galite rasti „Apple“ iOS UI elementų naudojimo gairėse. Labai rekomenduoju kreiptis į šį dokumentą, kai kyla abejonių dėl „iPhone“ sąsajos elementų.

Laikui bėgant nebūsiu aprašyti kiekvieno UI elemento. Yra per daug elementų, kuriuos reikia apsvarstyti, ir jūs negalite naudoti visų jų vienoje programoje. Bet kaip jūs suprantate savo nuomonę, galite įkvėpkite iš aukščiau pateiktų rekomendacijų ir kitų „iPhone“ programų naudojote juos.

„Photoshop“ modelių kūrimas

Manau, kad dauguma iš jūsų yra gana patogūs dirbti su „Adobe Photoshop“. Tai premjera programinė įranga, skirta kurti svetainių, banerių, logotipų ir mobiliųjų maketų grafikus. Grafikos kūrimas žiniatinklyje yra gana paprastas procesas, tačiau jis yra šiek tiek sudėtingesnis, kai kalbama apie „iPhone“ programų dizainą.

Jei norite sukurti programą, kurią tikrai reikia nuo pat pradžių sukurti „pixel-perfect“ maketo dizainą.

Norėdami pradėti, turėtume aptarti „Photoshop“ nustatymus. Kadangi projektuojame „iPhone“, turime atsižvelgti į 2 skirtingus dizaino stilius. The įprastas „iPhone“ ekranas yra 320 x 480 taškų. Tačiau „iPhone 4“ yra: a tinklainės ekranas, kuris padvigubina taškų dydį tame pačiame ekrane. Taigi turėtumėte padvigubinkite rezoliuciją iki 640 x 960 pikselių ir suplanuokite savo išdėstymus pagal šį standartą.

Tai reiškia, kad taip pat turėsite sukurti 2 piktogramų rinkinius jūsų maketams. Iš pradžių piktogramos būtų nustatytas 163ppi bet jums reikia įtraukti piktogramas su 326ppi iPhone 4. Piktogramos yra tradiciškai pažymėtos @ 2x failo pavadinimo pabaigoje, pvz., “[email protected]“.

Dabar optimizuokite naujus dokumento nustatymus. Pirmiausia reikės redaguoti kai kurias nuostatas, todėl prieiti prie Photoshop> Redaguoti> Nuostatos> Gidai ir tinkleliai. Mes būsime nustatydami „Gridline“ kas 20px su 2 dalimis. Projektuojant tinklainės ekraną 2px linija parodys 1 tašką ekrane. Tai yra svarbi taisyklė, kurią reikia nepamiršti, kad sumažintumėte savo programą.

Aš linkęs lengviau kurti savo dizainus su aukštesne raiška, o paskui juos sumažinti išbandyti abu metodus ir pamatyti, kas jums geriausiai tinka. Mes naudojame 640 x 960 taškų 326ppi - išsaugokite tai kaip pasirinktinį nustatymą, jei manote, kad jį dažnai naudosite.

Statyba su šablonų elementais

Dabar galite naudoti „Photoshop“, kad sukurtumėte patį „pixel-perfect“ išdėstymą, tačiau tai yra labai varginantis ir varginantis darbas.

Tai didžiulis failas, kuriame yra per daug elementų. Kad būtų lengviau, galite paspausti v Perkelti įrankį ir spustelėkite “Automatinis pasirinkimas” pasirinkimo juostoje, tada pasirinkite “Sluoksnis” geriau nei “Grupė”. Su nustatymais galite spustelėti bet kurį elementą, o „Photoshop“ atneš jus į atitinkamą sluoksnį!

Nesivaržykite žaisti su maketu, arba netgi galite sukurti savo programos prototipą iš maketo. Priklausomai nuo jūsų programos, galite įtraukti pagrindines sritis, kurias galite rasti šiame PSD faile. Taip pat galima pereiti prie šių elementų sluoksnių ir redaguoti šriftus, gradiento spalvas ir kitus dizaino stilius. Tiesiog įsitikinkite, kad nieko nekeičiate kadangi visi juostos ir UI elementai yra nustatyti kaip standartiniai standartiniai dydžiai.

Programų kūrimas „Xcode“

Programos „iOS“ ir „Mac OS X“ kūrėjo įrankis vadinamas „Xcode“. Jei naudojate OS X Lion, galite nemokamai rasti Xcode ir visus taikomus paketus „Mac App Store“.

Baigę diegti, paleiskite „Xcode“ ir jo sveikinimo ekraną. Iš čia galite įkelti senesnį projektą arba pasirinkti naują. Dabar jums reikia paspausti “Sukurkite naują Xcode projektą“, tada šablono langas pasieks keletą galimybių. Pagal „iOS“> „Application“ spustelėkite „ “Vienos peržiūros programa” ir paspauskite “Kitas”. Tu gali suteikti naujajai programai pavadinimą, toks kaip Bandymas (pageidautina, kad nebūtų tarpų), tada - Įmonės identifikatorius, įveskite bet kokį žodį, pvz Mano kompanija, ir galiausiai pasirinkite katalogą ir paspauskite “Sutaupyti”.

„Xcode“ sukurs failų katalogą ir išsiųs jums naują langą darbui. Turėtumėte pamatyti daug failų parinkčių, išvardytų, bet aplanką, pavadintą pagal jūsų paraišką yra pagrindinis dėmesys.

Su „Xcode“ turite dvi parinktis, kaip projektuoti priekinius elementus. Klasika xib / nib formatas yra standartinis „Mac OS X“ ir „iOS“ programoms, todėl kiekvieną kartą reikia sukurti naują puslapio vaizdą. Tačiau, kadangi kuriate daugiau vaizdų vienoje programoje, nib failų kiekis gali tapti pernelyg didele, todėl naujas storyboard faile yra visi „Nib“ vaizdai viename redaktoriaus srityje. Iš čia galite lengvai pašalinti ir pridėti UI elementus ir funkcijas.

Be to, jūs susidursite .h ir .m failai toje pačioje aplankų grupėje. Tai yra trumpi failų pavadinimai antraštė ir įgyvendinimą kodą. Šie failai yra ten, kur rašote visas „Objective-C“ funkcijas ir kintamuosius, kurių reikia programai paleisti. Gali būti gera idėja paaiškinti, kaip veikia „Xcode“ MVC (modelis, vaizdas, valdiklis), todėl kiekvienam valdikliui reikia 2 failų.

MVC programavimo hierarchija

Norėdami suprasti, kaip programa veikia, turėsite suprasti jos programavimo architektūrą. Su Modelis, vaizdas, kontrolierius (MVC) kaip pamatas, „Xcode“ gali atskirti visus savo rodmenis ir sąsajos kodą iš savo logikos ir apdorojimo funkcijų, ir nėra jokios kitos pasirinkimo galimybės. Iš pradžių MVC gali atrodyti paini, bet jei bandėte ją suprasti ir pradėti kurti kelias pagrindines programas, jums patiks struktūra..

Kad būtų lengviau suprasti, pateikiau kiekvieną objektą žemiau esančiame sąraše:

• Modelis - Laikomi visi jūsų loginiai ir pagrindiniai duomenys. Tai apima kintamuosius, ryšius su išoriniais RSS kanalais ar vaizdais, išsamias funkcijas ir skaičių tropinimą. Šis sluoksnis yra visiškai atskirtas nuo jūsų požiūrių, kad galėtumėte lengvai keisti vaizdus ir vis dar turėti tokius pačius duomenis.
• Žiūrėti - Programoje rodomas ekranas ar ekrano stilius. Lentelių sąrašas, profilio puslapis, straipsnio santraukos puslapis, garso grotuvas, vaizdo grotuvas - tai visi vaizdų pavyzdžiai. Galite keisti savo stilius ir pašalinti elementus, bet vis tiek dirbsite su tais pačiais duomenimis savo modelyje.
• Valdiklis - Veikia kaip tarpininkas tarp dviejų kitų. Jūs prijungiate objektus prie jūsų „ViewController“, kuris perduoda informaciją iš jūsų modelio ir iš jo. Taigi tokiu būdu galima įjungti vartotoją ant vieno mygtuko ir užregistruoti šį modelį. Tada paleiskite atsijungimo funkciją ir per tą patį valdiklį perduokite pranešimą “sėkmingai atsijungė!”.

Taigi iš esmės jūsų modelis turi visą informaciją ir funkcijas kad jums reikės rodyti kažkur ekrane. Bet modeliai negali sąveikauti su ekranu. Vaizdai dažniausiai yra visi vaizdai, o duomenis galima perkelti tik per „ViewController“. The Kontrolierius iš tikrųjų yra daug rafinuotas būdas paslėpti galinius duomenis iš priekinio galo. Tokiu būdu galite kelis kartus atkurti dizainą ir neprarasti jokios funkcijos.

Šiomis žiniomis neturėtų būti sunku pradėti kurti pirmas kelias programas. Kaip minėta anksčiau, C tikslas yra pagrindinė programavimo kalba, kurią naudosite kurdami programą. Jis sukurtas pagal C kalbą su atnaujinta sintakse ir keliomis papildomomis paradigmomis. Jums reikės daug laiko, kad susipažintumėte su kalba, tačiau pradedantiesiems pamokoms rekomenduoju pamokų seriją iš „Mobiletuts“+.

Dizaino vaizdas su „Storyboards“

Dabar, kai išnagrinėjome techninius programos taikymo aspektus, turėtume šiek tiek laiko projektuoti sąsają. Manau, kad jūs laikėte “Raštinė” parinktis tikrinant projektą, tai reiškia, kad galite rasti vieną MainStoryboard_iPhone.storyboard failą kažkur aplanko grupėje, esančioje kairėje lango pusėje. Spustelėkite failą ir pasirinkite jį bei atidarykite vaizdą.

Nauja šoninė juosta turėtų būti rodoma tiesiai į aplanko grupės dešinę. Tai vadinama Dokumento kontūras ir tai yra greitas peržiūros metodas, skirtas patikrinti visas turimas peržiūros rodykles.

Norime pradėti, jei į mūsų peržiūros valdiklį pridėsime tik kelis puslapių elementus. Mums reikia dviejų skirtingų elementų: a Naršymo juosta ir a Skirtukų juosta. Prieš patraukdami juos prieigą prie Atributų inspektorius (Žiūrėti> Utilities> Show Attributes Inspector) dešinėje lango pusėje, tada ieškokite Būsenos juosta etiketėje. Pagal numatytuosius nustatymus nustatyta Išvada kuri naudoja standartinę „iPhone“ būsenos spalvą, bet taip pat galite pasirinkti Juoda arba Permatomas juodas jei jūsų app dizainas atitinka spalvą geriau.

Objektų biblioteka

Jei Komunalinės paslaugos langas dešinėje lango pusėje nėra matomas, galite jį įgalinti naudodamiesi „View“> „Utilities“> „Show Utilities“. „Utilities“ (pagalbinių programų) srityje peržiūrėkite skambučio apačioje esantį skydelį Objektų biblioteka. Jis gavo išskleidžiamąjį meniu su “Objektai” kaip pirmasis sąrašo elementas. Jei jo neradote, galite pasirinkti View> Utilities> Show Object Library.

Objektų bibliotekos išskleidžiamajame meniu raskite ir pasirinkite Windows ir juostos. Dabar spustelėkite Naršymo juosta, vilkite jį į peržiūros langą ir padėkite jį tiesiai po juodu Būsenos juosta (su baterijos piktograma). Dabar galime pritaikyti juostos pavadinimo aprašymą. Dukart spustelėkite tekstą, kuris šiuo metu skaitomas “Pavadinimas“, ir pamatysite pavadinimą “Pavadinimas” „Utilities“ (paslaugų) srityje, kurią galite pakeisti pavadinimo aprašymu “Bandymas” iš ten. Rezultatas “Įveskite” liudyti pokyčius.

Vėlgi, Windows ir juostų skydelyje, slinkite žemyn, kad surastumėte Skirtukų juosta, tada vilkite jį į peržiūros langą ir padėkite jį pačioje programos apačioje. Pagal nutylėjimą šie du elementai atrodo fantastiški.

Dabar galbūt norėsite, kad naršymo juostos gradientas atitiktų skirtuko juostą apačioje, ir tai padaryti galite spustelėti naršymo juostoje ir žiūrėti į dešinę ties Atributai „Utilities“ skydelyje. Pirmasis variantas vadinamas Stilius, kuri nustatyta kaip Numatytasis. Pakeiskite stilių iš numatytojo į Juodasis nepermatomas ir turėsime atitinkamą spalvų rinkinį!

Taip pat pridėkime kitą skirtuko mygtuką apatinėje programos juostoje. Perkelkite pelės žymeklį vėl į „Windows“ ir „Barai“ skydelį ir slinkite žemyn Skirtuko juostos elementas, tiesiogiai po skirtuko juosta. Vilkite jį į savo programos langą ir įdėkite į 2 esamų skirtukų juostos mygtukų vidurį. Jei dukart spustelėsite šį naują mygtuką, naudodamiesi „Utilities“ (įrankių) srityje, galite pamatyti papildomų parinkčių, pakeisite elementą vaizdą ir pavadinimas iš ten. Pavyzdžiui, pakeitiau pavadinimą į “Žymėti” naujai pridėtoje skirtuko juostoje.

Taigi tai yra trumpa pamoka apie Xcode vaizdų kūrimą. Tai nėra labai sudėtingas procesas, tačiau prireiks šiek tiek daugiau laiko priprasti prie sąsajos. Žaiskite dar kelis elementus, jei jaučiatės patogiai, taip pat galite nuvykti į „Apple“ iOS plėtros išteklius, kad daugiau mokymosi išteklių, niekada nėra blogai aptikti daugiau!

Būkite sureguliuoti II daliai

Tai baigia pirmąją „iPhone“ programų kūrimo ir kūrimo vadovo dalį. Kitoje dalyje mes šiek tiek giliau įsitrauksime į „Objective-C“ ir „Cocoa Touch“, ir jūs galiausiai išmoksite sukurti veikiančią „iPhone“ programą.!

„iOS“ dizaino galerija

Dizaineriams ten taip pat tikiuosi jums įkvėpti, taigi aš įtraukiau sąrašą nuostabių „iPhone“ programų peržiūrų. Sąraše yra daug įvairių įkvepiančių programų elementų, kuriuos tikriausiai niekada nepastebėjote anksčiau. Nesivaržykite pasidalinti savo idėjomis, programų vaizdais ar klausimais žemiau esančiame komentarų skyriuje, ačiū!

Race Splitter

Pasitenkinimo nuotolis

Tweetbot iPhone

Reeder

Foursquare

MailChimp

Instagram

Joystiq

Piictu

Tamsybė