Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-03-10

1 Осваивать программирование лучше всего на практике. В этой статье мы пошагово создадим простую игру с игральными костями, а также оптимизируем её под любые диагонали экранов. Для работы вам потребуется iMac или Macbook с предустановленным Xcode. Писать приложение для iOS будем на Swift.

2 <h2>Создание проекта</h2>

3 В первую очередь следует создать новый проект: в нашем случае речь идёт об iOS-приложении "Single View Application":

4 Далее просто вводим желаемые значения:

5 Теперь нажимаем "Next", сохраняя проект в нужной папке. Потом в левой части экрана Xcode находим Main.Storyboard и нажимаем "Создать интерфейс пользователя".

6 Теперь можно переходить к следующему этапу.

7 <h2>Интерфейс пользователя</h2>

8 Справа снизу есть панель библиотек, выбираем там вкладку "Object".

9 Далее находим элемент Label, а потом перетаскиваем его на Main.Storyboard. В результате соданный вами проект должен выглядеть приблизительно следующим образом:

10 На данном этапе не волнуйтесь относительно размещения элементов на экране, т. к. оптимизацией мы займёмся позже. Сейчас же введём название для элемента "The sum is:" во вкладке "Inspector Pane":

11 Далее добавим в Main.Storyboard два элемента из Object, а конкретнее, Image View. После того, как добавим их на главный экран, их нужно будет сделать квадратными. В результате получим:

12 Останется добавить кнопку. Чтобы это сделать, найдём элемент Button в правом нижнем углу и перетянем его на главный экран.

13 И введём в файловом менеджере новое название для кнопки - "Roll".

14 <h2>Используем функцию Auto Layout</h2>

15 Auto Layout - одна из лучших функций в Xcode. С её помощью можно оптимизировать размещение элементов на экране под любой необходимый размер. Давайте сначала поместим 2 элемента Image View в Stackview, выбрав их на экране либо боковой панели с зажатой кнопкой "CMD":

16 Теперь нажимаем на кнопку "Embed In Stack", выставляем параметр Axis в позицию Horizontal и устанавливаем параметр Spacing в значение 40:

17 Если что-то пойдёт не так, можно нажать "CMD + Z" и повторить процедуру. Теперь нужно добавить оставшиеся элементы в Stackview. Зажимаем "CMD", а потом выбираем их на экране Main.Storyboard. И выставляем параметр Vertical в поле Axis.

18 Теперь нажимаем кнопку "Add New Constraints" и выставляем параметры, показанные на скриншоте:

19 Осталось выбрать Stackview для всех элементов, а потом в поле Spacing установить значение 50.

20 Разумеется, это ещё не всё, ведь для работы приложения потребуется написать код.

21 <h2>Подключаем элементы к коду</h2>

22 В первую очередь соединяем визуальные элементы с ViewController.swift. При этом элементы UILabel и UIImageView должны быть типа @IBOutlet, а UIButton - @IBAction. Выполняем эту операцию с зажатой кнопкой "CTRL" и выбранным Assistant Editor. По итогу получим:

23 <h2>Добавляем графику</h2>

24 Теперь пришёл черёд для графики. Давайте<a>скачаем архив</a>с изображениями и добавим их в Assets.xcassets. Откроем архив и перетянем все элементы в проект за исключением папки icon.

25 По итогу Assets.xcassets должен выглядеть следующим образом:

26 Вернёмся к экрану Main.Storyboard и выберем для каждого ImageView любое изображение игральных костей. Это следует делать в Attributes Inspector:

27 Для добавления фонового изображения вставляем дополнительный ImageView и устанавливаем параметры, которые указаны на скриншоте:

28 Для нашего фона в Attributes Inspector выбираем изображение "table":

29 Дабы сделать текст читабельнее, изменим цвет и увеличим шрифт. Давайте выберем надпись, установим белый цвет и увеличим шрифт.

30 Кроме того, стоит выбрать изображение для кнопки.

31 <h2>Пишем код</h2>

32 Вот мы и дошли до кода. Откроем файл ViewController.swift и вставим в функцию кнопки следующее:

33 @IBAction func rollACTION(_ sender: UIButton) { label.text = "Hello Dice" leftImageView.image = UIImage(named: "Dice6") rightImageView.image = UIImage(named: "Dice6") }В результате мы программно поменяем значения элементов. Если мы запустим проект и нажмём на кнопки, то увидим эти значения на экране:

34 Завершающий шаг - написание функции, которая будет случайно выбирать значения для наших игральных костей. Также код станет выводить сумму чисел на экране. Создадим функцию rollDice(), а потом поместим в неё код:

35 func rollDice(){ let numberOne = arc4random_uniform(6) + 1 let numberTwo = arc4random_uniform(6) + 1 label.text = "The sum is: \(numberOne + numberTwo)" leftImageView.image = UIImage(named: "Dice\(numberOne)") rightImageView.image = UIImage(named: "Dice\(numberTwo)") }Далее надо удалить код внутри кнопки "rollACTION" и вставить туда rollDice(). Потом поместим это значение в функцию viewDidLoad():

36 // Функция, вызываемая при старте нашего приложения override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. rollDice() } // Значения для кнопки @IBAction func rollACTION(_ sender: UIButton) { rollDice() }Вот и всё, теперь можно запускать игру. При этом каждый раз при нажатии кнопки "Roll" мы будем получать различные значения. Кстати, готовый проект есть на<a>GitHub</a>.

37 По материалам "<a>How To Make A Dice Roll iPhone App</a>".