«Привет, Мир!»

Теперь, когда Вы ориентируетесь в среде Xcode, настало время перейти к «творчеству».

«Привет, Мир!» — это традиция, которая соблюдается при начале изучения нового языка программирования или технологии. Мы ведь любим соблюдать традиции, правда? Тогда приступим.

Перед тем как окунуться в мир кодинга, на момент вернемся к теории. Вся работа iOS приложений, да как и многих других программных продуктов, строится на основе паттерна (шаблона) проектирования — MVC. Вот как его описывает Wikipedia:

Model-view-controller (MVC, «модель-представление-контроллер», «модель-вид-контроллер») — схема использования нескольких шаблонов проектирования, с помощью которых модель приложения, пользовательский интерфейс и взаимодействие с пользователем разделены на три отдельных компонента таким образом, чтобы модификация одного из компонентов оказывала минимальное воздействие на остальные.

mvc

Рассмотрим MVC на уже существующем примере. Откройте проект HelloWorld, который мы создали знакомясь с Xcode. Обратите внимание на файлы в навигаторе:

  • Main.storyboard — файл, который хранит в себе все наши объекты представления (View — MVC). Проще говоря — это экраны с нашим интерфейсом. Здесь Вы будете добавлять все GUI элементы — кнопки, текстовые поля и т.д. Можете открыть этот файл, кликнув на него, и Вы увидите белое квадратное окно. Это и есть UIViewController, который отображается при запуске нашего приложения.
  • ViewController.swift — это класс-контроллер (Controller — MVC) нашего View. Если в сториборде хранятся визуальные элементы, к примеру, с кнопками, то в контроллере происходит обработка нажатий на эти кнопки.

Мы будем стараться следовать этому паттерну в каждом нашем уроке и прививать его к Вашим навыкам. По-началу будет казаться, что где-то мы усложняем разработку, но поверьте — это не раз облегчит Вам жизнь в будущем.


Начало разработки

Приступим! Для начала откроем Main.storyboard и отключим функцию Size Classes, т.к. сейчас она будет лишней. В разделе File Inspector секции Utilities уберите галочку с поля Use Size Classes и в появившемся окне нажмите Disable Size Classes.

DisableSizeClasses

Отключение функции Size Classes

Далее, перетащим элемент UILabel из секции Object library на наш View Controller. Дважды кликнем на лейбл и он перейдет в режим редактирования. Напишем туда любой текст, который прийдет к Вам в голову. После этого, выровняем лейбл по центру нашей вью.

hw_adding_label

Добавление объекта UILabel на UIViewController

Можете запустить приложение, нажав cmd+R или нажимая на кнопку Run в тулбаре. Теперь симулятор показывает наш лейбл. Отлично! Таким же образом добавим элемент UIButton (кнопка) под наш лейбл. Изменим его заголовок (title), к примеру, на «Say hello», а также изменим её размер, потянув за белые квадраты по контуру кнопки. Так же можно задать точные размеры в разделе Size Inspector секции Utilities.

Кстати, помните я говорил о том, что секция Utilities имеет разное количество разделов? Так вот, во вкладке Attributes Inspector можно изменять различные свойства объектов интерфейса. Выделите кнопку и поменяйте её цвета текста и фона, а также измените шрифт.

Запустим приложение и теперь у мы видим лейбл с кнопкой. Можете понажимать на неё и убедиться в том, что она реагирует на нажатия.

Хорошо, но ничего ведь не происходит при нажатии. Давайте её чему-то научим! Здесь к нам на помощь приходит контроллер. Откройте файл ViewController.swift и перед Вами предстанет такой код:

Это стандартный шаблон, который нам предоставляет Xcode при создании нового класса UIViewController.  Наша задача добавить обработку нажатия кнопки в этом коде.

Добавьте следующий код после окончания функции viewDidLoad():

Здесь мы написали метод onButtonTouch, в котором будет происходить действия для нажатия кнопки. Выберите в навигаторе файл Main.storyboards нажав alt+click, тем самым активировав режим ассистента. Теперь, когда содержимое класса ViewController.swift и сториборд открыты одновременно, мы можем связать кнопку с нашим методом. Есть три основных способа как это можно сделать. Ниже мы рассмотрим их все:

1. Выделите кнопку в сториборде правой кнопкой мыши и протяните «связь» в сторону нашего метода в классе. Если же Вы используете тачпад, это можно сделать зажав кнопку control+click и точно так же перетянув в сторону класса.

hw_link_button_1

Cпособ #1

2. Второй способ как это сделать — зажмите серый круг слева от нашего метода левой кнопкой мыши (или зажав тачпад) и протяните «связь» в сторону кнопки.

hw_link_button_2

Способ #2

