Star Trek International Athletics - провал по всем статьям
Май 17

В этом уроке мы научимся создавать в редакторе Interface Builder интерфейс и привязывать его к собственному коду. Займемся мы этим на примере объектов “UITextField“, “UILabel” и “Button“. Сразу предупреждаю, что урок длинный, поскольку я буду подробно расписывать каждый шаг. При желании для начала просмотрите его, чтобы получить общее представление. Вот как будет работать приложение:

  1. Пользователь жмет на текстовое поле, вызывая клавиатуру iPhone.
  2. Пользователь вводит имя на клавиатуре.
  3. Пользователь нажимает кнопку.
  4. Появляется приветственная надпись с его именем (напр., “Hello Brandon!”)
  5. Если текст не набран, появляется предложение его ввести (напр., “Please Enter Your Name”)

В этом уроке мы научимся:

  • Создавать новое приложение на основе представления (view-based).
  • Создавать простой пользовательский интерфейс.
  • Писать код для привязки к интерфейсу.
  • Устанавливать связи между интерфейсом и кодом.
  • Обновлять интерфейс в зависимости от действий пользователя.

Нам понадобится только одно представление, поэтому достаточно будет созданного Apple шаблона “View-Based Application“. Выполните “File -> New Project“. Выбрав опцию “View-Based Application“, присвойте ей имя “ViewBased” (или любое другое).

screenshot_011

Основную часть кода для приложения уже подготовила Apple. При желании кнопкой “Build and Go” можно запустить симулятор, но кроме пустоты вы ничего не увидите.
Для начала дважды щелкните на файле “ViewBasedViewController.xib“. Открывшийся в редакторе Interface Builder nib-файл содержит информацию об отображении и элементах управления для интерфейса.
Результат будет выглядеть примерно так, как показано ниже.

screenshot_031

Немного о компонентах редактора Interface Builder

Library (Библиотека). Окно справа содержит все элементы управления, которые можно добавить к представлению. В этом уроке мы будем работать с тремя — “TextField“, “Label” и “Button“.

В окне слева — объекты, к которым мы будем привязывать интерфейс. View — представление конкретного nib-файла (т.е. интерфейс). Объект “File’s Owner” связывает интерфейс с кодом.

View (Представление). Собственно пользовательский интерфейс приложения iPhone. Сюда предстоит перетаскивать элементы управления из крайнего правого окна.

Attributes (Атрибуты). Здесь настраиваются параметры стиля для элементов управления.

Добавляем элемент “Text Field”.

Первым делом перетаскиваем объект “Text Field” из поля библиотеки в окно представления. Обратите внимание на голубые линии, которые помогают центрировать и выравнивать элементы управления.

Добавив в окно “View” объект “Text Field“, выберите для него оптимальное, на ваш взгляд, положение. Растяните текстовое поле практически во всю ширину окна. (Голубые линии справа и слева подскажут, когда нужно остановиться.)

Теперь настроим для этого объекта атрибуты. Если окно инспектора свойств “Attributes Inspector” не отображается, щелкните на объекте “Text Field“, а после выполните “Tools -> Attributes Inspector“.

  • В поле “Placeholder” наберите “Name“. Этот текст будет по умолчанию выводиться в текстовом поле, пока пользователь не наберет свой.
  • Для опции “Capitalize” установите значение “Words“. Тем самым мы сообщаем XCode о желании делать каждую букву заглавной.
  • Для опции “Return Key” выберите “Done“. Этот текст будет отображаться на клавише ввода вместо стандартного значения “Return“.
  • Проверьте флажок “Clear When Edit Begins” — он должен быть установлен.

screenshot_21

Добавляем элемент “Label”.

