Программирование под iPhone, iPad Objective-C уроки на русском статьи новости

2013-09-23 08:22


Введение Оглавление Шаг 2. Вывод игрового поля

 

Этот проект для начинающих программировать под iOS. Основная цель, с нуля создать приложение и разместить в App Store. Минимальные требования: желание научиться создавать приложения для мобильных устройств, наличие компьютера и OS X 10.8.5. Поэтому в первых главах, если вы видите код, то относитесь к нему как при изучении иностранных языков относятся к фразам, взятым из разговорника, т.е. о чем он не понятно, но если переписать буква в букву, то получится то, что нужно.

Запускаем Xcode и создаем новый проект (Create a new Xcode project).

Выбираем Single View Application и нажимаем Next

Даем название проекту. Class Prefix: CL (CL соркащенно Color Lines, вы можете указать свой префикс, к примеру свои инициалы).Device: Universal (т.е и для iPhone и для iPad). Нажимаем на кнопку Next

Далее нам будет предложено указать папку, где будет создан проект. Выбираем нужную папку и нажимаем Create, к примеру я заранее создал папку Development в папке Документы. Откроется окно нашего проекта, в котором большую часть работы за нас уже сделали

Осталось только выбрать устройство

И нажать на треугольник, для того чтоб запустить в Симуляторе iOS наше приложение

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

Мы поставили своей целью реализовать компьютерную версию игры для iPod, iPad и iPhone. В случае компьютера это монитор, неподвижно стоящий на столе, клавиатура и мышка. В нашем случае это одно из устройств, которые могут менять ориентацию экрана, которые имеют разные разрешения, которые умеют реагировать на прикосновения, встряхивание и многое другое.

Возьмем из классической игры основные элементы интерфейса и дадим им имена:

  • gameFieldView - часть экрана, на которой будет выводиться игровое поле
  • liderView - постамент лидера
  • playerView - постамент игрока
  • liderScoreLabel - рекордное количество очков
  • playerScoreLabel - очки игрока
  • liderNameLabel - имя лидера
  • playerNameLabel - имя игрока
  • showNextSwitch - переключатель показа следующих шариков
  • restartButton - кнопка, позволяющая начать игру с начала

Остальные кнопки, пока выводить не будем. Показ следующих шариков будем осуществлять на игровом поле, к примеру шариками меньшего размера. Нарисуем для себя дизайн интерфейса (в Photoshop или на листке бумаги).

И попробуем его реализовать. В окне нашего проекта найдите Main_iPhone.storyboard, в нем мы будем создавать графический интерфейс для iPhone и iPod touch

Найдите Object library в правой части окна проекта

В нем находится список объектов, которые вы можете использовать в своем приложении. Для удобства есть поле поиска, где вы можете ввести часть имени объекта, при этом в списке останутся только те объекты, которые содержат введенные вами символы. Нам понадобятся:

  • Label для вывода теста на экран
  • View для вывода игрового поля и постаментов
  • Button для кнопки
  • Switch для переключателя
  • Image View для фоновой картинки

Найдем объект Label и перенесем его в правый верхний угол

Во вкладке Attributes inspector текст поля: 0, Font: Sytem Bold 20.0

Выбираем зеленый цвет, выравнивание текста по правому краю

Наш объект появился в списке с именем Label-0 (ноль потому что мы ему такое значение присвоили)

Так как объектов у нас будет много, для удобства присвоим им имена. В поле Label (Xcode Specific Label) введем Player Score

А основному View дадим имя iPhone View.

Во вкладке Size inspector можно задать координаты и размеры для объектов

Но, во первых, это очень утомительно высчитывать, где какой объект будет находиться, во вторых, если мы к примеру просчитали под экран 4", а наше приложение запустили на iPhone 4, то часть наших объектов, может оказаться за пределами экрана.

С помощью Constraints этот процесс существенно облегчается. Другими словами, мы задаем не координаты объекта, а его положение относительно других объектов, к примеру кнопка Restart должна находиться в левом нижнем углу на расстоянии 3 пикселей от границ экрана не зависимо от ориентации экрана и его размера. В нижней части окна вы увидите пиктограммы, среди которых есть Align и Pin. Они нам понадобятся для установки связей и выравнивания объектов.

Player Score привязываем к правому верхнему углу, отметьте верхний и правый пунктирные отрезки, поставьте число 3 в поле ввода, поставьте галочку напротив Width и Height, проверьте их значения, при необходимости измените, в поле Update Frames выберете Items of New Constraints и нажмите кнопку Add (в данном случае Add 4 Constraints):

