Розробка на iPhone (4): наш перший додаток (II)

У нашому попередньому дописі ми вказали, яким буде наш додаток HelloWorld, і кроки, які ми збираємося зробити для створення нашої програми, крім надання посилань на необхідну документацію. У цій статті ми починаємо з відкриття XCode і починаємо розробку.

Крок 1. Створіть проект.

З цієї причини ми відкриваємо XCode і закриваємо (якщо з’являється) вікно привітання програми. Перед створенням нашого проекту ми можемо ввести налаштування XCode. Загалом -> Макет виберіть «Все в одному», принаймні, якщо ви хочете мати можливість порівняти те, що ви бачите на своїх екранах, із зображеннями, які ви побачите.

На даний момент ми створюємо проект: Файл -> Новий проект, і вибираємо на основі перегляду:

Як ми вже зазначали в попередній статті, для проекту XCode, що базується на поданні, він створює подання, пов’язане з класом Controller (пам’ятайте, що мова йшла про шаблон MVC). Викличте проект HelloWorld і збережіть його у потрібній папці. Ви побачите щось подібне до цього:

Ми бачимо, що у нас є кілька файлів:

• HelloWorldViewController.h та HelloWorldViewController.m. Обидва вони відповідають контролеру нашого екрану. Тут буде логіка, пов’язана з нашим поглядом; У нашому випадку тут повинен бути код, який змінює значення мітки відповідно до того, що введено в текстове поле. Ми бачимо, що є файл .h та інший .m. Перший - це заголовок, на Java це буде Інтерфейс. Ось декларації змінних, методів тощо. Файл .m - це той, який уже містить реалізацію.
• HelloWorldViewController.xib. ib = Конструктор інтерфейсів. Цей файл - це наш погляд, екран. Його викликає MainWindow.xib, головний фасад видів, який ми не торкаємось.
• HelloWorldAppDelegate (.h та .m). Ми не збираємося їх змінювати, він має вказівник на наш ViewController.
• Info.plist. Це XML із інформацією про нашу програму. Тут ми можемо, наприклад, вказати, яка піктограма нашого додатку.

Крок 2. Розробіть інтерфейс.

Ми почнемо "малювати" екран нашого додатку. Для цього в XCode ми двічі клацнемо на HelloWorldViewController.xib, і ми побачимо, що відкриється програма Interface Builder. Перш за все, як практичну пораду я рекомендую завжди перевіряти, чи відкриті палітри Inspector та Library. Ви можете відкрити їх у меню Інструменти в Interface Builder. Палітра "Бібліотека" дозволить вам додати різні елементи керування до вашого подання, а палітра "Інспектор" дозволяє побачити властивості кожного об'єкта та змінити їх.

Ми не будемо намагатися зробити гарне додаток, а змусити його працювати. Почніть з пошуку екрана з написом Перегляд. Якщо він не відкритий, він відкривається подвійним клацанням на Перегляд на наступному екрані:

На поданні перетягніть з палітри Бібліотеки TextField зверху, Мітку знизу і, нарешті, кнопку Круглого прямокутника. Ми розглядаємо це, якщо у нас є елемент керування, подібний TextField, ми можемо перемістити розмір цього елемента керування, перемістити його на екран ... і на палітрі Inspector ми можемо мати його властивості. Вибравши кнопку, ми можемо поставити Заголовок зі значенням «Змінити!». Врешті-решт ми отримаємо щось подібне:

Цим ми визначили інтерфейс нашого додатку. Він відповідає тому, що ми запланували: текстовому полі (далі - TextField), куди ми будемо вводити інформацію. Мітка (фіксований текст) і кнопка. Коли ми натискаємо кнопку, Мітка покаже те, що ми написали в TextField. Для цього нам доведеться створити змінні, які посилаються на Label і TextField у нашому ViewController, і нам доведеться вказати Interface Builder на зв'язок між Label і TextField з цими змінними. Нам також доведеться створити метод у ViewController, який відповідає за оновлення значення Мітки з тим, що ми ввели в TextField, і пов’язати кнопку з цим методом у Interface Builder. Все це будуть кроки 3, 4 та 5 нашого початкового сценарію, і це буде пояснено в наступному дописі.

Звичайно, перед закінченням я рекомендую вам подивитися, що з’являється на палітрі Бібліотека, коли ви вибрали, наприклад, TextField, щоб додати його до подання:

Ви бачите, що в ній пояснюється, що робить елемент керування TextField, але внизу також написано "UITextField". Це важливо, оскільки це повідомляє нам, який клас у структурі какао UIKit відповідає цьому контролю. Це дає нам підказку: для того, щоб створити змінну, яка обробляє цей елемент керування у ViewController, вона повинна бути типу UITextField.