Перетащите объект “Label” из библиотеки в окно “View“. Растяните и поместите, куда сочтете нужным. Чтобы изменить выводимый по умолчанию текст метки, вызовите окно инспектора атрибутов (если его нет на экране, щелкните на объекте “Label“, после выполнив “Tools -> Attributes Inspector“). В поле “Text” наберите “Enter your name above” (введите свое имя выше). Если объект “Label” помещен над текстовым полем, надпись само собой, поменяйте на “Enter your name below“.

screenshot_23

Добавляем кнопку.

Настало время перетащить из библиотеки в окно представления объект “Button“. Растяните кнопку и выровняйте по своему усмотрению. Теперь можно добавить к ней текст. Щелкнув на кнопке, выполните “Tools -> Attributes Inspector“. В поле “Title” окна инспектора атрибутов введите “Display“.

screenshot_11

Интерфейс готов и должен выглядеть примерно так:

screenshot_15

Вернемся к коду… Закройте редактор IB и перейдите в Xcode.

Код с интерфейсом связывают контроллеры представления — View Controllers. Откроем файл “ViewBasedViewController.h“, где задекларируем все переменные интерфейса. Добавьте к “ViewBasedViewController.h” следующий код:

viewbasedcontrollerh

Для привязки к коду редактор IB использует спецификаторы IBOutlets и IBActions . Ниже коротко объясняется каждая строка кода:

  • IBOutlet UITextField *textName — создает переменную outlet для связи с созданным в редакторе IB текстовым полем. С ее помощью мы получаем информацию из текстового поля.
  • IBOutlet UILabel *lblHello — переменная, соединяющая метку интерфейса с программным кодом. Задает значение метки.

Переменные задекларированы, теперь нужно сделать их свойствами (properties). Это позволит указать ассоциированные с этими переменными атрибуты. “Retain” сообщает компилятору, что мы берем на себя управление памятью конкретного объекта (не забудьте после освободить его). В противном случае сразу после обработки он будет “очищен”.

Теперь остановимся на таком моменте:

- (IBAction) updateText:(id) sender;

Эта функция вызывается при нажатии пользователем созданной в IB кнопки. Здесь мы просто декларируем ее в заголовочном файле. Позже по ходу урока мы еще вернемся к ее внедрению. Теперь нужно связать интерфейс с кодом. Снова дважды щелкните на “ViewBasedViewController.xib“, запустив редактор Interface Builder.

  1. Установка связи с представлением (View).
  • Щелкните в любой точке представления (за исключением объектов “Text Field“, “Label” и “Button“). После этого выполните “Tools -> Connections Inspector“. Рядом с объектом “New Referencing Outlet” появится круг. Щелкните на нем, перетащите голубую линию к объекту “File’s Owner” и отпустите. Должно появиться слово “view” – щелкните на нем. Теперь представление связано с прокси-объектом. Итоговая картина должна выглядеть так:

screenshot_16

2.     Установка связи с объектом “Text Field“.

  • В окне “View” щелчком выделите объект “Text Field“, после чего командой “Tools -> Connections Inspector” вызовите окно инспектора связей. Рядом с объектом “New Referencing Outlet” появится круг. Щелкните на нем и перетащите на объект “File’s Owner“. Появится сообщение с текстом “txtName“. После щелчка на нем связь будет установлена. На экране вы увидите:

screenshot_14

3.    Установка связи с объектом “Label

  • В окне “View” щелчком выделите объект “Label“, после чего командой “Tools -> Connections Inspector” вызовите окно инспектора связей. Рядом с объектом “New Referencing Outlet” появится круг. Щелкните на нем и перетащите на объект “File’s Owner“. Появится сообщение с текстом “lblHello“. После щелчка на нем связь будет установлена. На экране вы увидите:

screenshot_22

4.   Установка связи с объектом “Button“.

  • В окне “View” щелчком выделите объект “Button“, после чего командой “Tools -> Connections Inspector” вызовите окно инспектора связей. Рядом с объектом “Touch Up Inside” появится круг. Это триггер, вызываемый при нажатии пользователем кнопки. Щелкните на нем и перетащите на объект “File’s Owner“. Появится сообщение с текстом “updateText“. После щелчка на нем связь будет установлена. На экране вы увидите:

screenshot_081

Теперь все связи должны быть настроены. Можно закрывать редактор IB — работа с ним закончена.

Откройте файл “ViewBasedViewController.m“. В него нам предстоит внедрить функцию “updateText“. Добавьте следующий код…

viewbasedcontroller22

Код достаточно прост и прозрачен. Объясню его построчно:

@synthesize txtName,lblHello;

При создании (частных) переменных, как правило, нужно указывать методы “getter” и “setter“. Эти функции, соответственно, получают значение переменной и задают его. Директива “synthesize” создает данные методы “закулисно”, что весьма удобно.

Теперь внедряем метод “updateText“. Для начала я создал временную строку для добавления в текст метки.

Следующая строка проверяет, ввел ли пользователь в поле “Text Field” некий текст. “txtName.text” возвращает “NSString“. Мы просто запрашиваем для строки метод длины. Если длина равна 0, значит, текста пользователь не вводил. В этом случае назначается временная строка “Please enter your name“, которая предлагает пользователю набрать свое имя.

Если текст набран, назначается новая строка. Метод “initWithFormat” — аналог “printf” в C. Я выбрал набор “Hello %@!“, где “%@” — заменяемые в строке символы. Для получения значения “Text Field” снова воспользуемся свойством “txtName.text“.

Теперь зададим значение “Label“, вызвав “lblHello.text“. Метод запрашивает свойства текста метки и соотносит текст с временной строкой переменных.

Последняя строка “[text release];” высвобождает из памяти временный текст. Для эффективной работы приложения iPhone это обязательное условие. Скажу откровенно, что сбои многих приложений вызваны именно тем, что разработчики игнорируют данный шаг.

Получилось! Кнопкой “Build and Go” запустите приложение в симуляторе iPhone Simulator. При щелчке на текстовом поле должна появляться виртуальная клавиатура (можно пользоваться и обычной). Наберите свое имя и щелкните на кнопке “Display“. Вот так примерно должен выглядеть итоговый результат:

screenshot_18

Пользователь щелкнул на кнопке “Display“, не набрав имени.

screenshot_19

Пользователь набрал имя и щелкнул на кнопке “Display“.

screenshot_20

Вот, собственно, и все. Надеюсь, вы стали на шаг ближе к заветной цели. Жду комментариев и мнений. Спасибо.

Исходный код скачать можно [здесь]

Текст оригинальной статьи на английском языке [здесь]

Уважаемые читатели, данный материал был переведен и подготовлен к публикации проектом LookApp.ru, при публикации на другом сайте ссылка на LookApp.ru обязательна.

1 звезда2 звезд3 звезд4 звезд5 звезд (5 голосов, средний: 5.00 из 5)
Загрузка ... Загрузка ...


9 Responses to “Уроки iPhone SDK: Установка связи между кодом и интерфейсом в IB”

  1. 1. Almonah Says:

    Низкий поклон и благодарность за сию статью!

  2. 2. Artem Says:

    Привет. Стараемся на благо родины так сказать) Даешь первые места в App Store для России!!! :)

  3. 3. Switch Says:

    Большое спасибо!

  4. 4. Shrek Says:

    У меня при выполнении не убирается клавиатура… Каким образом ее обратно прятать?

  5. 5. Artem Says:

    Все должно получиться. Если нет, то подождите и вам кто-нибудь поможет, я не программист поэтому…

  6. 6. Koulikov Says:

    Спасибо огромное!Только эта статья из всех что я видел дала четкое понятие что к чему.

  7. 7. Artem Says:

    Пожалуйста. Рад что помогло. Приходите, читайте, учитесь.

  8. 8. yurc Says:

    у вас не правильная ссылка на источник.. не та статья.

  9. 9. yurc Says:

    а я ошибся ))

Оставьте комментарий