Обращаю ваше внимание на Update Frames Items of New Constrains. Мы ведь расположили наш объект на глаз, а сейчас задаем точные значения, и при выборе Update Frames наш объект переместится на свое место.

Обратите внимание на треугольник в поле ввода, он позволяет нам выбрать относительно каких объектов мы делаем привязку

Во вкладке Size inspector для объекта Player Score появились Constraints. Нажимая на треугольники справа мы можем их редактировать, либо удалять.

Хорошо, мы расположили объект на эране. Но, как нам его использовать в своей программе? Как программа узнает в каком месте пользователь прикоснулся к экрану, где выводить данные и как повлиять на расстановку объектов при смене ориентации?

Часть работы за нас уже сделана, в Main_iPhone.storyboard и в Main_iPad.storyboard, View Controller уже связан с нашим классом CLViewController

Нажмите на кнопку Assistan editor. Наше рабочее окно разделится на части, в левой пусть у нас будет Main_iPhone.storyboard, а в правом CLViewController.h. Удерживая на клавиатуре клавишу Control перетаскиваем объект Player Score в окно CLViewController.h

В появившемся окне даем имя playerScoreLabel и нажимаем кнопку Connect, в CLViewController.h появится новая строчка @property (strong, nonatomic) IBOutlet UILabel *playerScoreLabel;

Если мы щелкним, к примеру, на слово UILabel, то в правой части экрана увидим краткое описание со ссылками на руководства, подробное описание класса и другую полезную информацию

Добавим переменную unsigned int playerScore, в ней будут храниться очки игрока. И дополним метод viewDidLoad

    playerScore=[_playerScoreLabel.text intValue];
    playerScore+=10;
    _playerScoreLabel.text=[NSString stringWithFormat:@"%d", playerScore];

В первой строке мы преобразовали строку в целочисленное значение и присвоили переменной playerScore, во второй строке мы увеличили значение playerScore на 10. В третей строке мы преобразовали целочисленное значение в строку и присвоили текстовому полю нашего объекта, тем самым вывели на экран новое значение. Эти строчки мы ввели для иллюстрации работы объекта Label.

Если сравнивать изучение языка программирования с изучением иностранных языков, то в случае изучения иностранных языков, когда мы самостоятельно не можем построить фразу, мы прибегаем к помощи "разговорников", где предложения на иностранном языке даны вместе с переводом, так и в нашем случае, мы можем завести себе нечто вроде "шпаргалки" и заполнять ее новыми "фразами".

В примере приведено _playerScoreLabel.text=[NSString stringWithFormat:@"%d", playerScore]; предпочтительнее записать как [_playerScoreLabel setText:[NSString stringWithFormat:@"%d", playerScore]];

Запустим наше приложение и убедимся, что на экране появилось число 10.

Завершаем приложение и возвращаемся в Main_iPhone.storyboard. Копируем объект Player Score, переходим в Main_iPad.storyboard и вставляем. Привязываем его к правому верхнему краю на 20 пикселей

Переходим в Assistant Editor и удерживая клавишу Control бросаем объект Player Score на строку @property (strong, nonatomic) IBOutlet UILabel *playerScoreLabel;

Тем самым мы связали наш новый объект с playerScoreLabel. Слева вы увидите кружок с точкой внутри, это означает что есть связь с объектами в storyboard, если точки не будет, то это означает что связи нет

Нажав на окружность мы можем посмотреть с кем связан playerScoreLabel

И наоборот, если мы щелкним правой кнопкой мышки на объекте в storyboard мы можем посмотреть с кем связан объект в коде программы

Получается нам нет необходимости писать отдельное приложение для iPad, мы можем использовать один контроллер для управления интерфесом iPhone и iPad. Кроме того, всю рутинную работу, связанную с установкой шрифта, цветом, выравниванием и других параметров объекта, мы можем делать в графическом интерфейсе, а в коде программы менять лишь необходимые значения, в данном случае лишь значение текстового поля для Label.

Выберем iPad

И запустим наше приложение. Убедимся что код, изначально написанный для iPhone, так же работает и для  iPad.

Завершаем приложение и переходим в Main_iPhone.storyboard. Продолжим расстановку наших объектов.

С нажатой клавишей Option двигаем мышкой, созданную нами Label, в левый верхний угол. Таким образом мы сдублировали объект

Значением текстового поля поставим 100, выравнивание выберем по левому краю

Даем название Lides Score

Привязываем его к левому верхнему углу на 3 пикселя. Не забываем про Update Frames.

Переходим в Assistant Editor и с нажатой клавишей Control бросаем на окно CLViewController.h. Даем название liderScoreLabel

