Fejlesztési útmutató ios interfésszel
IOS fejlesztői útmutató: Interfész - 1. rész
Az Apple évek óta a mobil világ vezető vállalata az iPhone és az iPad számára. Tartanak a legnagyobb piaci részesedése a mobil platformok, és ez az oka, hogy a legtöbb ügyfél szeretné a kérelmeket nyújtottak be az App Store az Apple, amely arra ösztönzi a fejlesztők megtanulják, hogy hozzon létre iPhone-alkalmazás.
Az iPhone alkalmazások fejlesztése nem olyan nehéz, mint gondolná, és ez a bejegyzés teljes körű útmutatást nyújt az egész iPhone alkalmazások létrehozásának folyamatához. Beszéljük az alkalmazások fejlesztésének okait, lépéseit és eszközeit, végül könnyű bemutatót kapunk egy alap iPhone alkalmazás fejlesztéséért az Xcode 4.2 használatával.
Ha pénzt szeretne, vagy csak érdekes ötletet kapott egy olyan alkalmazásért, amely milliomosra tehet, kezdjük el az első iPhone alkalmazás létrehozását.
Megjegyzés: Macintosh operációs rendszert futtató számítógépet (Mac OS) kell telepíteni az Xcode telepítéséhez és alkalmazások fejlesztéséhez, a Windows rendszerben ez nem lehetséges.
Miért dolgozik az Apple számára?
Ezt a kérdést gyakran megkérdezik, ezért érdemes megmagyarázni, hogy miért érdekel az iPhone fejlesztése. Amint azt az előszó mondja, az iPhone jelenleg a mobilplatform piacának legnagyobb részét foglalja el. Ez elég ok arra, hogy megtanulják, hogyan kell fejleszteni alkalmazásokat az iPhone, függetlenül attól, hogy már most is kapható a maguk számára, illetve az ügyfelek, mert a legtöbb ember abban a reményben, hogy az alkalmazás elérhető világszerte.
Az Apple szereti az egyszerűséget. és ez vonatkozik a termékeikre és a platformra. Az iOS egy olyan operációs rendszer, amelyet minden Apple mobil eszközön telepítenek. Ezek közé tartozik az iPod Touch, az iPhone és az iPad. Tehát tartsd észben, amikor fejlesztesz alkalmazásokat az iPhone-ra, létrehozhatsz alkalmazásokat minden más eszközön az iOS rendszeren!
Ezenkívül figyelemre méltó, mennyi erőfeszítést tesznek a kód megírására, menthetők. Az iPhone alkalmazások kódjának írása során ugyanazt a programozási nyelvet használja, mint az összes többi Apple eszközt. Ez azt jelenti, hogy iPhone alkalmazás fejlesztésekor az alkalmazás később beilleszthető az iPad és a Mac is.
A C-célkitűzés az összes platformon található fő programozási nyelv. Az Objective-C mellett egy iPhone alkalmazást is létrehozhat a Cocoa Touch programozási környezet használatával.
Ez csak egy kis információ, így elkezdhetjük fejleszteni az iPhone alkalmazásokat. A fejlesztés nagyon összetett folyamat, de ne siessen, hogy felboruljon. A döntés a tiéd.
Alkalmazási struktúra tervezése
Az iPhone-alkalmazások létrehozásának szabványos ideológiájával több lépcsőre van szükséged. Az első szakasz tartalmazza a tervezést és a vázlatot. Először is, el kell képzelnie, hogy az alkalmazás hogyan fog működni. Miért szeretné letölteni az embereket? És milyen szolgáltatásokat kíván használni? Ez a legfontosabb lépés, mert ha mindent megtesz, akkor sok időt takaríthat meg és elkerülheti a kódolási szakaszban jelentkező problémákat.
Ajánlatos ötleteket rajzolni az alkalmazás több oldalára (vagy képernyőre). Csak rajzoljon egy téglalapot, vagy akár 5 vagy 6 egy papírt, rajzolj arra, amit látni szeretnél az alkalmazásod minden oldalán. A képernyőket a webhely különböző oldalaként is megjelenítheti. Minden képernyő különböző funkciókat, például regisztrációs űrlapot, névjegyzéket vagy adattáblát kínál.
Az alábbiakban egy rövid lista található a felhasználói menü különböző elemeiről:
- Állapotsor (Állapotsor) - megjeleníti a töltés jelenlegi szintjét, a 3G-kapcsolatot, a vételt és még sok mást. Javasoljuk, hogy mindig ezeket az elemeket tartalmazza.
- Navigációs sáv - Lehetővé teszi a felhasználók számára, hogy navigáljanak az oldalak között. Gyakran ez a menü bal oldalán található gombokat tartalmazza, hogy a felhasználó visszatérhessen az előző oldalra.
- Eszköztár - megjelenik az iPhone alkalmazás alján. Több olyan ikon jelenik meg, amelyek egyes funkciókhoz kapcsolódnak, például megosztással, feltöltéssel, törléssel stb.
- Tab menü - Nagyon hasonlít az eszköztárhoz, most már csak lapokkal dolgozik. Amikor a felhasználó rákattint a fül ikonnal, automatikusan kijelölésre kerül, és kijelölésre kerül. Ez a menü az ablakok közötti váltáshoz használható.
Ez a lista csak az eszköztárakat tartalmazza, amelyek a legtöbb alkalmazásban megtalálhatók. Vannak más stílusok is, amelyek megtalálhatók az iOS UI elem használati irányelveiben. Javasoljuk, hogy olvassa el ezt az útmutatót, ha kétségei vannak az iPhone kezelőfelületével kapcsolatban.
Ebben a cikkben nem fogom leírni a felhasználói felület minden egyes elemét. Túl sok elemet kell figyelembe venni, és nem fogod mindegyiket egy alkalmazásban használni. De inspirációt tehetsz a fent ismertetett elvekből és más iPhone-alkalmazásokból, amelyek tetszenek.
Tervezési elrendezés a Photoshopban
Először is meg kell vitatnunk a beállításokat a Photoshopban. Mivel az iPhone-ra fejlesztünk, két különböző tervezési stílust kell figyelembe venni. A standard iPhone kijelző 320 x 480 pixel. Azonban az iPhone 4-ben van egy új "retina" kijelző, amely megduplázza a képpontok számát egy képernyőn belül. Így meg kell dupláznia a felbontást 640 x 960 képpontra, és elrendezési terveket kell létrehoznia ehhez a szabványhoz.
Ez azt jelenti, hogy az elrendezéshez 2 készletet kell létrehoznia. Kezdetben az ikonok 163 ppi értékűek lesznek. de meg kell, hogy tartalmazza ikonok 326 ppi az iPhone 4. ikonok hagyományosan jelölt @ 2x végén a fájl nevét, például «[email protected]» (kicsit többet ezt a cikket iPhone 4 Retina Display: technikák és Workflow).
Most optimalizzuk az új beállításainkat. Először módosítsunk néhány beállítást, ezért menjünk a Photoshop> Szerkesztés> Beállítások> Útmutatóhoz. Rács és szeletek. Mi létre hálóvonal rácsvonalak minden 20 képpont alegységeinek 2 tervezésekor a kijelző iPhone 4, 2px vonal jelzi a képernyőn 1 pont. Ezt figyelembe kell vennie alkalmazásának méretezésénél.
Általában könnyebb létrehozni projektjeimet nagyobb felbontással, majd méretezni őket, de mindkét módszert megpróbálhatja és megnézheti, mi működik a legjobban az Ön számára. Használja a 640 x 960 képpont felbontású beállításokat 326 ppi-nál - tartsa ezeket a beállításokat, ha gyakran használja őket.
Sablonelemek használata
Most a Photoshop segítségével létrehozhatja a tökéletes képpont-elrendezést, de nagyon nehéz feladat. Ajánlom az iPhone 4 GUI PSD-t a Teehan + Lax-ból (lásd Macintosh elemek, iPhone és iPad PSD elemeit).
Ez egy hatalmas fájl, sok eleme van.
Tipp: A dolgok könnyebbé tételéhez nyomjuk meg a V gombot, és aktiváljuk az Áthelyezés eszközt. majd válassza az Automatikus kiválasztás lehetőséget a felső panelen. és válassza a Layer (Réteg) lehetőséget. Ezekkel a beállításokkal bármelyik elemre kattintva a Photoshop eljut a megfelelő rétegbe.
Ne féljen kísérletezni az elrendezéssel. akkor akár elrendezéssel is létrehozhat prototípusalkalmazást. Alkalmazásától függően számos funkciót is tartalmazhat, amelyek közül sok megtalálható ebben a PSD fájlban. Ezenkívül az elemek rétegére léphet, és szerkesztheti a betűtípust, a színátmenet és más tervezési stílusokat. A legfontosabb dolog nem változtatja meg a méretet. mivel az összes panel és felhasználói felület elem alapértelmezés szerint alapértelmezett méretre van állítva.
Alkalmazások fejlesztése Xcode-ban
Az iOS és a Mac OS X programozás fejlesztőeszköze Xcode. Ha OS X Lion operációs rendszert futtat, az Xcode és az összes vonatkozó csomag ingyen megtalálható a Mac App Store-ban.
A telepítés befejezése után indítsa el az Xcode-ot, és megjelenik az üdvözlő képernyő. Innen letöltheti a régi projektet, vagy létrehozhat egy újat. Most kattintson az "Új Xcode projekt létrehozása" gombra, és egy új ablakban több lehetőség jelenik meg. Válassza az "Egyedi alkalmazás" elemet, és kattintson a "Tovább" gombra. Megnevezheti az új alkalmazást. Például Teszt (lehetőleg szóköz nélkül), majd a "Cégazonosító" mezőbe írjon be bármilyen szót, például a MyCompany-ot, válassza ki a mappát, és kattintson a "Mentés" gombra.
Az Xcode egy könyvtárat hoz létre, és megnyit egy új ablakot a munkához. Megjelenik a fájlok listája, és az alkalmazás után elnevezett mappa lesz az első.
Az új Xcode 4.2-vel két lehetőség van a külső interfész elemek tervezéséhez. A klasszikus xib / nib formátum a Mac OS X és az iOS alkalmazások számára szabványos, ezért minden alkalommal új oldalnézetet kell létrehoznia.
Ezenkívül mind az .h, mind a .m fájlokat láthatja. Ezek rövidített fájlnevek a fejlécekhez és kivégzésekhez. Ezek a fájlok írják le az összes olyan Objective-C függvényt és változót, amelyek az alkalmazás futtatásához szükségesek.
Most meg kell magyaráznunk, hogyan működik az Xcode az MVC-vel (modell, nézet, vezérlő). ezért az egyes vezérlőkhöz 2 fájl szükséges.
Szoftver hierarchia MVC
Az alkalmazás működésének megértéséhez meg kell értened a programozás architektúráját. A modell, a nézet, a vezérlő (MVC) alapul szolgál. Az Xcode megoszthatja az összes megjelenítést és interfész kódot a logikai és feldolgozási funkciói alapján. Első pillantásra az MVC zavarosnak tűnhet, de ez szokás.
A megértés megkönnyítése érdekében elemezzük az egyes objektumokat:
Alapvetően a modell tartalmaz minden információt és funkciót. amelyet meg kell jeleníteni a képernyőn. De a modellek nem tudnak kölcsönhatásban a képernyővel, de a fajok képesek. A nézetek alapvetően minden vizuális effektust tartalmaznak, és csak a ViewController segítségével tudják letölteni az adatokat. A vezérlő valójában összetett módja az adatoknak az interfészen keresztüli átvitelére. Így frissítheti a tervet anélkül, hogy elveszítené a funkciókat.
Ezzel a tudással nem kell nehézségekbe ütközed új alkalmazás létrehozásakor. Mint korábban említettük, az Objective-C az a fő programozási nyelv, amelyet alkalmazások fejlesztésére használunk. C nyelvből épül fel, frissített szintaxissal és számos további paradigmával. Hosszú időt vesz igénybe a nyelv megismerése.
Tervezzen egy nézetet az iOS 5 Storyboards segítségével
Most, hogy lefedtük az alkalmazás technikai szempontjait, kis időt kell töltenünk az interfész megtervezésére. Felteszem, hogy projekt létrehozásakor "Storyboard" -et választottál, ami azt jelenti, hogy megtalálod a MainStoryboard_iPhone.storyboard fájlt az ablak bal oldalán lévő mappában. Kattintson a fájlra, hogy kiválassza, és nyissa meg.
Szeretnénk elkezdeni egynél több oldalelem hozzáadásával. Két különböző elemre van szükségünk: a Navigációs sáv és a Tab Bar. A létrehozás előtt keresse meg az Attribútumok felügyelőt (Megtekintés> Segédprogramok> Tulajdonságok ellenőrzése) az ablak jobb oldalán, majd nézze meg az Állapotsor sávot. Alapértelmezés szerint az Inferred beállítást választja, amely az iPhone állapotának szabványos színét használja, de a Black (Fekete) vagy a Transparent Black (Áttetsző fekete) közül választhat, ha jobban megfelelnek az alkalmazásnak.
Objektumkönyvtár
Ha az ablak jobb oldalán található segédprogram nem látható, akkor bekapcsolhatja a Nézet> Segédprogramok> Segédprogramok megjelenítéséhez. A Segédprogramok panelen tekintse meg az Objektumkönyvtár alsó paneljét. Van egy legördülő menü az "Objektumok" elemkel a lista tetején. Ha nem találja őket, akkor megnézheti a Nézet> Segédprogramok> Objektumkönyvtár megjelenítése lehetőséget.
Most előfordulhat, hogy a navigációs sáv gradiensét össze kell kapcsolni a lap alsó sávjával, és ehhez kattintson a navigációs sávra, és nézze meg a Tulajdonságok panelen a Tulajdonságok panel jobb oldalát. Az első opció neve Style. amely alapértelmezés szerint be van állítva. Módosítsa az alapértelmezett c stílust a Fekete Opaque-ra. és színei keverednek.
Add hozzá még egy lapot az alkalmazás alsó sorában. Mozgassa az egérmutatót a Windows eszköztár fölött # 038; Bars, majd görgessen le a Tab Bar elemre. közvetlenül a tab bár alatt. Húzza be az alkalmazásba, és helyezze el a két meglévő gomb között a lap tetején. Ha duplán kattintunk erre a gombra, további segédprogramokat találunk a Segédprogramok panelen, itt módosíthatja az elem képét és nevét. Példánkban a példánkban az újonnan hozzáadott tabulátor elemhez a név "Könyvjelző" -re változik.
Elolvastad az Xcode tervrajzának rövid útmutatóját. Ez nem egy nagyon bonyolult folyamat, de egy kis időt vesz igénybe ahhoz, hogy megszokja a felületet. Próbáljon meg még néhány elemet magabiztosabbnak érezni, és további részleteket is megtudhat az Apple iOS Fejlesztési Forrásaiban, mert soha nem fog fájni!
Ne felejtsd el a 2. részt
Ezzel lezárul az iPhone alkalmazás tervezési útmutatójának első része. A következő részben a Célkitűzésről és a Cocoa Touchről fogunk beszélni, és megtudhatja, hogyan hozhat létre alkalmazható alkalmazásokat az iPhone számára, ezért maradjon hangolt! UPD 2. rész
Példák az iOS tervezésére
Annak érdekében, hogy új eredményeket nyújthasson nekem, az iPhone alkalmazásokhoz kiválóan választottam a választékot.
Race Splitter
Tweetbot az iPhone számára
