Aloittelijan opas iOS-kehitykseen Liitäntä - Osa I

Apple on ollut johtava teollisuus mobiilimaailmassa jo vuosia iPhone- ja iPad-sarjojensa kanssa. Huolimatta siitä, että se pystyy luomaan jokaisella virallisella julkaisulla, sillä on myös suuri osa mobiilialustan markkinaosuuksista, ja tämä on luultavasti syy siihen, että useimmat asiakkaat haluavat sovelluksensa Applen App Storesta; täten siitä syystä kehittäjät voivat oppia ja rakentaa iPhone-sovelluksen.

Hyvä uutinen on, että iPhonen sovelluskehitys ei ole niin vaikeaa kuin luulet, ja tämä viesti on kattava opas, jonka avulla voit käydä läpi koko iPhone-sovelluksen rakentamisprosessin..

Keskustelemme sovelluksen kehittämisen syistä, vaiheista ja työkaluista, ja lopulta seuraat helppokäyttöistä opastusta, jonka avulla voit suunnitella iPhone-sovelluksen, jossa on Xcode.

Joten oletko opiskelemassa liiketoimintaa tai sinulla on vain hämmästyttävä sovellusideo, joka saattaa tehdä sinusta miljonäärin, aloita ensimmäisen iPhone-sovelluksen rakentaminen!

Huomautus: Tarvitset tietokoneen, jossa on Macintosh-käyttöjärjestelmä (Mac OS) Xcode-asennusta, sovelluskehitystä ja sovellusten lähettämistä varten, eikä sitä voi tehdä Windowsissa laillisesti.

Miksi kehittää Applelle?

Näen tämän kysymyksen usein kysytyn, joten haluan selittää, miksi sinun pitäisi olla kiinnostunut iPhonen kehityksestä. Aivan kuten olen sanonut johdannossa, iPhone tällä hetkellä omistaa suuren osan mobiilialustan markkinaosuuksista.

Mielestäni tämän syyn pitäisi riittää, kun haluat oppia kehittämään iPhonen sovellusta, koska olisitko kehittämässä itseäsi tai asiakkaita, useimmat ihmiset luultavasti toivovat, että monet ihmiset käyttävät sovelluksiaan.

Kehityksen näkökulmasta, Apple tykkää asioista yksinkertaisesti, ja tämä koskee niiden tuotteita ja kehyksiä. iOS on käyttöjärjestelmä, joka käyttää kaikkia Applen mobiililaitteita. Näitä ovat iPod Touch, iPhone ja iPad. Joten pidä mielessä, kun kehität iPhonen sovelluksia kaikkien muiden iOS-laitteiden kehittäminen!

Lisäksi mikä tekee edellä mainitusta ominaisuudesta vieläkin suurempaa, kuinka paljon koodaustöitä voidaan tallentaa. Kun kirjoitat koodia iPhone-sovellukselle, olet käyttäen samaa ohjelmointikieliä kaikille Applen tietokonelaitteille. Tämä tarkoittaa, että kun kehität iPhone-sovellusta, sovellus voidaan myöhemmin integroida iPadiin ja jopa Maciin.

Objective-C on ydinohjelmointikieli, joka tukee kaikkia niiden kehyksiä. Yhdessä Objective-C: n kanssa kehität myös iPhone-sovelluksen Cocoa Touch, ohjelmointikehys, joka ohjaa käyttäjän vuorovaikutusta iOS: ssa.

Tämä on vain vähän tietoa, jonka avulla voit aloittaa iPhonen sovelluskehityksen. Kehitys on melko monimutkainen prosessi, mutta rentoutua, vie se hitaasti. Joten syyt ovat täällä, ja päätös on sinun. Vastaus on kyllä ​​vai ei, voit aina hypätä seuraavaan aiheeseen: iPhone-sovellusten sovellusten suunnittelu.

IPhone-sovellusrakenteen suunnittelu

Tavallisessa ideologiassa iPhone-sovelluksen luomisen haluat mene läpi muutaman vaiheen. Ensimmäinen vaihe sisältää suunnittelu ja luonnostelu.

Ensinnäkin sinun täytyy olla idea mitä sovelluksesi tekee. Miksi ihmiset haluaisivat ladata sen? Ja mitä ominaisuuksia haluat sisällyttää? Tämä on tärkein vaihe, kuin jos teet sen oikein säästää paljon sekaannuksia ja ongelmia koodausvaiheessa.

