ПредишенСледващото

да се разработи ръководство в IOS: интерфейс - част 1

Apple в продължение на много години, е водеща компания в мобилния свят със своя iPhone и IPad. Те притежават най-голям пазарен дял на мобилни платформи, и това е причината, че повечето клиенти искат техните приложения са били представени на App Store от Apple, която насърчава програмистите да се научат да създадете iPhone-приложение.

да се развие в Базите IOS интерфейс

Разработване на приложения за iPhone - това не е толкова трудно, колкото си мислиш, и този пост ще служат за пълно ръководство за целия процес на създаване на приложения за iPhone. Ние ще обсъдим причините, етапи и инструменти за разработка на приложения, и в крайна сметка ще получите лесен урок за разработване на iPhone приложения, използвайки основния Xcode 4.2.
Ако искате да печелите пари, или току-що сте имали интересна идея за приложение, което може да ви направи милионер, нека да започнем създаването на първата си молба за iPhone.
Забележка: Ще ви е необходим компютър с операционна система Macintosh (Mac), за да инсталирате Xcode и разработване на приложения за Windows, която не може да се направи законно.

Защо се развива в продължение на Apple?

Това е често задаваният въпрос, така че трябва да обясни защо трябва да се интересуват от iPhone-D. Както бе споменато във въведението, iPhone в момента е по-голяма строгост на пазарните дялове на мобилните платформи. Това трябва да бъде достатъчно основание да се научите как да разработват приложения за iPhone, независимо от това дали сте проектиране за себе си или на клиентите, тъй като повечето хора се надяват, че техните приложения могат да бъдат достъпни по целия свят.

да се развие в Базите IOS интерфейс

Apple обича простота. и това се отнася и за техните продукти, както и за платформата. IOS е операционната система, която е инсталирана на всички мобилни устройства на Apple. Те включват лаптоп лампа, iPhone и IPAD. Така че имайте предвид, когато сте разработването на приложения за iPhone, може да се наложи да се създадат приложения за всички други устройства с IOS!
В допълнение, той Забележително е колко много от усилията, положени за писане на код, който може да се съхранява. Когато пишете код за iPhone-приложението, можете да използвате една и съща език за програмиране, както останалата част от устройствата на Apple. Това означава, че когато разработвате приложения iPhone, приложението може да бъде допълнително интегриран в Ipad и дори Mac.
Objective-C е основен език за програмиране, включени във всички платформи. Заедно с Objective-C, ще създадете приложение за iPhone, използвайки Cocoa Touch среда за програмиране.
Това е само една малка част от информацията, така че може да започне разработването на приложения за iPhone. Развитието е много сложен процес, но не бързайте да се разстрои. Решението е твое.

структура заявление за планиране

В стандартната идеологията на създаване на iPhone-приложение, което ще трябва да мине през няколко етапа. Първата фаза включва планиране и скици. На първо място, трябва да имате представа за това, което ще направим приложението си. Защо хората искат да го сваля? И какви функции искате да включите? Това е най-важната стъпка, защото ако го направя така, ще спестите много време и да се избегнат проблеми в етапа на кодиране.

да се развие в Базите IOS интерфейс

Той препоръча, чертаейки идеи за няколко страници (или екрани) на вашата кандидатура. Просто начертайте правоъгълник, а може би 5 или 6 на лист хартия, направи това, което искате да видите на всяка страница на вашата кандидатура. Можете да мислите за екраните като различни страници от сайта. Всеки екран ще предлагат голямо разнообразие от функции, като например регистрационен формуляр, списък с контакти или маса от данни.

По-долу - кратък списък на различните елементи на потребителското меню:

  • Лентата на състоянието (Status Bar) - показва текущото състояние на заряда, 3G-връзка, рецепция и много повече. Той винаги е препоръчително да се включат тези елементи.
  • панела за навигация (Navigation Bar) - позволява на потребителите да се ориентират между страниците. Често тук са включени и бутони в лявата част на менюто, потребителят може да се върнете към предишната страница.
  • Toolbar (Лента с инструменти) - появява в долната част на iPhone. Ще има няколко икони, свързани с определени функции, като например акции, изтегляне, изтриване и т.н.
  • Раздели на менюто (Tab Bar) - много прилича на лентата с инструменти, но сега, с които работите раздели. Когато потребителят кликне върху иконата на раздела, той автоматично ще бъде избран, и тя ще бъде осветен. Това меню се използва за превключване между прозорците.

Този списък съдържа само лентите с инструменти, които можете да намерите в повечето приложения. Има и други стилове, които можете да намерите в инструкцията указания за използване на IOS елемент от потребителския интерфейс. Определено се препоръчва да се позове на това ръководство, ако имате някакви съмнения относно интерфейса на iPhone.
В тази статия няма да се опише всеки потребителски интерфейс елемент. Твърде много елементи, за да бъдат разгледани, и че няма да използвате всички от тях в едно приложение. Но вие можете да черпят вдъхновение от предложените по-горе принципи, както и от други iPhone приложения, които ви харесват.

