Kezdő útmutató az iOS fejlesztéshez Az interfész - I. rész
Az Apple már évek óta vezető szerepet tölt be a mobil világban az iPhone és iPad sorozatával. Annak ellenére, hogy az összes hivatalos kiadás által létrehozott hype képes létrehozni, ez a mobil platform nagy részét is megtartja, és valószínűleg ez az oka annak, hogy a legtöbb ügyfél szeretné, ha az alkalmazásuk az Apple alkalmazásboltjában létezik; így az ok, amiért a fejlesztők megtanulhatják és építhetik az iPhone alkalmazást.
A jó hír az, hogy az iPhone-alkalmazások fejlesztése nem olyan nehéz, mint gondolná, és ez a bejegyzés átfogó útmutatóként szolgál ahhoz, hogy végigvezesse Önt az alkalmazás iPhone-ra történő építésének teljes folyamatában..
Megvitatjuk az alkalmazás fejlesztésének okait, fázisait és eszközeit, és végül egy egyszerű bemutatót fog követni, hogy megtervezze az alapvető iPhone alkalmazást az Xcode használatával.
Tehát függetlenül attól, hogy üzleti tevékenységet folytat, vagy csak egy csodálatos alkalmazási ötleted van, ami milliárdos lehet, kezdjük meg az első iPhone-alkalmazásod építését!
Megjegyzés: Szükséged lesz egy számítógépre a Macintosh operációs rendszerrel (Mac OS) az Xcode telepítéshez, az alkalmazásfejlesztéshez és az alkalmazások benyújtásához, így semmilyen módon nem teheted Windows rendszeren.
Miért fejleszteni az Apple számára?
Gyakran látom ezt a kérdést, ezért szeretném elmagyarázni, hogy miért érdemes érdekelni az iPhone fejlesztése. Ahogyan azt a bevezetőben is kijelentettem, az iPhone jelenleg a mobil platform piaci részesedésének nagy részét birtokolja.
Azt hiszem, ennek az oknak elegendőnek kell lennie ahhoz, hogy megtanulhassa az iPhone-alkalmazás fejlesztését, akár önmagának vagy ügyfeleinek fejlesztése, akár a legtöbb ember valószínűleg reméli, hogy a világ számos embere elérheti az alkalmazását..
A fejlődés szempontjából, Az Apple szereti a dolgokat, és ez a termékekre és keretekre vonatkozik. Az iOS az operációs rendszer, amely az összes Apple mobileszközt gyakorolja. Ezek közé tartozik az iPod Touch, iPhone és iPad. Tehát ne feledje, ha iPhone-alkalmazásokhoz fejleszt, akkor lehet, hogy minden más eszköz fejlesztése az iOS segítségével!
Ráadásul, ami a fenti tulajdonságot még nagyobbá teszi, mennyire lehet elmenteni a kódolási munkát. Amikor az iPhone alkalmazás kódját írja, akkor Ön ugyanazon programozási nyelv használatával minden Apple számítástechnikai eszközére. Ez azt jelenti, hogy az iPhone alkalmazás fejlesztésekor az alkalmazás később integrálható iPad-be és még Mac-be is.
Objective-C az alapvető programozási nyelv, amely minden keretrendszerét táplálja. Az Objective-C-vel együtt iPhone-alkalmazást is fejleszteni fog a Kakaó Touch, a programozási keretrendszer a felhasználói interakciót az iOS-on hajtja.
Ez csak egy kis információ, hogy elkezdhessük az iPhone-alkalmazások fejlesztését. A fejlesztés meglehetősen bonyolult folyamat, de lazítson, lassan. Tehát itt vannak az okok, és a döntés a tiéd. Akár igen, akár nem, válaszolhat a következő témakörre: alkalmazások iPhone-ra tervezése.
IPhone App Structure tervezése
Az iPhone-alkalmazás létrehozásának általános ideológiájában szeretné menjen át néhány fázisban. Az első fázis tartalmazza tervezés és vázlat.
Először is kell egy ötleted mit fog tenni az alkalmazás. Miért szeretnék letölteni az embereket? És milyen funkciókat szeretne bevonni? Ez a legfontosabb szakasz, mintha helyesen csinálnád sok zavart és problémát takaríthat meg a kódolási fázisban.
A legrosszabb, hogy visszajut a rajzlapra.
Azt javaslom vázoljon néhány durva ötletet néhány oldalra (vagy nézetre) alkalmazásának Csak rajzoljon egy téglalap alakú formát, talán 5 vagy 6-os alakzatot egy papírlapra, majd rajzolja le a kívánt funkciókat az alkalmazás minden nézetében.
Az oldalak különböző oldalaihoz hasonló nézetekre gondolhat. Minden nézet különböző funkciókat kínál, mint például a bejelentkezési űrlap, a névjegyek listája vagy az adatok táblázata.
Az alábbiakban röviden összeállítottam a különböző UI sávelemeket:
- Állapotsor - Megjeleníti az eszköz aktuális akkumulátorszintjét, a 3G-kapcsolatot, a vételi sávokat, a telefonhordozót és egy sokkal többet. Javasoljuk, hogy ezeket az elemeket mindig tartalmazza.
- Navigációs sáv - Lehetővé teszi a felhasználók számára, hogy navigáljanak az oldal hierarchiák között. Ez gyakran tartalmaz egy gombot a sáv bal oldalán, hogy a felhasználó visszatérhessen az előző alkalmazás nézetéhez.
- eszköztár - Megjelenik az iPhone alkalmazás alján. Ez néhány olyan funkciót tartalmaz, amely bizonyos funkciókhoz kapcsolódik, például: Részvény, Letöltés, Töröl, stb..
- Tab Bar - Nagyon hasonlít az eszköztárhoz, kivéve most, hogy fülekkel dolgozik. Amikor egy felhasználó egy lap ikonjára kattint, automatikusan megjelenik, és egy fényes lebegőállapot jelenik meg. Ezt a sávot a nézetek helyett a közvetlen funkcionalitás helyett használhatja.
Ez a lista csak a legtöbb alkalmazásban megtalálható eszköztárat tartalmazza. Vannak más nézetek és stílusok is, amelyeket az Apple iOS UI elemhasználati útmutatójában találhat meg. Javaslom, hogy az iPhone UI-elemeivel kapcsolatban kétségei merüljenek fel a dokumentációban.
Az idő érdekében nem fogok leírni minden egyes felhasználói felületet. Túl sok elemet kell figyelembe venni, és nem fogod az összes alkalmazást egyetlen alkalmazásodban használni. De ahogy a nézeteit vázolja fel, megteheti inspiráljon a fentiekben javasolt iránymutatásokból és más iPhone-alkalmazásokból élvezted őket.
Photoshop modellek tervezése
Feltételezem, hogy a legtöbbetek elég kényelmesek az Adobe Photoshop alkalmazással. Ez a premier szoftver weboldalak, bannerek, logók és mobil modellek grafikájának létrehozásához. A webes grafika tervezése meglehetősen egyszerű folyamat, de ez egy kicsit bonyolultabb, ha az iPhone-alkalmazások terveznek.
Ha egy olyan alkalmazást szeretne építeni, amire valójában szüksége lenne hozzon létre pixel-tökéletes makettmintákat a kezdetektől.
Először meg kell vitatnunk a Photoshop beállításait. Mivel iPhone-ra tervezünk, két különböző designstílust kell figyelembe vennünk. A A rendszeres iPhone kijelző 320 x 480 képpont. Az iPhone 4 azonban a retina kijelző, amely megduplázza az azonos képernyőméreten belüli pixelek számát. Szóval meg kell kétszerese a felbontás 640 x 960 pixelre és tervezd meg az elrendezéseket ehhez a szabványhoz.
Ez azt jelenti, hogy szükséged lesz rá hozzon létre 2 ikonkészletet az Ön makettjeihez. Eredetileg az ikonok lennének 163ppi-re van állítva de meg kell Ide tartoznak az iPhone 4-es 326ppi-es ikonok. Az ikonok hagyományosan vannak jelölve @ 2x a fájl nevének végén, például “[email protected]“.
Most optimalizáljuk az új dokumentumbeállításokat. Először módosítanunk kell néhány beállítást, így hozzáférhet a Photoshophoz> Szerkesztés> Beállítások> Útmutatók, rács és szeletek. Lesz a Gridline-ot 20px-enként, a 2-es alosztályokkal. A retina kijelző tervezéséhez A 2px sor 1 pontot jelenít meg a képernyőn. Ez fontos szabály, amit szem előtt kell tartani az alkalmazás méretének csökkentése érdekében.
Kívánom, hogy könnyebben felépítsem a nagyobb felbontású mintámat, majd méretezzük le őket, de lehet próbálkozzon mindkét módszerrel, és nézze meg, hogy mi a legmegfelelőbb. 640 x 960 képpontot használunk a 326ppi-nél - mentse el ezt egy előre beállított értékként, ha úgy gondolja, hogy gyakran fogja használni.
Sablonelemekkel rendelkező épület
Most már használhatja a Photoshopot egy pixel-tökéletes elrendezés létrehozására, de ez nagyon fárasztó és unalmas munka..
Ez egy hatalmas fájl, amely túl sok elemet tartalmaz. A dolgok megkönnyítése érdekében nyomja meg a v gombot Eszköz áthelyezése és kattintson a “Automatikus választás” az opciós sávon, majd válassza a “Réteg” inkább mint “Csoport”. A beállítások segítségével bármelyik elemre kattintasz, és a Photoshop elviszi a megfelelő réteget!
Nyugodtan játszhatsz a makettjével, vagy akár létrehozhatja az alkalmazás prototípusát a makettről. Az alkalmazástól függően a magterületen lehetnek olyan funkciók is, amelyek közül sokan megtalálhatók ebben a PSD-fájlban. Lehetőség van ezeknek az elemeknek a rétegeihez is, és szerkesztheti a betűtípusokat, színátmeneteket és más tervezési stílusokat is. Éppen győződjön meg róla, hogy nem változtat semmit mivel az összes sáv és felhasználói felület alapértelmezett méretre van állítva.
Alkalmazások fejlesztése az Xcode-ban
Az iOS és a Mac OS X programozás fejlesztői eszköze Xcode. Ha OS X Lionot futtat, az Xcode és az összes vonatkozó csomag ingyenesen megtalálható a Mac App Store.
Miután a telepítés befejeződött, indítsa el az Xcode-ot, és az üdvözlőképernyőt fel kell tennie. Innen be lehet tölteni egy régebbi projektet, vagy úgy dönt, hogy új projektet készít. Most meg kell kattintania “Hozzon létre egy új Xcode projektet“, majd a sablonablak néhány lehetőséget kínál. Az iOS> Alkalmazás alatt kattintson a gombra “Single View alkalmazás” és megüt “Következő”. tudsz adjon nevet az új alkalmazásnak, mint például Teszt (lehetőleg nincs szóköz), majd a Cégazonosító, írjon be egy szót, például a cégem, és végül válasszon egy könyvtárat, és nyomja meg “Mentés”.
Az Xcode létrehozza a fájlkönyvtárat, és új ablakba küldi a munkát. Látni kell egy csomó fájlt, de a mappát, amely az alkalmazás nevét kapta az elsődleges fókusz.
Az Xcode segítségével két lehetőség áll rendelkezésre az elülső végelemek tervezéséhez. Klasszikus XIb / tollhegy A formátum szabványos a Mac OS X és iOS alkalmazásokhoz, ami megköveteli, hogy minden alkalommal új oldalnézetet tervezzen. Mivel azonban egy alkalmazásban több nézetet hoz létre, a nib-fájlok mennyisége túlságosan elsöprő, így egy új storyboard a fájl az összes nib nézetét egyetlen szerkesztő ablaktáblán tartja. Innen könnyedén eltávolíthatja és hozzáadhatja az UI elemeket és funkciókat.
Emellett találkozhatsz .h és .m fájlokat ugyanabban a mappában. Ezek rövid fájlnevek fejléc és végrehajtás kód. Ezek a fájlok azok, ahol az alkalmazás futásához szükséges összes objektív-C funkciót és változót írja. Jó ötlet, hogy elmagyarázza, hogyan működik az Xcode MVC (modell, nézet, vezérlő), ez az oka annak, hogy mindegyik vezérlőnek 2 fájlra van szüksége.
MVC programozási hierarchia
Ahhoz, hogy megértsük, hogyan működik az alkalmazás, meg kell értened a programozási architektúrát. Val vel Modell, nézet, vezérlő (MVC) mint alap, Az Xcode az összes kijelzőjét és interfész kódját elválaszthatja a logikai és feldolgozási funkcióktól, és nincs más választási lehetőség. Az MVC először zavarónak tűnhet, de ha megpróbálta megérteni, és elkezdene építeni néhány alapvető alkalmazást, akkor szeretni fogja a struktúrát.
Ahhoz, hogy könnyebb legyen megérteni, bemutattam az alábbi objektumokat:
- Modell - Tartja az összes logikai és alapvető adatot. Ez magában foglalja a változókat, a külső RSS-hírcsatornákhoz való csatlakozásokat vagy a képeket, a részletes funkciókat és a számok ropogását. Ez a réteg teljesen elválik a nézeteitől, így könnyen megváltoztathatja a nézeteket, és még mindig ugyanazokkal az adatokkal rendelkezik.
- Kilátás - Egy képernyő vagy megjelenítési stílus az alkalmazásban. A táblázatok listája, profiloldal, cikk összefoglaló oldal, audio lejátszó, videolejátszó, ezek mind a példák. Megváltoztathatja a stílusukat és eltávolíthatja az elemeket, de a modellben továbbra is ugyanazokkal az adatokkal dolgozik.
- Vezérlő - Közreműködik a másik kettő között. Az objektumokat a ViewControllerhez csatlakoztatod, amely átadja az információt a Modellednek és a Modellednek. Így így lehetséges, hogy egy felhasználó érintse meg a gombot, és regisztrálja ezt a modellben. Ezután futtasson egy kijelentkezési funkciót, és ugyanazon vezérlőn keresztül küldjön egy üzenetet “sikeresen kijelentkezett!”.
Tehát alapvetően az a modell minden információt és funkciót tartalmaz hogy megjelenítenie kell valahol a képernyőn. De A modellek nem tudnak kölcsönhatásba lépni a képernyővel, csak a nézetek. A nézetek többnyire az összes vizuális kép, és csak a ViewController segítségével tudnak adatokat húzni. A A vezérlő valójában sokkal kifinomultabb módja annak, hogy elrejtse a hátsó végadatokat az elülső végéről. Ily módon felújíthatja a tervet többször, miközben nem veszít semmilyen funkciót.
Ezzel a tudással nem lehet nehezen kezdeni az első néhány alkalmazást. Mint korábban említettük, Objective-C az alapvető programozási nyelv, amelyet az alkalmazás fejlesztésére használ. A C-nyelvre épül a frissített szintaxis és néhány további paradigma. Szükséged lesz egy csomó időre a nyelv megismeréséhez, de a kezdeti leckehez ajánlom a Mobiletuts bemutató sorozatát+.
Design nézet Storyboards
Most, hogy megvizsgáljuk az alkalmazás technikai aspektusait, egy kis időt kell töltenünk az interfész tervezése során. Feltételezem, hogy megtartottad “storyboard” választási lehetőség ellenőrizze a projekt létrehozásakor, ami azt jelenti, hogy egyetlenet talál MainStoryboard_iPhone.storyboard fájl az ablak bal oldalán található mappacsoportban. Kattintson a fájlra a kiválasztáshoz, és nyissa meg a nézetet.
Egy új oldalsáv jelenik meg közvetlenül a mappacsoport jobb oldalán. Ezt hívják Dokumentum vázlat és ez egyfajta gyors előnézeti módszer az összes elérhető nézet ellenőrzésére ebben a storyboardban.
Először csak néhány oldalelemet kell hozzáadni a nézetvezérlőhöz. Két különböző elemre van szükségünk: a Navigációs sáv és a Tab Bar. Mielőtt megragadnánk, hozzáférhetünk a Tulajdonságok ellenőr (Nézet> Segédprogramok> Tulajdonságok ellenőrzése) az ablak jobb oldalán, majd keresse meg a Állapotsor címke. Alapértelmezés szerint ez a beállítás kikövetkeztetett amely a szabványos iPhone állapotú színt használja, de választhat Fekete vagy Átlátszó fekete ha az alkalmazás tervezése jobban illeszkedik a színhez.
Az objektumkönyvtár
Ha a segédprogramok Az ablak jobb oldalán található ablaktábla nem látható, akkor engedélyezheti azt a Nézet> Segédprogramok> Utilities> Show Utilities segítségével. A Segédprogramok panelen nézze meg a hívott panel alját Objektumkönyvtár. Van egy legördülő menü a “tárgyak” mint a lista első elemét. Ha nem találta meg, válassza a Nézet> Segédprogramok> Objektumkönyvtár megjelenítése lehetőséget.
Az Objektumkönyvtár legördülő menüjéből keresse meg és válassza ki Windows és bárok. Most kattints a Navigációs sáv, húzza a nézetablakba, és helyezze el közvetlenül a fekete alatt Állapotsor (akkumulátor ikon). Most már testre szabhatjuk a sáv címét. Kattintson duplán a jelenleg olvasható szövegre “Cím“, és megjelenik egy megnevezett címke “Cím” a Utilities (Segédprogramok) ablaktáblán, amelyen a címleírás módosítható “Teszt” onnan. Találat “Belép” tanúskodik a változásról.
Ismét a Windows & Bars panelen görgessen lefelé, hogy megtalálja a Tab Bar, majd húzza azt a nézetablakba, és helyezze el az alkalmazás alján. Alapértelmezés szerint ezek a két elem fantasztikusak.
Most talán azt szeretné, hogy a navigációs sáv színátmenetének megfeleljenek az alján lévő lapsávnak, és erre kattintva rákattinthat a navigációs sávra, és jobbra nézhet attribútumok panel a Segédprogramok panelen. Az első opciót hívják Stílus, amely alapértelmezett értékre van állítva. Módosítsa a Stílust az alapértelmezett helyett Fekete átlátszatlan és lesz egy megfelelő színkészletünk!
Adjunk hozzá egy másik fülgombot az alkalmazás alsó sávjában. Mozgassa az egérmutatót ismét a Windows & Bars panelre, és görgessen lefelé Tabulátor elem, közvetlenül a Tab Bar alatt. Húzza ezt az alkalmazásablakába, és helyezze a 2 meglévő Tab Bar gomb közepére. Ha kétszer rákattint erre az új gombra, a Segédprogramok panelen néhány további opciót láthat, megváltoztathatja az elemet kép és cím onnan. Például megváltoztattam a címet “Könyvjelző” az újonnan hozzáadott Tab Bar elemhez.
Tehát ez egy rövid bemutató a nézetek tervezéséről az Xcode-ban. Ez nem szörnyen nehéz folyamat, de egy kicsit több időre lesz szükség ahhoz, hogy megszokja a felületet. Játsszon néhány további elemgel, ha kényelmesnek érzi magát, valamint az Apple iOS fejlesztői erőforrásaira is több tanulási erőforráshoz juthat, soha nem rossz dolog többet felfedezni!
Maradjon a II
Ezzel véget ér az iPhone app tervezés és fejlesztés útmutatójának első része. A következő részben egy kicsit mélyebbre kerülünk az Objective-C-re és a Cocoa Touch-ra, és végül megtanulod, hogy egy működő iPhone-alkalmazást építsünk, hangoljunk!
iOS Design Galéria
A tervezők számára ott is remélem, hogy inspirációt kapok, így az alábbiakban felsoroltam a fantasztikus iPhone-alkalmazások nézeteit. A lista sokféle inspiráló alkalmazáselemet tartalmaz, amelyeket valószínűleg soha nem vettek észre. Ne habozzon megosztani ötleteit, alkalmazási nézeteit vagy kérdéseit az alábbi megjegyzések részben, köszönöm!
Race Splitter
Elégedettségi távirányító
Tweetbot az iPhone számára
Reeder
Négyszögben
MailChimp
Joystiq
Piictu
Sötétség