Pahin, se saa sinut takaisin piirustuspöydälle.

Suosittelen piirtää joitakin karkeita ideoita muutamille sivuille (tai näkymille) hakemuksesi. Piirrä vain suorakulmion muoto, ehkä 5 tai 6 muotoa paperiarkille, ja piirrä sitten haluamasi ominaisuudet sovelluksen jokaiseen näkymään.

Voit ajatella näkemyksiä, kuten verkkosivujen eri sivuja. Jokainen näkymä tarjoaa erilaisia ​​toimintoja, kuten kirjautumislomakkeen, yhteystietoluettelon tai tietotaulukon.

Alla olen rakentanut lyhyen kokoelman eri UI-palkkielementeistä:

• Tilapalkki - Näyttää laitteen nykyisen akun varaustason, 3G-yhteyden, vastaanottobaarit, puhelinkannattimen ja paljon muuta. On suositeltavaa sisällyttää nämä elementit aina.
• Navigointipalkki - Antaa käyttäjille mahdollisuuden siirtyä sivun hierarkioiden välillä. Tämä sisältää usein painikkeen palkin vasemmalla puolella, jotta käyttäjä voi palata edelliseen sovelluksen näkymään.
• toolbar - Näkyy iPhone-sovelluksen alareunassa. Tämä pitää sisällään muutamia kuvakkeita, jotka on sidottu joihinkin toimintoihin, kuten Jaa, ladata, Poistaa, jne.
• Välilehti - Hyvin samanlainen kuin työkalurivi, paitsi nyt työskentelet välilehtien kanssa. Kun käyttäjä napsauttaa välilehden kuvaketta, se korostuu automaattisesti, ja se näyttää kiiltävän hover-tilan. Tätä palkkia käytetään vaihtamaan näkymiä suorien toimintojen tarjoamisen sijaan.

Tässä luettelossa on vain useimmissa sovelluksissa löytyvät työkalurivit. Muita näkökohtia ja tyylejä kannattaa harkita, joita voit löytää Applen iOS-käyttöliittymän elementtien käyttöohjeista. Suosittelen, että viittaat tähän dokumentaatioon, kun epäilet iPhonen UI-elementtejä.

Ajan myötä en kuvaile jokaista UI-elementtiä. On liian paljon elementtejä, joita kannattaa harkita, ja et päädy käyttämään kaikkia niitä yhdessä sovelluksessa. Mutta kun piirrät näkemyksiäsi, voit innosta edellä esitettyjä ohjeita ja muita iPhone-sovelluksia olet nauttinut niiden käytöstä.

Photoshop-mallien suunnittelu

Oletan, että suurin osa teistä työskentelee Adobe Photoshopin kanssa melko mukavasti. Se on ensiluokkainen ohjelmisto, jolla luodaan grafiikkaa verkkosivuille, bannereille, logoille ja mobiileille. Web-grafiikan suunnittelu on melko yksinkertainen prosessi, mutta se on hieman monimutkaisempi iPhone-sovellusten suunnittelussa.

Jos haluat rakentaa sovelluksen, jota todella pitäisi luo alusta alkaen pikselin täydellisiä malleja.

Aluksi on keskusteltava Photoshopin asetuksista. Koska suunnittelemme iPhonea, meidän on harkittava 2 eri muotoilutyyliä. säännöllinen iPhone-näyttö on 320 x 480 pikseliä. Kuitenkin iPhone 4 sisältää a verkkokalvonäyttö, joka kaksinkertaistaa saman näytön koon pikselien määrän. Joten sinun pitäisi kaksinkertaista resoluutio 640 x 960 pikseliin ja suunnittele ulkoasut tähän standardiin.

Tämä tarkoittaa, että sinun täytyy myös luo 2 kuvakokonaisuutta mockupsille. Alunperin kuvakkeet olisivat asetettu 163ppi mutta sinun täytyy sisältää kuvakkeet, joissa on 326ppi iPhone 4: lle. Kuvakkeilla on perinteisesti merkintä @ 2x tiedoston nimen lopussa, kuten “[email protected]“.

