Посібник для початківців для розробки iOS Інтерфейс - Частина I
Apple вже кілька років є провідною галуззю у світі мобільних телефонів з iPhone та iPad. Незважаючи на галас, який він може створити з кожним офіційним релізом, він також містить велику частку ринкової частки в мобільній платформі, і це, мабуть, причина, що більшість клієнтів захочуть, щоб їхня програма існувала в App Store. таким чином стає причиною для розробників вивчати та створювати додаток для iPhone.
Хороша новина полягає в тому, що розробка додатків для iPhone не така складна, як ви думаєте, і цей пост існує як повний посібник для того, щоб пройти через повний процес створення програми для iPhone.
Ми обговорюватимемо причини, етапи та інструменти для розробки програми, і в кінцевому підсумку ви будете дотримуватися простих посібників для розробки основних додатків iPhone за допомогою Xcode.
Отже, чи ви навчаєтесь для бізнесу, або просто маєте дивовижну ідею про додаток, що може зробити вас мільйонером, давайте почнемо створювати своє перше додаток для iPhone!
Примітка: Вам знадобиться комп'ютер з операційною системою Macintosh (Mac OS) для інсталяції Xcode, розробки додатків та подання програм..
Навіщо розробляти для Apple?
Я бачу це запитання часто, тому я хочу пояснити, чому ви повинні бути зацікавлені в розробці iPhone. Так само, як я заявив у вступі, iPhone в даний час володіє великою часткою ринкової частки в мобільній платформі.
Думаю, цієї причини достатньо для того, щоб ви навчилися розробляти додаток для iPhone, оскільки ви розробляєте для себе або клієнтів, більшість людей, можливо, сподіваються, що їхні програми можуть отримати доступ до багатьох людей у світі.
З точки зору розвитку, Apple любить речі прості, і це стосується їхніх продуктів і рамок. iOS - це операційна система, яка керує всіма мобільними пристроями Apple. До них відносяться iPod Touch, iPhone і iPad. Тому майте на увазі, коли ви розробляєте програми для iPhone, ви можете бути розробляється для всіх інших пристроїв з iOS!
Крім того, те, що робить вищезгадану функцію ще більшою, це те, як можна зберегти роботу з кодування. Коли ви пишете код для програми iPhone, ви використовуючи ту ж мову програмування для всіх обчислювальних пристроїв Apple. Це означає, що, коли ви розробляєте додаток iPhone, додаток пізніше може бути інтегровано в iPad і навіть Mac.
Objective-C є основною мовою програмування, яка керує усіма їхніми рамками. Поряд з Objective-C, ви також будете розробляти iPhone додаток з Какао Touch, рамки програмування, що керують взаємодією користувача з iOS.
Це все лише трохи інформації, щоб ви почали розробку iPhone додатків. Розвиток є досить складним процесом, але розслабитися, прийняти його повільно. Тому причини тут, і рішення є вашим. Незалежно від того, чи є відповідь «так» чи «ні», ви завжди можете перейти до наступної теми: розробка додатків для iPhone.
Планування структури iPhone App
У стандартній ідеології створення додатка для iPhone ви захочете пройти кілька етапів. Перший етап включає планування та креслення.
Перш за все потрібно мати ідею що буде робити ваша програма. Чому люди хочуть його завантажити? І які функції ви бажаєте включити? Це найважливіший етап, якщо ви зробите це правильно, ви будете економити багато плутанини і неприємностей у фазі кодування.
Найгірше, це повертає вас до креслярської дошки.
Рекомендую намалювати деякі грубі ідеї для кількох сторінок (або переглядів) програми. Просто намалюйте прямокутну форму, можливо, 5 або 6 фігур на аркуші паперу, а потім намалюйте потрібні функції для кожного перегляду програми.
Ви можете думати про види, як про різні сторінки на веб-сайті. Кожен вигляд буде мати різні функції, такі як форма входу, список контактів або таблиця даних.
Нижче наведено стислий набір різних елементів панелі інтерфейсу:
- Рядок стану - Відображає поточний рівень заряду акумулятора пристрою, з'єднання 3G, бари прийому, носій телефону та багато іншого. Рекомендується завжди включати ці елементи.
- Панель навігації - Надає користувачам можливість переміщатися між ієрархіями сторінок. Це часто включає кнопку з лівого боку панелі, щоб дозволити користувачеві повернутися до попереднього перегляду програми.
- Панель інструментів - З'являється в нижній частині програми iPhone. Це дозволить утримувати кілька піктограм, пов'язаних з деякими функціями, наприклад Частка, Завантажити, Видалити, тощо.
- Панель вкладок - Дуже схожий на панель інструментів, за винятком тепер ви працюєте з вкладками. Коли користувач натискає на іконку вкладок, він автоматично буде виділено, і він відображатиме глянцевий стан. Цей рядок використовується для перемикання між переглядами, а не для прямого функціонування.
Цей список містить лише панелі інструментів, які можна знайти в більшості програм. Існує кілька інших поглядів і стилів, які можна розглянути, які ви можете знайти в керівних принципах використання iOS UI. Я настійно рекомендую звернутися до цієї документації, коли ви маєте сумніви щодо елементів інтерфейсу iPhone.
В інтересах часу я не буду описувати кожен елемент інтерфейсу. Існує занадто багато елементів, які потрібно розглянути, і ви не в кінцевому підсумку скористаєтеся всіма ними в одному додатку. Але коли ви накреслюєте свої погляди, ви можете натхнення з рекомендацій, запропонованих вище, та інших додатків iPhone Вам сподобалося користуватися ними.
Проектування макетів Photoshop
Я припускаю, що більшість з вас досить зручно працювати з Adobe Photoshop. Це прем'єра програмного забезпечення для створення графіки для веб-сайту, банерів, логотипів і мобільних макетів. Проектування графіки для Інтернету є досить простим процесом, але це трохи складніше, коли мова йде про дизайн iPhone.
Якщо ви хочете створити програму, яку ви дійсно повинні створити ідеальні макети пікселів з самого початку.
Для початку ми повинні обговорити налаштування Photoshop. Оскільки ми розробляємо для iPhone, ми повинні розглянути два різних стилю дизайну. The звичайний дисплей iPhone розміром 320 x 480 пікселів. Однак iPhone 4 включає в себе дисплей сітківки, який подвоює кількість пікселів в межах одного розміру екрана. Так що ви повинні подвоєння до 640 x 960 пікселів і розробляйте свої макети відповідно до цього стандарту.
Це означає, що вам також потрібно створити 2 набори іконок для ваших макетів. Спочатку ікони були б встановлено на 163ppi але вам потрібно включати іконки з 326ppi для iPhone 4. Ікони традиційно позначені @ 2x в кінці імені файлу, наприклад “[email protected]“.
Тепер давайте оптимізуємо наші нові параметри документа. Спочатку нам потрібно буде відредагувати деякі налаштування, щоб отримати доступ до Photoshop> Edit> Preferences> Напрямні, сітки та скибочки. Добре бути встановлення нашої Gridline кожні 20px з підрозділами на 2. При проектуванні для сітківки відображаються Лінія 2px відображатиме 1 пункт на екрані. Це важливе правило, яке потрібно мати на увазі для зменшення масштабу програми.
Я схильний знаходити легше побудувати мої проекти з вищою резолюцією тоді маю їх вниз, але ви можете спробуйте обидва методи і подивіться, що вам найбільше підходить. Ми використовуємо 640 x 960 пікселів у 326ppi - збережіть це як спеціальний пресет, якщо думаєте, що ви будете використовувати його часто.
Будівля з елементами шаблону
Тепер ви можете використовувати Photoshop, щоб створити ідеальне розташування пікселів самостійно, але це виявляється дуже виснажливою і виснажливою роботою.
Це величезний файл із занадто великою кількістю елементів. Щоб полегшити роботу, натисніть кнопку v активувати Перемістити інструмент і натисніть на “Автовибір” на панелі параметрів, потім виберіть “Шар” а не “Група”. За допомогою налаштувань ви можете натиснути на будь-який елемент, а Photoshop - на відповідний шар!
Ви можете грати з макетом, або ви навіть можете створити прототип вашої програми з макета. Залежно від вашої програми ви можете включити безліч функцій в межах основної області, багато з яких ви можете знайти в цьому файлі PSD. Також можна перейти до шарів цих елементів і відредагувати шрифти, кольори градієнта та інші стилі дизайну. Просто переконайтеся, що ви нічого не змінюєте оскільки всі смуги та елементи інтерфейсу встановлюються стандартними типовими розмірами.
Розробка додатків у Xcode
Інструмент розробника для програмування iOS і Mac OS X називається Xcode. Якщо ви працюєте під керуванням OS X Lion, ви можете безкоштовно знайти Xcode і всі застосовні пакунки в Mac App Store.
Після завершення інсталяції запустіть Xcode, після чого має з'явитися екран вітання. Тут ви можете завантажити старий проект або зробити новий. Зараз потрібно натиснути “Створіть новий проект Xcode“, потім у вікні шаблону з'явиться кілька варіантів. У розділі iOS> Application натисніть “Застосування для одного перегляду” і вдарив “Далі”. Ти можеш дайте новій програмі назву, як от Тест (бажано без пробілів), потім на Ідентифікатор компанії, введіть будь-яке слово, наприклад моя компанія, і, нарешті, виберіть каталог і натисніть “Зберегти”.
Xcode створить каталог файлів і надішле вам нове вікно для роботи. Ви повинні побачити багато варіантів файлів, перерахованих, але папку, яка називається за вашою програмою є основним фокусом.
З Xcode у вас є два варіанти проектування елементів переднього кінця. Класика xib / nib Формат стандартний для додатків Mac OS X і iOS, що вимагає кожного разу створювати новий перегляд сторінки. Однак, оскільки ви створюєте більше переглядів у одній програмі, кількість файлів пір'я може стати надто переважною, тому новий раскадровка Файл містить всі перегляди перегляду в одному вікні редактора. Тут ви можете легко видалити та додати елементи інтерфейсу та функції.
Додатково ви зустрінете .h і .m файли в одній групі папок. Це короткі назви файлів для заголовка і реалізації код. Ці файли є місцем, де ви пишете всі функції Objective-C і змінні, необхідні для запуску програми. Це може бути гарною ідеєю, щоб пояснити, як працює Xcode MVC (модель, перегляд, контролер), що є причиною того, що нам потрібен 2 файли для кожного контролера.
Ієрархія програмування MVC
Щоб зрозуміти, як працює додаток, потрібно зрозуміти його архітектуру програмування. С Модель, погляд, контролер (MVC) як основа, Xcode може відокремити всі ваші дисплеї та код інтерфейсу від логіки та функцій обробки, і не існує іншого вибору. MVC може здатися заплутаним на перший погляд, але якщо ви спробуєте зрозуміти його і почати будувати кілька основних програм, ви полюбите цю структуру.
Щоб було легше зрозуміти, я представив кожний об'єкт у списку нижче:
- Модель - Утримує всі ваші логічні та основні дані. Це включає в себе змінні, підключення до зовнішніх RSS-каналів або зображень, детальні функції та переривання номерів. Цей шар повністю від'єднаний від ваших переглядів, так що ви можете легко змінювати перегляди і все одно мати ті ж самі дані.
- Переглянути - Екран або стиль відображення у вашій програмі. Список таблиць, сторінка профілю, сторінка резюме статті, аудіоплеєр, відеоплеєр - це всі приклади переглядів. Ви можете змінити їхні стилі та видалити елементи, але ви все одно будете працювати з тими ж даними у вашій моделі.
- Контролер - Діє як посередник між двома іншими. Ви підключаєте об'єкти на ваш погляд до ViewController, який передає інформацію в і з вашої моделі. Отже, таким чином можна натиснути на кнопку та зареєструвати його у своїй моделі. Потім запустіть функцію виходу і через той же контролер передайте повідомлення “успішно вийшов з системи!”.
Так в основному ваш модель зберігає всю інформацію та функції що вам потрібно буде відобразити десь на екрані. Але моделі не можуть взаємодіяти з екраном, тільки перегляди можуть. Перегляди в основному всі візуальні ефекти, і він може витягувати дані тільки через ViewController. The Контролер насправді є набагато більш витонченим способом приховування даних заднього кінця від дизайну переднього кінця. Таким чином ви можете відремонтувати дизайн кілька разів, не втрачаючи функціональності.
З цим знанням не повинно бути важко почати будувати свої перші програми. Як згадувалося раніше, Objective-C є основною мовою програмування, яку ви будете використовувати для розробки програми. Він побудований на мові C з оновленим синтаксисом і декількома додатковими парадигмами. Вам знадобиться багато часу, щоб ознайомитися з мовою, але для уроку для початківців рекомендую серію підручників від Mobiletuts+.
Дизайн з Storyboards
Тепер, коли ми розглянули технічні аспекти програми, нам слід витратити трохи часу на розробку інтерфейсу. Я припускаю, що ви зберегли “Розкадровка” опції перевіряється при створенні проекту, що означає, що ви можете знайти єдиний MainStoryboard_iPhone.storyboard файл де-небудь у групі папок, розташований з лівого боку вікна. Натисніть на файл, щоб вибрати його та відкрийте вікно.
Нова бічна панель повинна відображатися безпосередньо праворуч від групи папок. Це називається Контур документа і це свого роду метод швидкого перегляду для перевірки всіх доступних переглядів у цій розкадровки.
Ми хочемо почати, додавши лише кілька елементів сторінки в наш контролер перегляду. Нам потрібні два різні елементи: a Панель навігації а Панель вкладок. Перш ніж ми їх захопимо, доступ до Атрибути інспектора (Перегляд> Утиліти> Показати інспектор атрибутів) у правій частині вікна, потім шукайте Рядок стану етикетці. За замовчуванням встановлено значення Висновок який використовує стандартний колір стану iPhone, але ви також можете вибрати Чорний або Напівпрозорий чорний якщо дизайн вашої програми краще підходить до кольору.
Бібліотека об'єктів
Якщо Комунальні послуги на правій частині вікна не відображається, його можна ввімкнути, скориставшись пунктом меню Перегляд> Утиліти> Показати утиліти. На панелі утиліт зверніться до нижньої панелі, з якої викликається панель Бібліотека об'єктів. Він отримав випадаюче меню з “Об'єкти” як перший елемент списку. Якщо його не вдалося знайти, можна вибрати «Перегляд»> «Утиліти»> «Показати бібліотеку об'єктів».
У спадному меню бібліотеки об'єктів знайдіть та виберіть Вікна та бари. Тепер натисніть кнопку Панель навігації, перетягніть його у вікно перегляду і розташуйте його прямо під чорним Рядок стану (з піктограмою акумулятора). Тепер ми можемо налаштувати опис заголовка панелі. Двічі клацніть на тексті, який зараз читається “Назва“, і ви побачите назву мітки “Назва” на панелі утиліт, до якої можна змінити опис заголовка “Тест” звідти. Хіт “Enter” щоб стати свідком зміни.
Знову на панелі Windows & Bars, прокрутіть вниз, щоб знайти Панель вкладок, потім перетягніть його у вікно перегляду та розмістіть його в самому низу програми. Типово ці 2 елементи виглядають фантастично.
Тепер, можливо, ви хочете, щоб градієнт навігаційної панелі відповідав панелі вкладок внизу, і для цього ви можете натиснути панель навігації і подивитися праворуч Атрибути панелі у вікні утиліт. Називається перший варіант Стиль, який встановлено на значення За замовчуванням. Змініть стиль зі значення за умовчанням на Чорний непрозорий і ми матимемо відповідний набір кольорів!
Додамо ще одну кнопку вкладки в нижній панелі програми. Перемістіть курсор миші на панель Windows & Bars знову і прокрутіть вниз до Пункт панелі вкладок, безпосередньо під панеллю Tab. Перетягніть його у вікно програми і помістіть його в середині 2 існуючих кнопок панелі вкладок. Якщо ви двічі клацнете на цій новій кнопці, ви зможете побачити деякі додаткові опції на панелі утиліт, ви зміните елемент зображення і назва звідти. Наприклад, я змінив назву на “Закладка” для нещодавно доданого елемента панелі вкладок.
Так що це короткий підручник з проектування поглядів в Xcode. Це не дуже складний процес, але для звикання до інтерфейсу потрібно трохи більше часу. Грайте з кількома іншими елементами, якщо ви відчуваєте себе комфортно, а також можете відправитися до ресурсів Apple для розробки iOS для отримання додаткових навчальних ресурсів.!
Залишайтеся з нами за Частиною II
Це завершує нашу першу частину керівництва для iPhone додаток дизайн & розвитку. У наступній частині ми глибше заглибимося в Objective-C і Cocoa Touch, і в кінці кінців ви навчитеся створювати функціонуюче додаток для iPhone, стежте за оновленнями!
Галерея дизайну iOS
Для дизайнерів там я також сподіваюся принести вам натхнення, тому я включив список дивовижних переглядів iPhone додаток нижче. У списку є велика кількість надихаючих елементів програми, які ви, напевно, ніколи раніше не помічали. Не соромтеся ділитися своїми ідеями, поглядами програм або питаннями у розділі коментарів, дякую вам!
Гонка Splitter
Дистанційне задоволення
Tweetbot для iPhone
Рідер
Foursquare
MailChimp
Joystiq
Piictu
Темрява