3. Откройте вкладку Connections inspector в секции Utilities и Вы увидите много эвентов в списке Sent Events. Это список всех базовых событий, на которые может реагировать кнопку. Их названия говорят сами за себя, но более подробно можно их изучить самостоятельно. На данный момент нас интересует эвент Touch Up Inside. Он используется по-умолчанию и отвечает за событие когда юзер тапает на кнопку. Протяните «связь» левой кнопкой мыши в сторону метода.

hw_link_button_3

Способ #3

Обратите внимание — возле Touch Up Inside появилась информация к какому классу и методу привязано данное событие.

Писать такие методы для каждой кнопки довольно утомительно, но и здесь Xcode прийдет к нам на помощь. Допустим, Вы только что добавили кнопку на вью. Для того чтобы не писать лишний раз код, можно повторить описанные выше способы создания связей, вот только направить эту связь не в сторону  готового метода, а на пустую строку в классе:

hw_link_button_4

Автоматическое создание метода обработки событий в классе

Давайте проверим всё ли мы сделали правильно и добавим следующий код внутрь нашего метода onButtonTouch:

Данный код будет печатать строку «Hello World!» в лог нашего приложения, который Вы можете просмотреть в секции Debug area. Запустим наше приложение и посмотрим работает ли кнопка, нажав на неё.

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

В первом отрывке кода создается объект alert класса UIAlertController с заголовком «Hello» и сообщением «My name is World!». Во втором — мы добавляем экшн (кнопку) с заголовком «Cancel», стилем .Cancel. И наконец, в отрывке #3 мы говорим нашему контроллеру показать объект alert c анимацией. Таким быстрым и легким способом мы научили наше приложение показывать красивый алерт, как это делают многие iOS приложения.

Как Вы могли заметить, код легко читаем (в прямом смысле этого слова). Это является одним из преимуществ изучения языков Swift или Obj-C, так как они учат Вас писать хорошо читаемый и понятный код.

Запустим приложение и посмотрим что происходит.

Поздравляем, Вы только что написали своё первое полноценное приложение для iOS!


На этом урок окончен. Присылайте скриншоты своих первых уроков в комментариях. В следующем уроке мы чуть более подробно рассмотрим переменные и методы в языке Swift.

  • Денис Рубцов

    Чтобы работало на 10.12 Sierra / Xcode 8.3.2 последний пример кода нужно изменить:

    строка 2: .Alert заменить на .alert
    строка 9: presentViewController заменить на present

  • Роман Нирка

    Здравствуйте.

    Подскажите пожалуйста, потому что непонятно…

    1) Перенес кнопку на Маin.Storyboard

    2) Связал 1-ну кнопку с кодом (по способу № 3)

    3) Проверил print(«Hello World!»); — Работает.

    4) Удалил print(«Hello World!»);

    5) Замените содержимое нашего метода на следующий код: тот что внизу с 3-х пунктов.

    Вопрос:

    Нужно создавать 2-ве кнопки ?

    В первом отрывке кода создается объект alert класса <- Он сам автоматически, создается в Маin.Storyboard ?

    Во втором — мы добавляем экшн (кнопку) <- Она сама автоматически, создается в Маin.Storyboard ?

    —————
    Ошибка:

    self <- Expected declaration

    • Роман Нирка
      • VladislavKovalyov

        Добрый день, Роман!

        1. Объект UIAlertController создается не в сториборде. Этот объект живет в классе ViewController, а точнее в экшн-методе onButtonTouch. Он отображается только после того, как Вы его презентуете, а именно с помощью метода «self.presentController…»
        2. Это экшн не контроллера представления, а класса UIAlertController. Подробнее Вы можете ознакомиться здесь: https://developer.apple.com/documentation/uikit/uialertcontroller

        Ошибка: Этот код должен быть написан внутри экшн-метода onButtonTouch. Судя по скриншоту, Вы пытаетесь его написать внутри тела класса ViewController.

  • Роман Нирка
    • VladislavKovalyov

      Добрый день, Роман.

      Настоятельно рекомендую обратить внимание на то, о чем это предупреждение говорит. А именно: «Initialization of immutable value ‘actionCancel’ was never used…». Описание говорит само за себя: Вы объявили объект под названием «actionCancel», но при этом он не был использован. Это связано с тем, что Вы пропустили строку #6. Здесь этот экшн передается алерту.

  • Роман Нирка
  • Роман Нирка

    Здравствуйте, Владислав.

    Спасибо, за информацию, буду изучать.

    Можете подсказать, почему выскакивает предупреждений.

    Что в жизни, пошло не так?

  • Роман Нирка
    • Роман Нирка

      Спасибо. Работает. Как всегда необходимо быть внимательным.

  • Роман Нирка

    В разделе File Inspector секции Utilities нет поля Use Size Classes.

    Вместо него есть — Use Trait Variations.

    Можете подсказать, между ними есть какие-то различия
    https://uploads.disquscdn.com/images/4c845007a3e267ea4943e45f114251e865ac17acf50c3701c89891fc6aa5259c.jpg ?