Optimoi nyt uudet asiakirja-asetukset. Ensin täytyy muokata joitakin asetuksia, joten pääset Photoshopiin> Muokkaa> Asetukset> Oppaat, ruudukko ja viipaleet. Me olemme Gridline-asetuksemme asettaminen 20px: n välein jako 2: lla. Kun suunnittelet verkkokalvon näyttöä 2px-linja näyttää 1 pisteen näytöllä. Tämä on tärkeä sääntö, jota sinun on pidettävä mielessä sovelluksen pienentämisessä.

Minulla on tapana olla helpompi rakentaa mallejani korkeammalla resoluutiolla ja skaalata ne sitten, mutta voit kokeile molempia menetelmiä ja katso, mikä sopii sinulle parhaiten. Käytämme 640 x 960 pikseliä 326ppi: ssä - tallenna tämä mukautetuksi esiasetukseksi, jos luulet käyttävänsä sitä usein.

Rakennus Template Elementsin avulla

Nyt voit käyttää Photoshopia luomaan itsellesi pikselin täydellisen ulkoasun, mutta tämä osoittautuu erittäin uuvuttavaksi ja tylsäksi.

Tämä on valtava tiedosto, jossa on aivan liian monta elementtiä. Voit tehdä asiat helpommaksi painamalla v-painiketta Siirtotyökalu ja napsauta “Automaattinen valinta” sen valintapalkissa ja valitse sitten “Kerros” mielummin kuin “Ryhmä”. Asetusten avulla voit napsauttaa mitä tahansa elementtiä ja Photoshop tuo sinut vastaavaan kerrokseen!

Voit vapaasti pelata ympärillämme, tai voit jopa luoda sovelluksen prototyypin mallista. Sovelluksesta riippuen voit sisällyttää ydinalueen piirteitä, joista monet löydät tästä PSD-tiedostosta. On myös mahdollista siirtyä näihin elementteihin ja muokata myös fontteja, kaltevuusvärejä ja muita muotoilutapoja. Vain varmista, että et muuta mitään koska kaikki palkit ja käyttöliittymän elementit ovat oletusarvoisia vakiokokoja.

Sovellusten kehittäminen Xcodessa

IOS- ja Mac OS X -ohjelmistojen kehittäjätyökalu on nimeltään Xcode. Jos käytät OS X Lionia, löydät Xcoden ja kaikki sovellettavat paketit ilmaiseksi Mac App Storesta.

Kun asennus on valmis, käynnistä Xcode ja sen tervetuloaikkuna tulee esiin. Täältä voit ladata vanhemman projektin tai valita uuden. Nyt sinun täytyy napsauttaa “Luo uusi Xcode-projekti“, sitten malliikkuna tulee esiin muutamia vaihtoehtoja. Valitse iOS-sovelluksessa> Sovellus “Yhden näkymän sovellus” ja osuma “Seuraava”. Sinä pystyt anna uudelle sovellukselle nimi, kuten Testata (mieluiten ei välilyöntejä), sitten Yrityksen tunniste, kirjoita mikä tahansa sana, kuten Minun yhtiöni, ja lopuksi valitse hakemisto ja osuma “Tallentaa”.

Xcode rakentaa tiedostohakemiston ja lähettää sinulle uuden ikkunan työskentelyä varten. Sinun pitäisi nähdä paljon luettelossa olevia tiedostoja, mutta kansiota, joka on nimetty hakemuksesi mukaan on ensisijainen painopiste.

Xcodella on kaksi vaihtoehtoa etupään elementtien suunnitteluun. Klassikko XI b / kärki muoto on vakio Mac OS X- ja iOS-sovelluksille, mikä edellyttää, että suunnittelet uuden sivunäkymän joka kerta. Koska luot kuitenkin enemmän näkymiä yhdellä sovelluksella, nib-tiedostojen määrä voi tulla liian suureksi, joten uusi kuvakäsikirjoitus tiedosto pitää kaikki nib-näkymät yhdessä editoriruudussa. Täältä voit poistaa ja lisätä UI-elementtejä ja ominaisuuksia helposti.

Lisäksi törmäät .h ja .m samassa kansioryhmässä. Nämä ovat lyhyitä tiedostonimiä ylätunniste ja täytäntöönpano koodi. Nämä tiedostot ovat, kun kirjoitat kaikki Objective-C-toiminnot ja -muuttujat, joita sovelluksesi edellyttää. Voi olla hyvä idea selittää, miten Xcode toimii MVC (malli, näkymä, ohjain), mikä on syy siihen, että kullekin ohjaimelle tarvitaan 2 tiedostoa.

