Хотите освоить iOS-разработку? Мы подготовили для вас руководство, которое является отличной отправной точкой на пути становления ios-разработчиком. Наш туториал подходит, даже если у вас нет никаких знаний в области программинга.
Для работы нужен MacBook (подходят большинство моделей) и iPhone (необязательно).
Что разрабатываем?
Вместе мы разработаем игру под iOS Хай-лоу (разновидность покера). Концепции, которые мы описываем здесь, являются фундаментальными. Они актуальны при разработке любых приложений для iOS.
Обучение на практике – наиболее эффективный, необходимый способ для освоения разработки приложения под ios. Все действия, описанные в этой статье, повторяйте на вашем компьютере. Чтобы росло ваше понимание и развивалась мышечная память, набирайте код вручную.
Что вас ждет в этом руководстве:
- Установка и настройка среды разработки Xcode.
- Создание пользовательского интерфейса в iOS-разработке.
- Основы программирования на языке Swift.
- Добавление дополнительных возможностей в ios-игру.
1. Устанавливаем Xcode
Программа бесплатная. Загрузите Xcode из AppStore на вашем макбуке. Чтобы открыть App Store, нажмите на значок Apple в левом верхнем углу экрана, затем кликайте App Store.
В строку поиска в правом верхнем углу введите Xcode. Установите приложение на ноутбук.
2. Создаем новый проект в Xcode
После инсталляции запустите Xcode. Сразу отображается такая заставка:
Кликайте «Create a new Xcode project» и выберите шаблон, предложенный программой. Мы создаем игру на айфон. Поэтому в верхнем меню выбираем вкладку iOS и жмем «Single View App».
В следующем окне указываем название игры и жмем «Далее» (Next)
На этом этапе ваш Xcode выглядит примерно так:
3. Создаем пользовательский интерфейс
Откройте основную раскадровку в конструкторе интерфейсов Xcode. Для этого щелкните на главной раскадровке в панели слева. Если она не отображается, нажмите сочетание клавиш CMD+1.
Конструктор интерфейсов
Сейчас на этом экране происходит очень многое. При открытии раскадровки вы видите множество панелей и разделов. Эти визуальные инструменты и есть конструктор интерфейса Xcode. Но не пугайтесь. Со временем вы освоите нужный функционал.
Начнем с простого – изменим цвет фона нашей игры. На главном экране кликаем на большой белый прямоугольник. При наведении представление выделяется и на панели контуров слева.
Инспектор атрибутов
Найдите в правой части экрана Панель инспектора. Здесь несколько вкладок. Чтобы задать цвет, кликаем Инспектор атрибутов.
Здесь мы можем менять различные свойства выбранного представления. Нам нужно изменить цвет в опции Background.
После того, как выбрали цвет, сохраняем файл, нажав CMD+S.
4. Запускаем iOS-приложение
На этом этапе мы узнаем как запустить наше приложение на эмуляторе. В верхнем углу слева отображается кнопка Play, Stop, название проекта и симулятор, на котором запускаем нашу игру.
В нашем случае выбран симулятор iPhone 7. Вы можете выбрать любой.
Давай запустим симулятор. Нажмите кнопку Play. После этого приложение должно запуститься. На экране должен отобразиться цвет, который мы выбрали ранее:
Теперь попробуйте самостоятельно изменить цвет фона в Инспекторе атрибутов и запустить повторно приложение.
5. Добавляем фоновое изображение
Добавим это изображение:
Для этого нужно создать представление изображения. Откройте библиотеку объектов, в правом верхнем углу нажмите кнопку Home как на старом айфоне или нажмите сочетание клавиш CMD+Shift+L. В строку поиск вводим название нашего изображения.
Щелкните на изображение и перетащите его в основной вид. Настройте размер изображения, чтобы оно заполнило весь основной вид.
Добавляем изображение в наш проект Xcode. В левой панели навигации откройте файл Assets.xcassets (или нажмите CMD+1). Затем в нижней части экрана нажмите «плюс»:
Выбираем New Image Set (Новый набор изображений), перетаскиваем изображение из Mac Finder в один из слотов:
Открываем панель Инспектора атрибутов и меняем параметр Scales на Single Scale.
Изменим название изображения на background-image:
Далее открываем резервную копию файла Main.storyboard. Определяем вид изображения и переходим в инспектор атрибутов (CMD+Option+4). Выбираем фоновое изображение, задаем режим содержимого на Aspect Fill.
Последний шаг в установке фонового изображения: настраиваем ограничения для представления изображения. Ограничения – это правила, которые указывают iOS, где рисовать те или иные представления. Щелкните на кнопке «Tie-fighter» в нижней части конструктора интерфейса. Убедитесь, что для всех ограничений установлено значение 0. Затем выделите все линии ограничений, чтобы они выделились ярко-красным цветом. Выберите Add Constraints (Добавить ограничения).
Запускаем приложение кнопкой Play или сочетанием клавиш CMD+R. Результат:
6. Добавляем кнопки
Создаем кнопки для нашей игры на iOS. Открываем библиотеку объектов (CMD+Shift+L), вбиваем в поиск button.
Теперь давайте отредактируем наши две кнопки, чтобы они стали более заметными. Я изменю цвет фона на черный с непрозрачностью 60% и цвет шрифта на белый. Эти параметры мы зададим в инспекторе атрибутов (CMD+Option+4). Перед открытием инспектора атрибутов убедитесь, что кнопка выделена.
Делаем кнопки более заметными. Изменяем цвет фона на черный. Для этого выделяем кнопку и заходим в Инспектор атрибутов (CMD+Option+4). Задаем параметры:
- непрозрачность 60%;
- шрифт – белый.
Результат:
7. Добавляем текст
Задаем текст для счета (Score) в игре. Открываем библиотеку объектов (CMD+Shift+L) и вбиваем запрос Label:
Перетаскиваем Label в верхнюю часть представления и заменяем текст через Инспектор атрибутов (CMD+Option+4), пишем Score: 0. Выбираем для текста белый цвет и размер 40px.
В нашей игре карты будем представлять цифрами от 1 до 13, где:
- 1 – туз,
- 11 – валет,
- 12 – королева,
- 13 – король.
В центр экрана добавляем ноль. Возвращаемся в библиотеку объектов (CMD+Shift+L) и перетаскиваем метку на экран. Задаем номер «0», выбираем размер и цвет шрифта:
Изображения игровых карт добавим позже. Теперь начинаем кодить.
8. Программируем на языке Swift
Swift – язык программирования от Apple. На нем разрабатывают приложения для iOS, macOS, watchOS и tvOS. Swift – легко читаемый язык и отлично подходит для начинающих разработчиков, которые никогда не писали код.
Итак, удерживаем клавишу Option на клавиатуре, кликаем на файл ViewController.swift в Project Navigator (CMD+1). Xcode должен открыть файл рядом с нашим пользовательским интерфейсом:
IBOutlets
IBOutlet подразумевает связь элемента UI (кнопки или лейбла) с его ссылкой в коде.
Слева находится пользовательский интерфейс, справа – код. С помощью IBOutlet соединяем пользовательский интерфейс приложения с кодом. Для этого удерживаем клавишу ctrl, кликаем на нужный элемент мышкой и перетаскиваем метку числа в код:
Далее переименовываем метку в коде, задаем имя cardLabel:
Таким же способом перетаскиваем в код счет (Score) и кнопки High и Low. После этого Теперь тем же методом перетащите в свой код счет, кнопку high и кнопку low. После этого наш код выглядит так:
import UIKit class ViewController: UIViewController { @IBOutlet weak var cardLabel: UILabel! @IBOutlet weak var scoreLabel: UILabel! @IBOutlet weak var highButton: UIButton! @IBOutlet weak var lowButton: UIButton! override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib.
9. Создаем случайные игровые числа
В игре нам нужно получить случайное число от 1 до 13, представляющее новую разыгрываемую карту. Также нам необходимо создать туз, валет, королеву, короля и пронумерованные карты.
Функция random в языке Swift позволяет нам легко это сделать. Добавляем эту строку кода в функцию viewDidLoad()
// Do any additional setup after loading the view, typically from a nib. var currentCardValue = Int.random(in: 1 ... 13)
Эта строка кода присваивает переменной с именем currentCardValue случайное число. var в Swift определяет переменную. Функция Int.random(in: 1 … 13) генерирует случайное целое число от 2 до 14.
Переменные – это контейнеры, в которых хранятся данные. На эту информацию можно ссылаться и изменять ее. Мы можем присваивать данные переменной с помощью символа “=”. В нашей игре мы используем переменную currentCardValue для отслеживания текущей отображаемой карты.
Что такое целые числа, наверняка знает каждый. Далее мы присваиваем целое число нашей метке. Добавляем эту строку в viewDidLoad() как показано ниже:
cardLabel.text = String(currentCardValue)
UILabels имеет свойство text, которое представляет собой тип String. Вы можете присвоить текст метке, установив это свойство. Перед тем как присвоить текст метке, нам необходимо преобразовать наше значение curentCardValue в строку.
Теперь наш файл ViewController.swift должен выглядеть так:
import UIKit class ViewController: UIViewController { @IBOutlet weak var cardLabel: UILabel! @IBOutlet weak var scoreLabel: UILabel! @IBOutlet weak var highButton: UIButton! @IBOutlet weak var lowButton: UIButton! override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. var currentCardValue = Int.random(in: 1 ... 13) cardLabel.text = String(currentCardValue) } }
Запускаем приложение (CMD+R). На экране должно появиться случайное число. При повторном запуске приложения должно появится новое рандомное число от 1 до 13.
Далее нужно сделать так, чтобы число менялось в зависимости от нажатия на кнопку. Для этого добавляем в код IBAction наших кнопок. Нажимаем на кнопку High или Low, открываем ее инспектор соединений (CMD+Option+6).
Перетаскиваем точку Touch Up Inside в наш код:
Назовем их highButtonPressed и lowButtonPressed.
@IBAction func lowButtonPressed(_ sender: Any) { } @IBAction func highButtonPressed(_ sender: Any) { }
Теперь мы можем добавить код, который активизируется при нажатии кнопок. Оборачиваем наш предыдущий случайный код в функцию randomizeCard, вызываем ее из viewDidLoad().
Функции – это контейнеры кода, которые можно вызывать несколько раз. Они похожи на код многократного использования.
Вот так должен выглядеть наш randomizeCard:
func randomizeCard() { var currentCardValue = Int.random(in: 1 ... 13) cardLabel.text = String(currentCardValue) }
Вызываем эту функцию в каждом из наших кнопочных IBActions, которые мы только что создали. Теперь весь код должен выглядеть так:
import UIKit class ViewController: UIViewController { @IBOutlet weak var cardLabel: UILabel! @IBOutlet weak var scoreLabel: UILabel! @IBOutlet weak var highButton: UIButton! @IBOutlet weak var lowButton: UIButton! override func viewDidLoad() { super.viewDidLoad() randomizeCard() // Do any additional setup after loading the view, typically from a nib. } func randomizeCard() { var currentCardValue = Int.random(in: 1 ... 13) cardLabel.text = String(currentCardValue) } @IBAction func lowButtonPressed(_ sender: Any) { randomizeCard() } @IBAction func highButtonPressed(_ sender: Any) { randomizeCard() } }
Запускаем наше приложение для iOS (CMD+R) и кликаем кнопки.Теперь при нажатии кнопок числа рандомизируются:
10. Добавляем подсчет очков
Игроки получают очко, когда угадывают каким будет следующее число: больше или меньше. Нам нужно добавить простую логику подсчета очков, чтобы отслеживать их количество.
Чтобы определить, угадал ли игрок правильно или нет, понадобится переменная, в которой будет храниться предыдущее значение карточки. Добавим эту переменную над нашим IBOutlets. Изначально задаем ей значение “0”. Также переносим объявление переменной CurrentCardValue на самый верх.
var previousCardValue = 0 var currentCardValue = 0
Значение должно обновляться при каждом вызове randomizeCard. Поэтому мы изменим функцию randomizeCard:
func randomizeCard() { previousCardValue = currentCardValue currentCardValue = Int.random(in: 1 ... 13) cardLabel.text = String(currentCardValue) }
Для отслеживания результатов нужна переменная score. Добавляем ее в верхнюю часть файла:
var score = 0
Добавляем простую логику для каждого нажатия кнопки, чтобы определить, следует ли увеличивать счет или сбрасывать его. Для кнопки low мы будем увеличивать счет, если currentCardValue меньше previousCardValue, в противном случае мы сбросим счет в 0.
@IBAction func highButtonPressed(_ sender: Any) { setLabelToRandomNumber() if currentCardValue >= previousCardValue { increaseScore() } else { gameOver() } }
Теперь создаем функцию increaseScore, которая будет обновлять текст на экране и score:
func increaseScore() { score = score + 1 scoreLabel.text = "Score: " + String(score) }
Для функции gameOver мы обнулим счет и изменим текст на “Game Over!”.
func gameOver() { scoreLabel.text = "Game over!" score = 0 }
На этом этапе весь наш код выглядит примерно так:
import UIKit class ViewController: UIViewController { var previousCardValue = 0 var currentCardValue = 0 var score = 0 @IBOutlet weak var cardLabel: UILabel! @IBOutlet weak var scoreLabel: UILabel! @IBOutlet weak var highButton: UIButton! @IBOutlet weak var lowButton: UIButton! override func viewDidLoad() { super.viewDidLoad() randomizeCard() // Do any additional setup after loading the view, typically from a nib. } func randomizeCard() { previousCardValue = currentCardValue currentCardValue = Int.random(in: 1 ... 13) cardLabel.text = String(currentCardValue) } func increaseScore() { score = score + 1 scoreLabel.text = "Score: " + String(score) } func gameOver() { scoreLabel.text = "Game over!" score = 0 } @IBAction func lowButtonPressed(_ sender: Any) { randomizeCard() if currentCardValue < previousCardValue { increaseScore() } else { gameOver() } } @IBAction func highButtonPressed(_ sender: Any) { randomizeCard() if currentCardValue >= previousCardValue { increaseScore() } else { gameOver() } } }
Запускаем игру. Теперь она должна работать.
Видим, что иногда текст в игре обрезается. Чтобы исправить это, открываем Main.storyboard и перетаскиваем эти представления, чтобы они стали больше:
11. Добавляем изображения карт
Наша игра работает. Осталось добавить изображения карт. Будем использовать изображения карт, которые можно скачать здесь https://www.zerotoappstore.com/cards.zip. После скачивания перетаскиваем их из Finder прямо в файл Assets.xcassets.
Теперь, когда у нас есть изображения, делаем так, чтобы вместо цифр выводились изображения карты. Открываем файл Main.storyboard.
Нажимаем на цифру в центре и удаляем ее. Добавляем изображение через библиотеку объектов (CMD+Shift+L) и перетаскиваем изображение на экран.
Размещаем изображение на экране, задаем ему нужный размер и перетаскиваем его в код. Если код закрыт, удерживайте клавишу option и нажмите ViewController.swift чтобы открыть.
Удаляем из кода метку cardLabel. Теперь мы будем устанавливать изображение в соответствии с номером, а не менять текст метки.
Изменяем функцию randomizeCard:
func randomizeCard() { previousCardValue = currentCardValue currentCardValue = Int.random(in: 1 ... 13) cardImageView.image = UIImage(named: String(currentCardValue)) }
Весь код выглядит так:
import UIKit class ViewController: UIViewController { var previousCardValue = 0 var currentCardValue = 0 var score = 0 @IBOutlet weak var scoreLabel: UILabel! @IBOutlet weak var highButton: UIButton! @IBOutlet weak var lowButton: UIButton! @IBOutlet weak var cardImageView: UIImageView! override func viewDidLoad() { super.viewDidLoad() randomizeCard() // Do any additional setup after loading the view, typically from a nib. } func randomizeCard() { previousCardValue = currentCardValue currentCardValue = Int.random(in: 1 ... 13) cardImageView.image = UIImage(named: String(currentCardValue)) } func increaseScore() { score = score + 1 scoreLabel.text = "Score: " + String(score) } func gameOver() { scoreLabel.text = "Game over!" score = 0 } @IBAction func lowButtonPressed(_ sender: Any) { randomizeCard() if currentCardValue < previousCardValue { increaseScore() } else { gameOver() } } @IBAction func highButtonPressed(_ sender: Any) { randomizeCard() if currentCardValue >= previousCardValue { increaseScore() } else { gameOver() } } }
Запускаем приложение (CMD+R). Поздравляем, вы создали игру для iOS!