Водич за почетнике за иОС развој Интерфаце - Парт И

Аппле је већ годинама водећа индустрија у свету мобилних телефона са својом иПхоне и иПад серијом. Упркос хипер-у који може да створи са сваким званичним издањем, он такође држи велики део тржишних удјела у мобилној платформи, и то је вероватно разлог што већина клијената жели да њихова апликација постоји у Аппле-овој продавници апликација; тако постаје разлог зашто програмери уче и граде иПхоне апликацију.

Добра вест је да развој апликација за иПхоне није толико тежак као што би се могло мислити, а овај пост постоји као свеобухватан водич који ће вас водити кроз цијели процес изградње апликације за иПхоне.

Разговараћемо о разлозима, фазама и алатима за развој апликације и на крају ћете пратити једноставан водич за креирање основне иПхоне апликације помоћу Ксцоде-а.

Дакле, без обзира да ли учите за посао или имате невероватну идеју о апликацији која вас може учинити милионерима, хајде да почнемо са изградњом своје прве апликације за иПхоне!

Напомена: Требаће вам рачунар са оперативним системом Мацинтосх (Мац ОС) за инсталацију Ксцоде-а, развој апликација и подношење апликација, нема начина да то урадите на Виндовс-у легално.

Зашто развити за Аппле?

Видим ово питање често постављано па желим да објасним зашто бисте требали бити заинтересовани за развој иПхонеа. Као што сам навео у уводу, иПхоне тренутно држи велики дио тржишних удјела у мобилној платформи.

Мислим да би овај разлог требао бити довољан да научите да развијете иПхоне апликацију, без обзира да ли се развијате за себе или клијенте, већина људи се вјероватно нада да ће њиховој апликацији моћи приступити велики број људи на свијету.

Са становишта развоја, Аппле воли ствари једноставне, а то се односи на њихове производе и оквире. иОС је оперативни систем који покреће све Апплеове мобилне уређаје. То укључује иПод Тоуцх, иПхоне и иПад. Дакле, имајте на уму када будете развијали апликације за иПхоне, могли бисте бити за све остале уређаје са иОС-ом!

Осим тога, оно што чини горњу функцију још већом је колико се може сачувати рад кодирања. Када пишете код за иПхоне апликацију, ви сте користећи исти програмски језик за све Аппле рачунарске уређаје. То значи да када развијате иПхоне апликацију, апликација се касније може интегрирати у иПад и чак Мац.

Објецтиве-Ц је језгро програмског језика који покреће све њихове оквире. Заједно са Објецтиве-Ц, такође ћете развити иПхоне апликацију са Цоцоа Тоуцх, програмски оквир који покреће интеракцију корисника на иОС-у.

Све је то само мало информација да би сте започели развој иПхоне апликација. Развој је прилично компликован процес, али се опустите, узмите полако. Разлози су овде, а одлука је ваша. Без обзира да ли је одговор да или не, увек можете да прескочите следећу тему: дизајнирање апликација за иПхоне.

Планирање ваше иПхоне Апп Струцтуре

У стандардној идеологији креирања иПхоне апликације желите проћи кроз неколико фаза. Прва фаза укључује планирање и скицирање.

Прво морате имати идеју за шта ће ваша апликација урадити. Зашто би људи хтели да је преузму? И које функције желите да укључите? Ово је најважнија фаза, ако то урадите како треба, ви ћете уштедите много конфузије и проблема у фази кодирања.

Најгоре, враћа вас на таблу за цртање.

И рецомменд то скицирати неке грубе идеје за неколико страница (или приказа) ваше апликације. Само нацртајте облик правоугаоника, можда 5 или 6 облика на листу папира, а затим исцртајте жељене функције за сваки приказ апликације.

Ставове можете посматрати као различите странице на веб-локацији. Сваки приказ ће нудити различите функционалности као што су образац за пријаву, листа контаката или табела података.

У наставку сам направио кратку колекцију различитих елемената корисничког интерфејса:

• Статусна трака - Приказује тренутни ниво напуњености батерије, 3Г везу, шипке за пријем, телефонски оператер и још много тога. Препоручује се да увек укључите ове елементе.
• Трака за навигацију - Даје корисницима могућност да се крећу између хијерархија страница. Ово често укључује дугме на левој страни траке које омогућава кориснику да се врати на претходни приказ апликације.
• Тоолбар - Појављује се на дну апликације за иПхоне. Ово ће држати неколико икона везаних за неке функције као што су Објави, Преузимање, Обриши, итд.
• Таб Бар - Веома сличан траци са алаткама, осим што сада радите са картицама. Када корисник кликне на икону картице аутоматски ће бити означен и приказат ће се сјајно стање. Ова трака се користи за пребацивање између приказа уместо да нуди директну функционалност.

Ова листа садржи само траке са алаткама које можете пронаћи у већини апликација. Постоје неки други погледи и стилови које треба размотрити, које можете наћи у Апплеовим Смјерницама за кориштење Елемента УИ. Препоручујем да погледате ову документацију када имате сумње у елементе корисничког интерфејса иПхонеа.

У интересу времена нећу описивати сваки елемент корисничког интерфејса. Постоји превише елемената које треба размотрити и нећете завршити да их користите у једној апликацији. Али док скицирате своје погледе, можете цртајте инспирацију из горе наведених смерница и других иПхоне апликација уживали сте у њиховом коришћењу.

Десигнинг Пхотосхоп Моцкупс

Претпостављам да је већина вас прилично удобна у раду са Адобе Пхотосхопом. То је премијерни софтвер за креирање графике за веб странице, баннере, логотипе и мобилне моцкупове. Дизајнирање графике за веб је прилично једноставан процес, али је мало компликованије када је у питању дизајн иПхоне апликација.

Ако желите да направите апликацију коју заиста треба креирајте пиксел-савршене моделе дизајна од самог почетка.

Да почнемо, требало би да разговарамо о Пхотосхоп подешавањима. Будући да дизајнирамо за иПхоне, морамо размотрити два различита стилова дизајна. Тхе обични иПхоне екран је 320 к 480 пиксела. Међутим, иПхоне 4 укључује и ретина дисплеј који удвостручује количину пиксела унутар исте величине екрана. Требало би двоструку резолуцију на 640 к 960 пиксела и дизајнирајте своје изгледе према овом стандарду.

То значи да ћете морати направите 2 сета икона за ваше макете. Првобитно би биле иконе подешено на 163ппи али мораћете укључују иконе са 326ппи за иПхоне 4. Иконе су традиционално означене @ 2к на крају имена датотеке, као што је “ицон@2к.пнг“.

Сада оптимизујмо нове поставке документа. Прво ћемо морати уредити неке поставке, тако да приступамо Пхотосхопу> Едит> Преференцес> Гуидес, Грид анд Слицес. Ми ћемо бити постављање наше Гридлине сваких 20пк са подјелом на 2. Приликом пројектовања за приказ мрежнице Линија 2пк ће приказати 1 бод на екрану. Ово је важно правило које морате имати на уму да бисте смањили своју апликацију.

Склон сам да лакше изградим своје дизајне са већом резолуцијом, а затим их смањим, али можете испробајте обе методе и видите шта вам најбоље одговара. Користимо 640 к 960 пиксела на 326ппи - сачувајте га као прилагођену поставку ако мислите да ћете је често користити.

Зграда са елементима шаблона

Сада можете користити Пхотосхоп како бисте сами креирали савршен изглед пиксела, али то се показало као веома исцрпљујући и напоран рад.

Ово је огроман фајл са превише елемената. Да би вам било лакше, можете да притиснете в активирате Мове Тоол и кликните на “Ауто-Селецт” на траци са опцијама, затим изаберите “Слој” радије него “Група”. Са подешавањима, можете кликнути на било који елемент и Пхотосхоп ће вас довести до одговарајућег слоја!

Слободно се играјте са моделом, или чак можете креирати прототип своје апликације из модела. У зависности од ваше апликације можете укључити мноштво функција унутар језгре, од којих многе можете наћи у овој ПСД датотеци. Такође је могуће прећи на слојеве ових елемената и уредити фонтове, боје градијента и друге стилове дизајна. Само побрините се да ништа не мијењате пошто су све траке и елементи корисничког интерфејса подешени на стандардне стандардне величине.

Развој апликација у Ксцоде-у

Алат за развој програмера за иОС и Мац ОС Кс назван је Ксцоде. Ако користите ОС Кс Лион можете пронаћи Ксцоде и све примјењиве пакете бесплатно у Мац Апп Сторе.