MVC-ohjelmointihierarkia

Jotta voisit ymmärtää, miten sovellus toimii, sinun täytyy ymmärtää sen ohjelmointiarkkitehtuuri. Kanssa Malli, näkymä, ohjain (MVC), Xcode voi erottaa kaikki näytöt ja käyttöliittymäkoodit logiikka- ja käsittelytoiminnoistasi. MVC saattaa tuntua hämmentävältä aluksi, mutta jos yritit ymmärtää sen ja aloittaa muutaman perustason sovelluksen rakentamisen, tulet rakastamaan rakennetta.

Jotta olisit helpompi ymmärtää, olen esittänyt jokaisen kohteen alla olevasta luettelosta:

• Malli - Pitää kaikki logiikka- ja ydintiedot. Tähän sisältyvät muuttujat, yhteydet ulkoisiin RSS-syötteisiin tai kuviin, yksityiskohtaiset toiminnot ja numeroiden rutistus. Tämä kerros on täysin irrotettu näkymistäsi, jotta voit helposti vaihtaa näkymiä ja että sinulla on edelleen samat tiedot.
• näkymä - Sovelluksen näyttö tai näyttötyyli. Taulukko, profiilisivu, artikkelin yhteenvetosivu, audiosoitin, videosoitin ovat kaikki esimerkkejä näkemyksistä. Voit muuttaa niiden tyylejä ja poistaa elementtejä, mutta työskentelet edelleen samojen tietojen kanssa mallissasi.
• ohjain - Toimii välittäjänä kahden muun välillä. Voit liittää esineitä näkymään ViewControlleriin, joka välittää tiedot mallista ja mallista. Niinpä tällä tavoin on mahdollista, että käyttäjä napauttaa painiketta ja rekisteröi tämän mallissasi. Suorita sitten kirjautumistoiminto ja välitä saman ohjaimen kautta viesti “onnistuneesti kirjautunut ulos!”.

Joten pohjimmiltaan mallissa on kaikki tiedot ja toiminnot että sinun täytyy näyttää jonnekin näytöllä. Mutta mallit eivät voi olla vuorovaikutuksessa näytön kanssa, vain näkymät voivat. Näkymät ovat enimmäkseen kaikki visuaalisia, ja se voi vetää tietoja vain ViewControllerin kautta. Ohjain on itse asiassa paljon hienostuneempi tapa piilottaa takapään tiedot etupääsuunnittelusta. Tällä tavoin voit uudistaa suunnittelun useita kertoja, mutta ei menetä mitään toimintoja.

Tämän tiedon avulla ei pitäisi olla vaikea aloittaa ensimmäisten sovellusten rakentaminen. Kuten aiemmin mainittu, Objective-C on ohjelmointikieli, jota käytät sovelluksen kehittämiseen. Se on rakennettu C-kielelle, jossa on päivitetty syntaksi ja muutama ylimääräinen paradigma. Sinun tarvitsee paljon aikaa tutustua kieleen, mutta aloittelijakoulutukseen suosittelen Mobiletutsin opetusohjelmasarjaa+.

Suunnittelunäkymä Storyboardeilla

Nyt kun olemme tutkineet sovelluksen tekniset näkökohdat, meidän pitäisi viettää vähän aikaa suunnittelemaan käyttöliittymä. Oletan, että olet pitänyt “kuvakäsikirjoitus” vaihtoehto tarkastetaan projektin luomisessa, mikä tarkoittaa, että löydät yhden MainStoryboard_iPhone.storyboard tiedosto jossain ikkunan vasemmassa reunassa olevaan kansioryhmään. Valitse tiedosto valitsemalla tiedosto ja avaa näkymä.

Uusi sivupalkki tulee näkyviin suoraan kansioryhmän oikealle puolelle. Tätä kutsutaan nimellä Asiakirjan ääriviivat ja se on eräänlainen nopean esikatselun menetelmä kaikkien tämän kuvakäsikirjan käytettävissä olevien näkymien tarkistamiseksi.

Haluamme aloittaa lisäämällä vain muutaman sivun elementin näkymän ohjaimeen. Tarvitsemme kaksi erilaista elementtiä: a Navigointipalkki ja a Välilehti. Ennen kuin otamme ne kiinni, pääset Määritteet Tarkastaja (Näytä> Apuohjelmat> Näytä attribuutitarkastaja) ikkunan oikealla puolella ja etsi sitten Tilapalkki etiketti. Oletuksena se on asetettu Pääteltyihin joka käyttää tavallista iPhone-tilan väriä, mutta voit myös valita Musta tai Läpikuultava musta jos sovelluksen muotoilu sopii paremmin väreihin.

