Algaja juhend iOS-i arendamiseks Liides - I osa
Apple on mobiilsides maailmas juhtiv tööstus oma iPhone'i ja iPadi seeriaga. Hoolimata sellest, et kõik ametlikud väljaanded võivad seda luua, on tal ka suur osa mobiilse platvormi turuosadest ja see on ilmselt põhjus, miks enamik kliente soovib oma rakendust Apple'i rakenduste kaupluses; seega muutub arendajate põhjuseks iPhone'i rakenduse õppimine ja ehitamine.
Hea uudis on see, et iPhone'i rakenduste arendamine ei ole nii raske, kui arvate, ja see postitus on terviklik juhend, mis võimaldab teil iPhone'i rakenduse ehitamise täielikku protsessi läbi viia..
Me räägime rakenduse arendamise põhjustest, etappidest ja vahenditest ning lõpuks järgite lihtsat juhendit, et kujundada iPhone'i põhirakendus Xcode'i abil.
Nii et kas olete õppinud äri või teil on lihtsalt hämmastav rakenduseidee, mis võib sind miljonäriks muuta, alustame esimest iPhone'i rakendust!
Märkus: Xcode'i installimiseks, rakenduste arendamiseks ja rakenduste esitamiseks vajate Macintoshi operatsioonisüsteemiga arvutit (Mac OS), kuid seda ei saa Windowsis seaduslikult kasutada.
Miks arendada Apple'i?
Ma näen seda küsimust tihti, nii et ma tahan selgitada, miks peaksite iPhone'i arendamisest huvitatud olema. Just nagu ma olen sissejuhatuses öelnud, iPhone praegu omab suurt osa mobiilse platvormi turuosadest.
Ma arvan, et see põhjus peaks olema piisav, et õppida iPhone'i rakendust arendama, sest kas te arendate iseendale või klientidele, loodavad enamik inimesi ilmselt, et nende rakendust saavad kasutada paljud inimesed maailmas.
Arengu seisukohast, Apple meeldib asjadele lihtsad, ja see kehtib nende toodete ja raamistike kohta. iOS on operatsioonisüsteem, mis volitab kõiki Apple'i mobiilseadmeid. Nende hulka kuuluvad iPod Touch, iPhone ja iPad. Nii et pidage meeles, kui te arendate iPhone'i rakendusi, võite olla kõigi teiste iOS-i seadmete jaoks!
Pealegi, mis teeb ülaltoodud omaduse veelgi suuremaks, kui palju kodeerimistöid saab salvestada. Kui kirjutate iPhone'i rakenduse jaoks koodi, siis olete kasutades sama programmeerimiskeelt kõigi Apple'i arvutite jaoks. See tähendab, et iPhone'i rakenduse arendamisel saab rakendust hiljem iPadiga ja isegi Maciga integreerida.
Eesmärk-C on peamine programmeerimiskeel, mis toidab kõiki nende raamistikke. Koos Objective-C-ga arendate ka iPhone'i rakendust Kakao puudutus, programmeerimisraamistik, mis viib kasutajate interaktsiooni iOS-i.
See kõik on lihtsalt natuke informatsiooni, et saaksite iPhone'i rakenduste arendamisel alustada. Areng on üsna keeruline protsess, kuid lõõgastu, võtke see aeglaselt. Seega on siin põhjused ja otsus on teie. Kas vastus on jah või mitte, võite alati hüpata paremale järgmisele teemale: iPhone'i rakenduste projekteerimine.
IPhone App'i struktuuri planeerimine
IPhone'i rakenduse loomise standardses ideoloogias soovite läbida mõned faasid. Esimene etapp hõlmab planeerimine ja joonistamine.
Kõigepealt peate olema idee mida teie rakendus kavatseb teha. Miks inimesed tahaksid selle alla laadida? Ja milliseid funktsioone soovite lisada? See on kõige olulisem etapp, kui te teeksite seda õigesti säästa palju segadust ja probleeme kodeerimisfaasis.
Halvim, see läheb tagasi joonistuslauale.
Ma soovitan visandage mõnede lehekülgede (või vaadete) mõned karmid ideed teie taotlusest. Lihtsalt joonista ristküliku kuju, võib-olla 5 või 6 kujundit paberilehele, seejärel joonista oma rakenduse igale vaatele soovitud funktsioonid.
Saate mõelda vaadetele nagu veebisaidi erinevad leheküljed. Iga vaade pakub erinevaid funktsioone, nagu sisselogimisvorm, kontaktide loend või andmete tabel.
Allpool on koostatud lühike kogum erinevate kasutajaliidese ribade elementidest:
- Olekuriba - Kuvab seadme praeguse aku taseme, 3G-ühenduse, vastuvõtu baarid, telefonihoidja ja palju muud. Soovitatav on lisada need elemendid alati.
- Navigeerimisriba - Annab kasutajatele võimaluse sirvida lehekülgede hierarhiaid. See sisaldab sageli nuppu vasakul küljel, et kasutaja saaks naasta eelmise rakenduse vaate juurde.
- Tööriistariba - Kuvatakse iPhone'i rakenduse allosas. Sellel on mõned ikoonid, mis on seotud mõnede funktsioonidega, näiteks Jaga, Lae alla, Kustuta, jne.
- Vahekaartriba - Väga sarnane tööriistaribaga, välja arvatud nüüd, kui te töötate vahekaartidega. Kui kasutaja klõpsab vahekaardi ikoonile, tõstetakse see automaatselt esile ja kuvatakse läikiv hover olek. Seda riba kasutatakse vahetamaks vaateid vahetu funktsionaalsuse pakkumise asemel.
See loend sisaldab ainult enamikes rakendustes leiduvaid tööriistaribasid. Arvesse tuleb võtta ka teisi seisukohti ja stiile, mida saate leida Apple'i iOS UI elemendi kasutusjuhistes. Soovitan viidata sellele dokumentatsioonile, kui teil on kahtlusi iPhone'i kasutajaliidese elementide suhtes.
Aja huvides ma ei kirjelda iga kasutajaliidese elementi. Kaaluda on liiga palju elemente ja te ei kasuta neid kõiki oma ühes rakenduses. Aga kui te oma vaateid visandate, saate seda teha juhinduge ülaltoodud juhistest ja teistest iPhone'i rakendustest olete neid kasutanud.
Photoshopi makettide kujundamine
Ma eeldan, et enamik teist on Adobe Photoshopiga suhteliselt mugav. See on esmaklassiline tarkvara graafika loomiseks veebisaitide, bännerite, logode ja mobiilimängude jaoks. Veebi graafika kujundamine on üsna lihtne protsess, kuid see on natuke keerulisem, kui tegemist on iPhone'i rakenduste disainiga.
Kui soovid ehitada rakendust, mida sa tõesti peaksid luua algusest peale piksel-täiuslikud makettmudelid.
Kõigepealt peaksime arutama Photoshopi seadeid. Kuna me projekteerime iPhone'i, peame arvestama 2 erineva disaini stiiliga. The tavaline iPhone'i ekraan on 320 x 480 pikslit. Kuid iPhone 4 sisaldab a võrkkesta ekraan, mis kahekordistab sama ekraani suuruse pikslite arvu. Nii et sa peaksid kahekordistada eraldusvõime 640 x 960 pikslit ja kujundage oma skeemid sellele standardile.
See tähendab, et peate ka luua kaks ikoonide komplekti oma makettidele. Algselt oleksid ikoonid seatud 163ppi aga peate sisaldab ikoone, millel on iPhone 4 jaoks 326ppi. Ikoonid on traditsiooniliselt tähistatud @ 2x faili nime lõppedes, näiteks “[email protected]“.
Nüüd optimeerige meie uued dokumendi seaded. Kõigepealt peame redigeerima mõningaid eelistusi, nii et juurdepääs Photoshopile> Muuda> Eelistused> Juhendid, võrk ja viilud. Me oleme meie Gridline'i seadistamine iga 20 piksli järel koos alajaotustega kell 2. Võrkkonstruktsiooni projekteerimisel 2px rida kuvab 1 punkti ekraanil. See on oluline reegel, mida peate meeles pidama rakenduse vähendamiseks.
Ma kipun kergemini üles ehitama oma disainilahendusi kõrgema eraldusvõimega, seejärel mõõtke neid maha, kuid saate proovige mõlemat meetodit ja vaadake, mis teile kõige paremini sobib. Me kasutame 640 x 960 pikslit 326ppi juures - salvestage see kohandatud eelseadetena, kui arvate, et kasutate seda sageli.
Hoone mallide elementidega
Nüüd saate kasutada Photoshopi, et luua ise piksel-täiuslik paigutus, kuid see on väga kurnav ja tüütu töö.
See on tohutu fail, millel on liiga palju elemente. Lihtsamaks muutmiseks vajutage klahvi v Teisalda tööriist ja klõpsa “Automaatne valimine” valige selle suvandiribal “Kiht” pigem kui “Grupp”. Seadistuste abil saate klõpsata mis tahes elemendil ja Photoshop toob sulle vastava kihi!
Võite vabalt mängida koos makettiga, või saate isegi luua oma rakenduse prototüübi maketist. Sõltuvalt teie rakendusest võite tuua tuumikuala piires funktsioone, millest paljud leiate PSD-failist. Samuti on võimalik minna nende elementide kihtidesse ja redigeerida ka fonte, gradientvärve ja muid disaini stiile. Lihtsalt veenduge, et te ei muudaks midagi kuna kõik ribad ja kasutajaliidese elemendid on seatud vaikimisi standardsetele suurustele.
Rakenduste arendamine Xcode'is
IOS ja Mac OS X programmeerija arendustööriist nimetatakse Xcode'iks. Kui kasutate OS X Lioni, leiate Xcode'i ja kõik sobivad paketid tasuta Mac App Store.
Pärast installi lõpetamist käivitage Xcode ja selle tervitusekraan peaks ilmuma. Siit saate laadida vanema projekti või valida uue. Praegu peate klikkima “Loo uus Xcode projekt“, siis ilmub malli aken mõned võimalused. Klõpsake jaotises iOS> Rakendus “Ühekordne vaade” ja tabas “Järgmine”. Sa saad anna uuele rakendusele nimi, nagu näiteks Test (eelistatavalt tühikuid), siis Ettevõtte identifikaator, tippige mõni sõna nagu minu kompanii, ja lõpuks vali kataloog ja vajuta “Salvesta”.
Xcode ehitab faili kataloogi ja saadab teile uue tööakna. Sa peaksid nägema palju failisuvandeid, kuid kausta, mis on nime saanud teie taotluse järgi on esmane fookus.
Xcode'i abil on teil kaks võimalust eesmise elemendi kujundamiseks. Klassikaline xib / nib formaat on Mac OS X ja iOS rakenduste jaoks tavaline, mis nõuab iga kord uue lehekülje vaate kujundamist. Kuna te aga loote ühes rakenduses rohkem vaateid, võivad nib-failide arv muutuda liiga suureks, nii et uus süžeeskeem fail sisaldab kõiki teie nibi vaateid ühes redaktori paneelis. Siit saate hõlpsasti eemaldada ja lisada kasutajaliidese elemente ja funktsioone.
Lisaks saate kohata .h ja .m sama kausta grupi faile. Need on lühikesed failinimed päis ja rakendamist kood. Need failid on koht, kus kirjutate kõik rakenduse käivitamiseks vajalikud Objective-C funktsioonid ja muutujad. See võib olla hea mõte selgitada, kuidas Xcode töötab MVC (mudel, vaade, kontroller), see on põhjus, miks vajame iga kontrolleri jaoks 2 faili.
MVC programmeerimise hierarhia
Et mõista, kuidas rakendus töötab, peate mõistma selle programmeerimise arhitektuuri. Koos Mudel, vaade, kontroller (MVC) kui sihtasutus, Xcode võib eraldada kõik oma kuvad ja liidese koodi oma loogika- ja töötlemisfunktsioonidest ning ei ole tegelikult veel üht valikut. MVC võib kõigepealt tunduda segane, kuid kui sa üritad seda mõista ja hakata ehitama mõnda põhirakendust, siis sa armastad seda struktuuri.
Et seda paremini mõista, olen esitanud iga objekti allolevas loendis:
- Mudel - Hoidab kõik teie loogika ja põhiandmed. See hõlmab muutujaid, ühendusi väliste RSS-voogudega või pilte, üksikasjalikke funktsioone ja numbreid. See kiht on teie vaadetest täielikult eraldatud, et saaksite lihtsalt vaateid muuta ja endiselt samu andmeid töödelda.
- Vaade - Rakenduses kuvatakse ekraan või kuva. Tabelite nimekiri, profiilileht, artikli kokkuvõtte leht, helimängija, videopleier on kõik näited. Te saate oma stiili muuta ja elemente eemaldada, kuid töötate oma mudelis endiselt samade andmetega.
- Kontroller - Toimib kahe teise vahendajana. Te ühendate objektide vaatamise ViewControlleriga, mis edastab informatsiooni teie mudelile ja teie mudelist. Nii et sel viisil on võimalik kasutajal puudutada nuppu ja registreerida see oma mudelisse. Seejärel käivitage väljalogimisfunktsioon ja edastage sama kontrolleri kaudu sõnum “edukalt välja logitud!”.
Nii et põhimõtteliselt teie mudelil on kogu teave ja funktsioonid et peate kuvama kusagil ekraanil. Aga mudelid ei saa ekraaniga suhelda, ainult vaatamisi. Vaatamised on enamasti kõik visuaalsed kujutised ja see võib tõmmata andmeid ainult ViewControlleri kaudu. The Kontroller on tegelikult palju rafineeritum viis varjata tagakülje andmeid esiosa disainist. Sel moel saate disaini mitmel korral renoveerida, kuid ei kaota ühtegi funktsionaalsust.
Selle teadmisega ei tohiks olla raske alustada oma esimeste rakenduste loomist. Nagu varem mainitud, Eesmärk-C on peamine programmeerimiskeel, mida kasutate rakenduse arendamiseks. See on ehitatud C-keelele koos uuendatud süntaksiga ja mõne täiendava paradigmaga. Te peate keele tundmaõppimiseks palju aega, kuid algaja õppetundi jaoks soovitan mobiilikäsiraamatut Mobiletutsist+.
Disainivaade koos klaviatuuridega
Nüüd, kui oleme uurinud rakenduse tehnilisi aspekte, peaksime liidese kavandamisel natuke aega kulutama. Ma eeldan, et olete seda hoidnud “Sümbol” valik kontrollitakse projekti loomisel, mis tähendab, et leiad ühe MainStoryboard_iPhone.storyboard fail kusagil akna vasakul küljel asuvas kaustade grupis. Klõpsake faili valimiseks ja vaate avamiseks.
Uus külgriba peaks ilmuma otse kausta grupi paremale. Seda nimetatakse Dokumendi ülevaade ja see on omamoodi kiire eelvaate meetod, et kontrollida kõiki võimalikke vaatenurka.
Soovime alustada, lisades meie vaatekontrollerisse vaid mõned leheküljeelemendid. Vajame kahte erinevat elementi: a Navigeerimisriba ja a Vahekaartriba. Enne kui me neid haarame, pääseb ligi Atribuudid Inspektor (Vaade> Utiliidid> Näita atribuutide inspektorit) akna paremal küljel ja otsige seejärel Olekuriba etikett. Vaikimisi on see seadistatud Otsustatud mis kasutab tavalist iPhone'i olekuvärvi, kuid võite valida ka Must või Läbipaistev must kui teie rakenduse disain sobib paremini värvi.
Objektide raamatukogu
Kui Utiliidid akna paremas servas asuv paneel ei ole nähtav, saate selle lubada vaatega Vaade> Utiliidid> Näita utiliite. Paneeli Utilities (Utiliidid) vaadake paneeli allserva Objekti raamatukogu. Ta sai rippmenüüst “Objektid” loendi esimesena. Kui te seda ei leidnud, saate valida View> Utilities> Show Object Library.
Leidke ja valige Objekti teegi rippmenüüst Windows ja baarid. Nüüd klõpsa Navigeerimisriba, lohistage see vaateaknasse ja asetage see otse musta alla Olekuriba (aku ikooniga). Me saame nüüd baari pealkirja kirjeldust kohandada. Topeltklõpsake teksti, mida praegu loetakse “Pealkiri“, ja te näete nime “Pealkiri” paanil Utiliidid, mida saab muuta pealkirja kirjelduse kohta “Test” sealt. Tulemus “Sisenema” tunnistajaks muutusele.
Jällegi paneeli Windows ja ribad leidmiseks leidke allapoole Vahekaartriba, seejärel lohistage see vaateaknasse ja asetage see oma rakenduse allosas. Vaikimisi näevad need kaks elementi fantastiliselt.
Nüüd võib-olla soovid, et navigeerimisriba kalle sobituks allosas asuva vahekaardiga ja seda tehes võite klõpsata navigeerimisribal ja vaadata paremale Atribuudid paneelis Utiliidid. Esimest võimalust nimetatakse Stiil, mis on määratud Vaikimisi. Muutke stiili vaikeväärtuseks Must läbipaistmatu ja meil on sobiv värvikomplekt!
Lisame ka teise vahekaardi nupu rakenduse alumises ribas. Liigutage hiirekursorit uuesti Windowsi ja ribade paneelile ja liikuge allapoole Vahekaardi vahekaart, vahetult vahekaardi ribal. Lohistage see oma rakenduse aknasse ja asetage see kahe olemasoleva vahekaardi nupu keskele. Kui te seda uut nuppu topeltklõpsate, näete utiliidis Utilities mõningaid täiendavaid valikuid, muudate elemendi pilt ja pealkiri sealt. Näiteks olen muutnud pealkirja “Järjehoidja” äsja lisatud vahekaardi elemendi jaoks.
Seega on see lühike õpetus Xcode'i vaadete kujundamise kohta. See ei ole väga keeruline protsess, kuid see nõuab liidese harjumiseks veidi rohkem aega. Mängige veel mõne elemendiga, kui tunnete end mugavalt, samuti võite minna Apple'i iOS-i arendusressurssidesse rohkemate õppimisressursside leidmiseks.!
Peatuge häälestatud II osas
See lõpeb meie iPhone'i rakenduste disaini ja arenduse juhendi esimese osaga. Järgmises osas läheme mõnevõrra sügavamale Objective-C ja Cocoa Touch-le ning saate lõpuks õppida toimiva iPhone-rakenduse ehitamist, kursis olema!
iOS Design Gallery
Disainerite jaoks on ma ka lootust tuua teile inspiratsiooni, nii et ma olen lisanud nimekirja allpool olevatest awesome iPhone appi vaadetest. Loendis on palju erinevaid inspireerivaid rakenduselemente, mida olete ilmselt kunagi varem märganud. Võite jagada oma ideid, rakenduste vaateid või küsimusi allpool olevas kommentaaride jaotises, tänan teid!
Race Splitter
Rahulolu kaugjuhtimispult
Tweetbot iPhone'ile
Reeder
Foursquare
MailChimp
Joystiq
Piictu
Pimedus