По завршетку инсталације, покрените Ксцоде и његов поздравни екран би требало да се појави. Одавде можете учитати старији пројекат или одабрати да направите нови. За сада морате кликнути “Направите нови Ксцоде пројекат“, онда ће се прозор шаблона појавити са неколико опција. Под иОС> Апплицатион, кликните на “Сингле Виев Апплицатион” и удари “Следећи”. Можете дајте новој апликацији име, као такав Тест (по могућности без размака), затим на Идентификатор компаније, укуцајте било коју реч као што је моја компанија, и коначно изабери директоријум и погоди “сачувати”.

Ксцоде ће изградити директоријум датотека и послати вас у нови прозор за рад. Требало би да видите многе опције датотека, али која се зове по вашој апликацији је примарни фокус.

Са Ксцоде имате две опције за дизајнирање предњих елемената. Класични киб / ниб формат је стандардан за Мац ОС Кс и иОС апликације, што захтева да сваки пут креирате нови приказ странице. Међутим, пошто стварате више приказа у једној апликацији, количина датотека из ребрастих датотека може да постане сувише велика, тако да нова сторибоард Датотека садржи све ваше прегледе у једном окну уређивача. Одавде можете лако да уклоните и додате елементе корисничког интерфејса и функције.

Додатно ћете наићи .х и .м датотека у истој групи директоријума. Ово су кратка имена датотека за хеадер и имплементације код. Ове датотеке су место где пишете све функције Објецтиве-Ц и променљиве које су потребне за покретање апликације. Можда је добра идеја објаснити како ради Ксцоде МВЦ (модел, поглед, контролер), због чега нам је потребно 2 датотеке за сваки контролер.

МВЦ хијерархија програмирања

Да бисте разумели како апликација функционише, морате разумети њену архитектуру програмирања. Са Модел, поглед, контролер (МВЦ) као темељ, Ксцоде може одвојити све ваше дисплеје и кодове интерфејса од ваших логичких и процесних функција, и не постоји друга опција за избор. МВЦ у почетку може изгледати збуњујуће, али ако покушате да га разумете и почнете да правите неколико основних апликација, завољет ћете структуру.

Да би вам било лакше разумети, представио сам сваки објекат у следећој листи:

• Модел - Садржи све ваше логичке и основне податке. То укључује варијабле, везе са екстерним РСС феедовима или сликама, детаљне функције и бројање. Овај слој је потпуно одвојен од ваших приказа тако да можете лако да промените приказе и да и даље имате исте податке.
• Поглед - Екран или стил приказа у вашој апликацији. Листа табела, страница профила, страница са сажетком чланка, аудио плејер, видео плејер, све су то примери приказа. Можете променити њихове стилове и уклонити елементе, али ћете и даље радити са истим подацима у моделу.
• Цонтроллер - Делује као посредник између друга два. Ви повезујете објекте по вашем мишљењу са ВиевЦонтроллер-ом који преноси информације до и из вашег модела. Тако је на овај начин могуће да корисник притисне дугме и региструје га у моделу. Затим покрените функцију одјаве и преко истог контролера проследите поруку “успјешно одјављен!”.

У основи ваш Модел садржи све информације и функције које ћете морати приказати негдје на екрану. Али модели не могу да комуницирају са екраном, само погледи могу. Прикази су углавном сви визуални прикази, а податке се може вући само преко ВиевЦонтроллер-а. Тхе Контролер је заправо много префињенији начин да сакријете своје задње крајње податке од дизајна предњег краја. На овај начин можете неколико пута обновити дизајн, а да при томе не изгубите функционалност.

Са овим знањем не би требало бити тешко започети са изградњом првих неколико апликација. Као што је поменуто раније, Објецтиве-Ц је језгро програмског језика који ћете користити за развој апликације. Изграђен је на Ц језику са ажурираном синтаксом и неколико додатних парадигми. Биће вам потребно доста времена да се упознате са језиком, али за почетну лекцију препоручујем серију уџбеника од Мобилетутс-а.+.

Дизајн Виев витх Сторибоардс

