Теперь, когда Вы ориентируетесь в среде Xcode, настало время перейти к «творчеству».
«Привет, Мир!» — это традиция, которая соблюдается при начале изучения нового языка программирования или технологии. Мы ведь любим соблюдать традиции, правда? Тогда приступим.
Перед тем как окунуться в мир кодинга, на момент вернемся к теории. Вся работа iOS приложений, да как и многих других программных продуктов, строится на основе паттерна (шаблона) проектирования — MVC. Вот как его описывает Wikipedia:
Model-view-controller (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.
Отключение функции Size Classes
Далее, перетащим элемент UILabel из секции Object library на наш View Controller. Дважды кликнем на лейбл и он перейдет в режим редактирования. Напишем туда любой текст, который прийдет к Вам в голову. После этого, выровняем лейбл по центру нашей вью.
Добавление объекта UILabel на UIViewController
Можете запустить приложение, нажав cmd+R или нажимая на кнопку Run в тулбаре. Теперь симулятор показывает наш лейбл. Отлично! Таким же образом добавим элемент UIButton (кнопка) под наш лейбл. Изменим его заголовок (title), к примеру, на «Say hello», а также изменим её размер, потянув за белые квадраты по контуру кнопки. Так же можно задать точные размеры в разделе Size Inspector секции Utilities.
Кстати, помните я говорил о том, что секция Utilities имеет разное количество разделов? Так вот, во вкладке Attributes Inspector можно изменять различные свойства объектов интерфейса. Выделите кнопку и поменяйте её цвета текста и фона, а также измените шрифт.
Запустим приложение и теперь у мы видим лейбл с кнопкой. Можете понажимать на неё и убедиться в том, что она реагирует на нажатия.
Хорошо, но ничего ведь не происходит при нажатии. Давайте её чему-то научим! Здесь к нам на помощь приходит контроллер. Откройте файл ViewController.swift и перед Вами предстанет такой код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import UIKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } } |
Это стандартный шаблон, который нам предоставляет Xcode при создании нового класса UIViewController. Наша задача добавить обработку нажатия кнопки в этом коде.
Добавьте следующий код после окончания функции viewDidLoad():
|
1 2 3 4 |
@IBAction func onButtonTouch(sender: AnyObject) { } |
Здесь мы написали метод onButtonTouch, в котором будет происходить действия для нажатия кнопки. Выберите в навигаторе файл Main.storyboards нажав alt+click, тем самым активировав режим ассистента. Теперь, когда содержимое класса ViewController.swift и сториборд открыты одновременно, мы можем связать кнопку с нашим методом. Есть три основных способа как это можно сделать. Ниже мы рассмотрим их все:
1. Выделите кнопку в сториборде правой кнопкой мыши и протяните «связь» в сторону нашего метода в классе. Если же Вы используете тачпад, это можно сделать зажав кнопку control+click и точно так же перетянув в сторону класса.
Cпособ #1
2. Второй способ как это сделать — зажмите серый круг слева от нашего метода левой кнопкой мыши (или зажав тачпад) и протяните «связь» в сторону кнопки.
Способ #2
3. Откройте вкладку Connections inspector в секции Utilities и Вы увидите много эвентов в списке Sent Events. Это список всех базовых событий, на которые может реагировать кнопку. Их названия говорят сами за себя, но более подробно можно их изучить самостоятельно. На данный момент нас интересует эвент Touch Up Inside. Он используется по-умолчанию и отвечает за событие когда юзер тапает на кнопку. Протяните «связь» левой кнопкой мыши в сторону метода.
Способ #3
Обратите внимание — возле Touch Up Inside появилась информация к какому классу и методу привязано данное событие.
Писать такие методы для каждой кнопки довольно утомительно, но и здесь Xcode прийдет к нам на помощь. Допустим, Вы только что добавили кнопку на вью. Для того чтобы не писать лишний раз код, можно повторить описанные выше способы создания связей, вот только направить эту связь не в сторону готового метода, а на пустую строку в классе:
Автоматическое создание метода обработки событий в классе
Давайте проверим всё ли мы сделали правильно и добавим следующий код внутрь нашего метода onButtonTouch:
|
1 |
print("Hello World!"); |
Данный код будет печатать строку «Hello World!» в лог нашего приложения, который Вы можете просмотреть в секции Debug area. Запустим наше приложение и посмотрим работает ли кнопка, нажав на неё.
Теперь, когда мы убедились в том, что правильно связали кнопки, немного усложним работу нашего приложения. Замените содержимое нашего метода на следующий код:
|
1 2 3 4 5 6 7 8 9 |
// 1 let alert = UIAlertController(title: "Hello", message: "My name is World!", preferredStyle: .alert) // 2 let actionCancel = UIAlertAction(title: "Cancel", style: .cancel, handler: nil) alert.addAction(actionCancel); // 3 self.present(alert, animated: true, completion: nil) |
В первом отрывке кода создается объект alert класса UIAlertController с заголовком «Hello» и сообщением «My name is World!». Во втором — мы добавляем экшн (кнопку) с заголовком «Cancel», стилем .Cancel. И наконец, в отрывке #3 мы говорим нашему контроллеру показать объект alert c анимацией. Таким быстрым и легким способом мы научили наше приложение показывать красивый алерт, как это делают многие iOS приложения.
Как Вы могли заметить, код легко читаем (в прямом смысле этого слова). Это является одним из преимуществ изучения языков Swift или Obj-C, так как они учат Вас писать хорошо читаемый и понятный код.
Запустим приложение и посмотрим что происходит.
Поздравляем, Вы только что написали своё первое полноценное приложение для iOS!
На этом урок окончен. Присылайте скриншоты своих первых уроков в комментариях. В следующем уроке мы чуть более подробно рассмотрим переменные и методы в языке Swift.