Разпределение дизайн в Photoshop

да се развие в Базите IOS интерфейс

За да започнете, трябва да обсъдим корекция в Photoshop. Тъй като ние разработваме за iPhone, ние трябва да помисли два различни дизайна стил. iPhone стандарт дисплей е 320 х 480 пиксела. Все пак iPhone 4 има нов дисплей «ретината», което удвоява броя на пикселите в рамките на един екран. По този начин, вие трябва да се удвои резолюцията до 640 х 960 пиксела и да се създаде дизайн оформления и на този стандарт.

Това означава, че вие ​​също трябва да се създадат 2 комплекта икони за вашите оформления. Първоначално иконите ще бъдат 163 точки на инч. но трябва да включва икони с 326 точки на инч за iPhone 4. Икони традиционно отбелязани @ 2x в края на името на файла, например «[email protected]» (малко повече за тази статия iPhone 4 Retina Display: Техники и Workflow).
Сега нека да оптимизираме нашите нови настройки. Първо, ние трябва да редактирате някои от настройките, така че отидете на Photoshop> Edit> Preferences> Guides. Решетка и филийки. Установяваме на решетка на линиите на мрежата на всеки 20 пиксела на подразделения 2. При проектирането на дисплея за iPhone 4, 2 пиксела линия ще показват на екрана 1 т. Трябва да имате предвид, когато мащабиране вашата кандидатура.

Като правило, по-лесно е да се създаде моите проекти с по-висока резолюция и след това да ги мащабирате, но можете да го пробвате и в двете посоки и да видим какво ви подхожда най-добре. Използвайте настройките на 640 х 960 пиксела при 326 точки на инч - Запазване на най-доброто от тези настройки, ако възнамерявате да ги използвате често.

Използването на елементи на шаблона

Сега можете да използвате Photoshop, за да създадете пиксел перфектно оформление, но това е много досадна работа. Аз ви препоръчвам iPhone 4 GUI PSD от Teehan + Lax (вж. Mac елементи от интерфейса, iPhone и IPAD PSD).

да се развие в Базите IOS интерфейс

Това е един огромен файл, има много елементи.

Съвет: За да направим нещата по-лесно, можете да натиснете V и активирате инструмента на инструмент Move. и след това изберете горния панел Auto-Select. и изберете Layer. С тези настройки можете да кликнете върху всеки елемент и Photoshop ще ви отведе до съответната слой.

Не се страхувайте да експериментирате с оформлението. Можете дори да създадете прототипни приложения с помощта на оформление. В зависимост от вашето приложение, можете да активирате различни функции, много от които могат да бъдат намерени в PSD файл. Можете също да отидете на слоя от тези елементи и редактиране на шрифта, цвета на градиента, както и други стилове в дизайна. Основното нещо - не се променят размера. тъй като всички панели и елементи от потребителския интерфейс по подразбиране набор от стандартни размери.

Разработка на приложения в Xcode

развитие Инструмент за IOS и Mac OS X програма, наречена Xcode. Ако използвате OS X Lion, можете да намерите Xcode и всички съответни пакети безплатно в Mac App Store.

да се развие в Базите IOS интерфейс

След като инсталацията приключи, стартирайте Xcode и началният екран ще се появи. От тук можете да свалите стария проект или да създадете нов. Сега трябва да натиснете бутона «Създаване на нов Xcode проект», както и в новия прозорец ще ви бъдат предложени няколко варианта. Изберете "единна Виж Приложение» и натиснете «Напред». Можете да дадете име на новото приложение. например, Test (за предпочитане без интервали), а след това в «Фирма идентификатор» за въведете дума, например, MyCompany, изберете папката и натиснете «Запази».
Xcode ще създаде директория и се отвори нов прозорец за тази работа. Вие ще видите списък на файлове и папки, които носи името на вашата кандидатура ще бъде първото.

да се развие в Базите IOS интерфейс

С новата Xcode 4,2, ние имаме две версии на елементите на дизайна на външния интерфейс. Класически формат XIB / писец е стандарт за Mac OS X и IOS приложения, изисква от вас да създадете всеки път, когато нов оформлението на страницата.
В допълнение, ще видите файловете и .h и .m. Това намаляване на имената на файловете за горни и производителност. Тези файлове са там, където пишете всички функции на Objective-C и променливите, необходими за изпълнението си.
Сега трябва да се обясни как се работи с Xcode MVC (Model, View, Controller). това е причината, че се нуждаем от 2 файла за всеки контролер.

Софтуер Йерархия MVC

За да се разбере как работи приложението, което трябва да разберат своята софтуерна архитектура. С модел, View, Controller (MVC), като основа. Xcode да споделите всички ваши дисплеи и интерфейс код, базиран на вашата логика и обработка на функции. На пръв MVC може да изглежда объркващо, но това е въпрос на навик.