Сада када смо истражили техничке аспекте апликације, требали бисмо потрошити мало времена на дизајнирање сучеља. Претпостављам да сте задржали “Сторибоард” опција проверите приликом креирања пројекта, што значи да можете да пронађете једну МаинСторибоард_иПхоне.сторибоард датотеку негдје у групи директоријума која се налази на лијевој страни прозора. Кликните на датотеку да бисте је одабрали и отворили приказ.

Нова бочна трака треба да се појави директно на десној страни групе фасцикли. То се зове Оутлине документа и то је нека врста брзе методе прегледа за проверу свих доступних приказа у овој плочи сценарија.

Желимо да почнемо са додавањем само неколико елемената странице у наш контролер приказа. Потребна су нам два различита елемента: а Трака за навигацију и а Таб Бар. Пре него што их зграбимо, приступамо Аттрибутес Инспецтор (Приказ> Услужни програми> Прикажи инспектора атрибута) на десној страни прозора, затим потражите Статусна трака етикета. Подразумевано је постављено на Инферред која користи стандардну боју статуса иПхоне, али можете и одабрати Црн или Транслуцент Блацк ако дизајн ваше апликације боље пристаје боји.

Библиотека објеката

Ако је Утилитиес на десној страни прозора није видљива, можете је омогућити тако да приступите Виев> Утилитиес> Схов Утилитиес. У окну Утилитиес (Услужни програми) погледајте доњи део прозора који се зове Библиотека објеката. Има падајући мени са “Објецтс” као прва ставка на листи. Ако га нисте могли пронаћи, можете одабрати Виев> Утилитиес> Схов Либрари.

Из падајућег менија библиотеке објеката пронађите и изаберите Виндовс & Барс. Сада кликните на Трака за навигацију, повуците га у прозор за преглед и поставите га директно испод црног Статусна трака (са иконом батерије). Сада можемо да прилагодимо опис наслова бара. Двапут кликните на текст који тренутно чита “Наслов“, и видећете ознаку под називом “Наслов” на окну Утилитиес (Помоћни програми), на који можете да промените опис наслова “Тест” одатле. Хит “Ентер” да сведочи о промени.

Поново на панелу Виндовс & Барс, померите се надоле да бисте пронашли Таб Бар, затим га превуците у прозор за приказ и поставите га на самом дну апликације. По дефаулту ова два елемента изгледају фантастично.

Сада можда желите да градијент навигацијске траке одговара линији картице на дну, а да бисте то урадили можете кликнути на навигацијску траку и погледати десно на Атрибути панел у окну „Услужни програми“. Позива се прва опција Стиле, која је постављена на Подразумевано. Промените стил из подразумеваног у Блацк Опакуе и имаћемо одговарајући сет боја!

Хајде да додамо још један дугме картице у доњу траку апликације. Померите показивач миша на панел Виндовс & Барс поново и померите се до Таб Бар ставка, директно испод Таб Бар. Превуците га у прозор апликације и поставите га у средину два постојећа дугмета на траци картице. Ако двапут кликнете на ово ново дугме, можете да видите неке додатне опције у окну Утилитиес, мењате ставку слика и титле одатле. На пример, променио сам наслов на “Боокмарк” за недавно додату ставку на траци картице.

Ово је кратак водич о дизајнирању погледа унутар Ксцоде-а. То није страшно тежак процес, али ће бити потребно мало више времена да се навикнете на интерфејс. Играјте се са још неколико елемената ако се осећате удобно, а такође можете да се упутите на Аппле-ове иОС развојне ресурсе за више ресурса за учење, никада није лоше да откријете више!

Стаи Тунед фор Парт ИИ

Ово завршава наш први дио водича за дизајн и развој иПхоне апликација. У следећем делу ћемо дубље ући у Објецтиве-Ц и Цоцоа Тоуцх, и на крају ћете научити да направите функционалну иПхоне апликацију, останите у току!

иОС Десигн Галлери

За дизајнере се такође надам да ћу вам донијети инспирацију, па сам у наставку укључио и попис сјајних приказа иПхоне апликација. На листи се налази велики број инспиративних елемената апликације које вероватно никада раније нисте приметили. Слободно подијелите своје идеје, приказе апликација или питања у одјељку за коментаре испод, хвала!

Раце Сплиттер

Сатисфацтион Ремоте

Твеетбот за иПхоне

Реедер

Фоурскуаре

МаилЦхимп

инстаграм

Јоистик

Пиицту

Даркнесс