ПРОГРАММИРОВАНИЕ ПОД IPHONE, IPAD OBJECTIVE-C Часть 1

Знакомство с GUI

В этой статье будут рассказаны основы того как связывать интерфейс наших программ с кодом. До этого мы писали программы, которые не имели графического интерфейса, точнее они его имели, но возможности этого интерфейса мы не не использовали. Сейчас мы напишем простую программу, которая будет содержать две кнопки и текстовое поле. При нажатии на кнопки их значения будут вводиться в текстовое поле. Получится программа наподобие двухкнопочного калькулятора, который не может выполнять какие-либо арифметические действия. Конечно, в процессе обучения, вы сможете написать настоящий калькулятор. Эта программа всего лишь один из первых шагов.

Начнеи с создания нового проекта. Запустите Xcode и нажмите на File -> New -> New Project в появившемся окне выберитеApplication (под iOS), затем в правой части — View-based Application. Все пункты должны быть выбраны так же как на скриншоте ниже.

Если все правильно — нажимаем кнопку NextXcode попросит дать имя вашему новому проекту, я назвал его «MyView«. Затем сохрание проект в любом удобном для вас месте.

Основную часть кода для приложения уже подготовила Apple. При желании вы можете запустить симулятор, но кроме пустоты вы ничего не увидите. Для начала щелкните на файле «MyViewViewController.xib«. Перед вами откроется встроенный редактор интерфейса. В результате вы получите такую картину:

Компоненты редактора интерфейса находятся в правой панели, для их открытия нажмите сочетание клавиш alt+⌘Cmd+0 или на кнопку в правом верхнем углу программы как это показано на рисунке

Если библиотека утилит у вас не открылась — нажмите кнопку кнопку Show the Object library или сочетание клавиш ctrl+alt+⌘Cmd+3.Object library (Библиотека объектов) содержит все элементы управления, которые можно добавить к представлению. В этом уроке мы будем работать с «Label» и «Button«.

Теперь найдите в библиотеке объектов элемент «Label» на наше представление. Обратите внимание на голубые линии, которые помогают центрировать и выравнивать элементы управления. Вы наверное заметили, что наше окно в правой части рабочей области изменилось. Панель в правом верхнем угле приобрела некоторые значения. Я вывел эту панель в отдельную картинку, чтобы объяснить значения вкладов:

Первая вкладка переключает нас на инспектор файлов, в ней мы можем увидеть, где расположен файл, с которым мы работаем. Вторая вкладка — это быстрая подсказка, с помощью нее мы можем переключить на документацию. Затем следует так называемый инспектор идентификации, здесь вы можете присвоить объекту собственный класс и изменить другие параметры. Четвертая вкладка позволяет изменять атрибуты нашего объекта. Предпоследняя вкладка дает возможность задавать размеры объекта, его положение и поведение объекта в случает переворота устройства. И наконец в последней вкладке мы организовываем связь нашего объекта с кодом.

Двойной щелчок по метке переведет ее в режим редактирования и вы сможете изменить выводимый по умолчанию текст (я ввел «MyView«), а в окне атрибутов можно изменить размер текста, его положение и другие свойства.

Теперь пришло время добавить кнопки. Аналогичным способом в Библиотеке объектов найдите «Round Rect Button» и перетяните в наше окно «View«. Двойной щелчок по этому объекту так же переведет его в режим редактирования, в котором вы сможете дать ему название.

Вдаваясь в подробности, при действии по перетаскиванию кнопки из библиотеки на окно вашего приложения, происходит создание объекта новой кнопки и помещение его в ваше окно. То же самое происходит для текстового поля и любого другого объекта, который вы можете перетащить из окна палитры.

Выравнивайте объекты, которые вы перетащили на окно «Window» так, как вам нравится. Изменяйте их размеры, как душе угодно.

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

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

<code data-result="[object Object]">#import &lt;Foundation/Foundation.h&gt;

@interface MyViewViewController : UIViewController {
    UILabel *result;
}

@property (nonatomic, retain) IBOutlet UILabel *result;

- (IBAction)setTo5;
- (IBAction)reset;

@end</code>

Для привязки кода к редактору интерфейса используются спецификаторы IBOutlets и IBActions. В интерфейсе нашего класса мы создаем переменную UILabel *result;. Мы будем использовать ее для привязки кода с нашим интерфейсом. Теперь добавить свойство этой переменной (Свойства и методы доступа), нам это нужно потому, что к переменной будет обращаться другой класс, а как мы уже знаем, переменные нашего класса может изменять только наш класс. Но при добавлении свойства мы написали ключевое словоIBOutlets. Без этого слова наша переменная не будет доступна редактору интерфейса.

IBAction равнозначен void. Объекту, который посылает сообщение, не возвращается ничего: кнопки в нашей программе не получают ответа. Также вы можете видеть, что есть два действия (action). Это два метода нашего класса. Методы очень похожи на функции. Между фигурными скобками метода так же заключен код, который будет выполняться при вызове этого метода.

Теперь давайте свяжем наше код. Переключись снова на файл «MyViewViewController.xib«. Выберете объект «Label» и откройте правую панель с компонентами редактора интерфейса. Переключитесь на последнюю вкладку «Connections Inspector«, о которой я уже писал выше. Рядом с объектом “New Referencing Outlet” вы увидите круг. Щелкните на нем и перетащите на объект «File’s Owner«.

После того как вы отпустите кнопку мышки — появится сообщение с текстом result.

После щелчка на нем связь будет установлена. В панели «Connections Inspector» вы уидите:

Аналогичным образом выделите первую кнопку (с названием «Set to 5«), в инспекторе связи рядом с объектом “Touch Up Inside” расположен такой же круг. Нажмите его и точно так же перетяните на «File’s Owner«. Исли вы отпустите кнопку мышки — то увидите два наших метода, выберите метод «setTo5«. Таким же способом сделайте связь для второй кнопки.

Теперь все связи установлены и можно вернуться к нашему коду. Откройте реализацию класса «MyViewViewController» (MyViewViewController.m) и изменим его следующим образом:

<code data-result="[object Object]">#import "MyViewViewController.h"

@implementation MyViewViewController

@synthesize result;

- (void)dealloc
{
    [result release];
    [super dealloc];
}

- (void)viewDidUnload
{
    [super viewDidUnload];
    self.result = nil;
}

@end</code>

В первую очередь нам нужно синтезировать методы для переменной result. И не забудьте об очистке памяти выделенной для этой переменной (подробно о том как это делал я описал здесь). Важным моментом при очистке памяти для переменный класса, которые связаны с интерфейсом (при синтезировании использовано слово IBOutlet) является метод viewDidUnload. Изначально он выглядит вот так:

<code data-result="[object Object]">- (void)viewDidUnload
{
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
}</code>

То есть, Xcode как сам подсказывает, что в этом методе нужно очищать все айбиаутлеты.

Теперь добавьте два метода, которые мы объявляли в интерфейсе класса:

<code data-result="[object Object]">- (IBAction)setTo5 {
    result.text = @"5";
}

- (IBAction)reset {
    result.text = @"Result was reset";
}</code>

В обеих методах мы устанавливаем текстовое значение переменной result. Наша программа готова. Можете смело запускать и довольствоваться результатом ее работы.

 

 

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

Comments are closed.