да се развие в Базите IOS интерфейс

За да направи по-лесно да се разбере, ще разбере всеки обект:

По принцип си модел съдържа цялата информация и функции. ще трябва да се покаже на екрана. Но моделът не може да взаимодейства с екрана, но може видове. Форми - е преди всичко на визуалните ефекти, а те може да извлече данни само през ViewController. Контролерът е всъщност - това е сложен метод за предаване на данни чрез интерфейса. По този начин, можете да актуализирате дизайна без да губят функционалност.
С това знание, не трябва да се сблъскват с трудности, когато се опитват да създадат ново приложение. Както бе споменато по-рано, Objective-C е основен език за програмиране, който използвате за разработване на приложения. Тя се основава на езика C, с актуализирания синтаксис и няколко допълнителни парадигми. Това ще отнеме много време да се запознаят с езика.

Преглед на дизайна с версия 5 Разкадровките на

Сега, когато сме обхванати на техническите аспекти на прилагането, ние имаме малко време да се харчат за дизайна на интерфейса. Предполагам, че сте избрали «сториборд» при създаването на проекта, което означава, че можете да намерите MainStoryboard_iPhone.storyboard файл в папката, намираща се в лявата част на прозореца. Щракнете върху файла, за да го изберете и отворен.

да се развие в Базите IOS интерфейс

да се развие в Базите IOS интерфейс

Искаме да започнете, като добавите няколко елементи на страницата. Имаме нужда от два различни елемента: лентата за навигация и навигационна лента Tab Bar Tab Bar. Преди да ги създаде, отидете на инспектор на атрибути (View> Utilities> Показване атрибути инспектор) в дясната страна на прозореца и след това погледнете в лентата на състоянието. По подразбиране тя е настроена да Предполагаем, която използва стандартния цвят за статута iPhone, но можете да изберете и черно (черен) или прозрачно черно (Translucent черен), ако те са по-подходящи за вашата кандидатура.

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

Когато комисията полезност от дясната страна на прозореца не се вижда, можете да го активирате, като отидете на View> Пособия> Show Utilities. В панела комунални услуги (Utilities) погледнем в долния панел, наречен библиотека обект. Има падащ елемент от менюто «обекти» в списъка. Ако не можете да ги намерите, можете да отидете на View> Пособия> Библиотека Покажи Object.

да се развие в Базите IOS интерфейс

да се развие в Базите IOS интерфейс

да се развие в Базите IOS интерфейс

Сега, може би искате да градиент на лентата за навигация съчетана с лентата с разделите в долната част, и за това можете да кликнете върху лентата за навигация в дясно и ще видиш Атрибути панела в панела Utilities. Първият вариант се нарича стил. който е инсталиран по подразбиране. Промяна на стила на C по подразбиране на Черно непрозрачен. и си цветове ще бъдат комбинирани.

да се развие в Базите IOS интерфейс

Нека също да добавите друг бутон раздел в лентата в долната част на приложението. Задръжте курсора на мишката върху лентата на задачите на Windows # 038; Барове и превъртете надолу до Tab Bar елемент. директно под лентата с разделите. Преместете го в кандидатурата си, и го поставете между две съществуващи бутон на лентата с раздели. Ако кликнете два пъти върху този бутон, можете да видите някои допълнителни опции в панела Utilities, тук можете да смените изображението, както и името на елемента. Така например, в нашия пример, името е сменено на «Bookmark» за раздела т бара наскоро добавя.

Вие четете кратко ръководство за проектиране в Xcode. Това не е много труден процес, но имате нужда от малко време, за да свикне с интерфейса. Опитайте се да добавите някои други елементи, за да се чувствате по-уверени и можете да посетите IOS Развитие на човешките ресурси на Apple за повече, защото никога не боли!

Не забравяйте, Част 2

С това завършва първата част на приложения за дизайн ръководството на iPhone. В следващата част ще говорим за Objective-C и Cocoa Touch, и вие ще се научите да създавате работни приложения за iPhone, така че очаквайте! UPD част 2

Дизайн Примери за IOS

За да ви вдъхнови за нови постижения, Прилагам селекция от отличен дизайн за iPhone-приложения.
състезание Splitter

да се развие в Базите IOS интерфейс

да се развие в Базите IOS интерфейс

Tweetbot за iPhone

да се развие в Базите IOS интерфейс

да се развие в Базите IOS интерфейс

да се развие в Базите IOS интерфейс

да се развие в Базите IOS интерфейс

да се развие в Базите IOS интерфейс

да се развие в Базите IOS интерфейс

да се развие в Базите IOS интерфейс

да се развие в Базите IOS интерфейс

Читателите също да харесате:

Подкрепете проекта - споделете линка, благодаря!