Копируем объект Lider Score, переходим в Main_iPad.storyboard. Вставляем в Main_iPad.storyboard. Привязываем к левому верхнему углу на 20 пикселей. С нажатой клавишей Control бросаем на строку @property (strong, nonatomic) IBOutlet UILabel *liderScoreLabel;

Конечно же, чтоб не прыгать между storyboard можно вначале разложить объекты для iPhone, затем всех их скопировать и разложить для iPad, но в рамках этой статьи я буду последовательно добавлять объекты сразу для iPhone и iPad. Расставлять их, устанавливать связи и проверять их функциональность.

Переходим в Main_iPhone.storyboard. В правый нижний угол перенесем объект Switch

Привязываем его на 3 пикселя к правому нижнему углу, даем название Show Next Switch. Переходим в Assistant Editor и с нажатой клавишей Control бросаем на окно CLViewController.h

Выбираем Connection: Action, Type: UISwitch, название даем showNextSwitch.

Копируем объект. Переходим в Main_iPad.storyboard. Вставляем. Привязываем к правому нижнему углу на 20 пикселей. Переходим в Assistant Editor и с нажатой клавишей Control бросаем на строку - (IBAction)showNextSwitch:(UISwitch *)sender;

Переходим в CLViewController.m. Для нас уже создана реализация метода showNextSwitch

- (IBAction)showNextSwitch:(UISwitch *)sender {
}

Для проверки работоспособности нашего объекта добавим код

    if (sender.isOn) {
        _liderScoreLabel.text=@"ON";
    } else {
        _liderScoreLabel.text=@"OFF";
    }

Запустим наше приложение. В левом верхнем углу число "100". Как только мы нажмем на переключатель, надпись изменится на "OFF". Здорово! Мы научились пользоваться переключателем!

Завершаем приложение. Этот код мы ввели для проверки, в конце статьи мы его удалим. Хорошо было бы еще подписать переключатель, чтоб пользователю было понятно для чего он нужен, но мы пока этого делать не будем. Для нас сейчас важно освоить функциональность объектов интерфейса и отладить свое приложение. На этапе окончательного оформления мы, возможно, откажемся от некоторых объектов, либо перенесем их в настройки, либо заменим жестами. Переключатель в нашем приложении дает возможность выбора пользователю показывать следующие шарики на игровом поле или нет. И если этот выбор был сделан пользователем, то мы его должны запомнить и при запуске приложения установить значение переключателя в выбранное состояние. Другими словами, нам необходима возможность в программе менять значение переключателя. Как это сделать? Очень просто! Как и в случае с объектом Label, мы создадим Outlet. Переходим в Main_iPhone.storyboard. С нажатой клавишей Control перетягиваем объект Show Next Switch на окно CLViewController.h. Выбираем Connection: Outlet, Type: UISwitch и даем название showNextValue

Переходим в Main_iPad.storyboard и с нажатой клавишей Control перетягиваем объект Show Next Switch на строку @property (strong, nonatomic) IBOutlet UISwitch *showNextValue;

Переходим в CLViewController.m и в методе viewDidLoad допишем строчку:

[_showNextValue setOn:FALSE];

Запускаем приложение, состояние нашего переключателя - выключено. Завершаем приложение.

Переходим в Main_iPhone.storyboard. В левый нижний угол переносим объект Button.

Дважды щелкаем по слову Button, должна появиться возможность редактировать надпись на кнопке. Вводим слово Restart.

Привяжем его к левому нижнему углу на 3 пикселя, дадим название объекту Restart Button. Удерживая клавишу Control перетянем объект на окно CLViewController.h. Выберем Connection: Action, Type: UIButton, назовем restartButton

Скопируем объект Restart Button. Перейдем в Main_iPad.storyboard, вставим, привяжем к левому нижнему углу на 20 пиксеелй и перетянем на строку - (IBAction)restartButton:(UIButton *)sender; в CLViewController.h

Переходим в CLViewController.m находим

- (IBAction)restartButton:(UIButton *)sender {
}

Для проверки допишем

    playerScore+=10;
    _playerScoreLabel.text=[NSString stringWithFormat:@"%d", playerScore];

Запускаем приложение. При нажатии кнопки Restart значение очков игрока увеличивается на 10. Повернем наше устройство влево. Ориентация изменится, но наши объекты останутся в своих углах. Так как мы и ожидали. В случае с iPhone, если мы еще раз повернем влево, ориентация останется Landscape, а хотелось бы Portrait. Этом мы исправим чуть позже.

Скачать iLines.1.01.zip

Будем рады вашим комментариям. Так же можете связаться с нами по адресу ilines@ifamily.kz

Введение Оглавление Шаг 2. Вывод игрового поля