Objektien kirjasto

Jos apuohjelmia ikkunan oikealla puolella oleva ruutu ei ole näkyvissä, voit ottaa sen käyttöön valitsemalla Näytä> Apuohjelmat> Näytä apuohjelmat. Katso Apuohjelmat-ruudussa alhaalta valitun paneelin Objektikirjasto. Se sai avattavan valikon “esineet” luettelon ensimmäiseksi kohdaksi. Jos et löydä sitä, voit valita Näytä> Apuohjelmat> Näytä objektikirjasto.

Etsi ja valitse objektikirjaston avattavasta valikosta Windows ja baarit. Napsauta nyt Navigointipalkki, vedä se näkymäikkunaan ja aseta se suoraan mustan alle Tilapalkki (akkukuvakkeella). Voimme muokata nyt barin otsikon kuvausta. Kaksoisnapsauta tällä hetkellä luettavaa tekstiä “otsikko“, ja näet nimiön “otsikko” Apuohjelmat-ruudussa, jonka voit muuttaa nimikkeen kuvauksen “Testata” sieltä. Osuma “Tulla sisään” todistaa muutoksen.

Siirry Windows- ja Baaripaneeleihin uudelleen, kun haluat löytää Välilehti, vedä se sitten näkymäikkunaan ja aseta se sovelluksen alareunaan. Oletuksena nämä kaksi elementtiä näyttävät upeilta.

Nyt haluat, että navigointipalkin kaltevuus vastaa alareunassa olevaa välilehtipalkkia, ja voit tehdä tämän napsauttamalla navigointipalkkia ja katsomalla oikealle määritteet paneeli Utilities-paneelissa. Ensimmäistä vaihtoehtoa kutsutaan Tyyli, joka on asetettu oletusarvoksi. Muuta tyyli oletusasetukseksi Musta läpinäkymätön ja meillä on vastaava värisarja!

Lisäämme myös toisen välilehden sovelluksen alareunaan. Siirrä hiiren osoitin uudelleen Windows- ja Bars-paneeleihin ja selaa alaspäin Välilehden kohta, suoraan välilehden alapuolella. Vedä tämä sovellusikkunaan ja aseta se kahden olemassa olevan Tab-painikkeen keskelle. Jos kaksoisnapsautat tätä uutta painiketta, voit nähdä joitakin lisäasetuksia Apuohjelmat-ruudussa, muutat kohteen kuva ja otsikko sieltä. Olen esimerkiksi muuttanut nimikkeen “Kirjanmerkki” juuri lisätyn välilehden kohdalle.

Joten tämä on lyhyt opetusohjelma näkymien suunnittelusta Xcodessa. Se ei ole hirvittävän vaikea prosessi, mutta se vaatii hieman enemmän aikaa tottua käyttöliittymään. Toista muutamia lisäelementtejä, jos tunnet olosi mukavaksi, myös voit suunnata Applen iOS-kehitysresursseihin enemmän oppimisresursseja, ei ole koskaan huono asia löytää lisää!

Pysy Tuned osassa II

Tämä tekee päätökseen ensimmäisen osan oppaasta iPhone-sovellusten suunnitteluun ja kehitykseen. Seuraavassa osassa syvennetään hieman Objective-C- ja Cocoa Touch -työkalut, ja opit lopulta toimivan iPhone-sovelluksen rakentamiseen, pysy kuulolla!

iOS Design Gallery

Suunnittelijoille on myös toivottavaa tuoda sinulle inspiraatiota, joten olen sisällyttänyt luettelon mahtavista iPhone-sovellusten näkymistä alla. Luettelossa on monia erilaisia ​​inspiroivia sovelluselementtejä, joita et todennäköisesti ole koskaan huomannut. Voit vapaasti jakaa ideoita, sovellusnäkymiä tai kysymyksiä seuraavassa kommentti-osiossa, kiitos!

Race Splitter

Tyytyväisyyskauko

Tweetbot iPhoneille

Reeder

luja

MailChimp

Instagram

Joystiq

Piictu

pimeys