Дневник начинающего разработчика. Урок 2. Рандомный вывод изображений в Imageview.

Всем привет!

Логика нашего приложения такая: при нажатии на кнопку рандомно появляются картинки.
А в качестве маленького бонуса, расскажу, как по тапу отображать только одну картинку и покажу
разные типы Constraints, которыми воспользуемся. Итак приступим.

Для начала создайте проект Single View Application, название проекта Lesson2.

Выбираете из библиотеки объектов Image View, Label, 2 Button и переносите его на экран
в Main.Storyboard.

Пока не задавайте размер, а просто перенесите на экран.

Все элементы, которые будем использовать, есть и теперь мы займемся расположением их на эране
Main.storyboard. Скачайте картинки, которые я подготовил к проекту
по ссылке. После того как
архив скачался и открылся в папке, перейдите в Xcode в файл Assets.xcassets проекта. Нажмите
на иконку, как показано на скриншоте ниже, и, в появившимся меню, выбираете пункт Import и далее
выбираете файлы картинок для проекта.

После добавления картинок, вы увидите список с именами этих картинок, тут можно по желанию
редактировать названия картинок, если это необходимо.

Теперь переходим в Main.storyboard, выбираем наш Image View и открываем
Show the Attributes Inspector.

В блоке с названием Image View выбираем пункт Image и любую картинку, это нужно, чтобы
узнать какой размер на экране будет занимать картинка. В блоке View в пункте Content Mode
выбираем пункт Aspect Fit, картинка будет отображаться согласно пропорциям.

Теперь выбираем Image View (в нем отобразилась наша картинка) и увеличиваем его, пока картинка
не займет весь экран приложения. Теперь расположите по центру оставшився элементы: Label,
2 Button.

Теперь нужно задать Constraints, чтобы элементы не слиплись и не пропали из экрана
при эмуляции. Зажмите клавишу ctrl и перетащите Image View на View.

После этого появится меню. С зажатой клавишей shift, выбираем пункты, как на картинке, и нажимаем
на Add Constraints, который и добавит ограничения Image View.

Типы ограничений(Constraints):

Ограничение левого края;
Ограничение правого края;
Ограничение верхнего края;
Ограничение нижнего края;
Ограничение по горизонтале;
Ограничение по вертикале;
Ограничение по ширине;
Ограничение по высоте;
Ограничение по соотношению.

Теперь выделите элемент Label, назовите его name image, расширьте его область для текста
до границы и задайте ему Constraints, для
этого нужно кликнуть на иконку под названием Pin и выбрать, как показано на скриншоте:

И нажать на кнопку Add 4 Constraints.

С последними элементами поступим по другому. Переименуем кнопки, как показанно на
скриншоте, и расположим их, примерно, на одинаковых расстояниях друг от друга.

Выбираем кнопку Рандомно и нажимаем на иконку Align.

Ставим галочки в тех местах, где установлены на скриншоте ниже. На экране Main.storyboard
появились оранжевые линии, они говорят о том, что элемент расположен не там, где он должен
быть, но ничего, мы потом это исправим. Если не сделать этого исправления, то при билде,
элементы будут распологаться по середине экрана, куда указывали оранжевые пунктирные линии.

Теперь переходим в Pin, эта иконка расположенна рядом с Align и указываем: длину, ширину
и отступ сверху, как на на скриншоте.

После этого нажимаем на иконку с названием Resolve Auto Layout Issues, она находится рядом
с Pin.

В появившимся окне выбираем Update Constaints, чтобы изменить положение Constaints, где
середина будет считаться от места положения элемента button.

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

Теперь проделайте тоже самое с другой кнопкой и приступаем к написанию кода. Для начала
уберите картинку, которую добавляли Image View, чтобы при билде на экране была пустота.

Выбираем в проекте Main.storyboard и с зажатым alt выбираем файл ViewController.swift,
чтобы вызвать редактор кода (Assistant Editors). Выбираете ImageView и с зажатой
клавишей ctrl переносите в редактор кода элементы:

На кнопках меняем тип соединения(Connection) с Outlet на Action.

Создаем первый массив, где будут храниться рандомные картинки:

var randomImage = ["image_1", "image_2", "image_3", "image_4", "image_5", "image_6", "image_7", "image_8", "image_9", "image_10"]

Элементы в массиве - это названия каждой картинки.

Создаем второй массив, где будет храниться одна картинка:

var oneImage = ["2"]

Пишем код в созданном Action randomChangeButton.

@IBAction func randomChangeButton(_ sender: UIButton) {
    let random = arc4random_uniform(10)

    switch random {
    case 0:
        imageLabel.image = UIImage(named: randomImage[0])
        nameLabel.text = randomImage[0]
    case 1:
        imageLabel.image = UIImage(named: randomImage[1])
        nameLabel.text = randomImage[1]
    case 2:
        imageLabel.image = UIImage(named: randomImage[2])
        nameLabel.text = randomImage[2]
    case 3:
        imageLabel.image = UIImage(named: randomImage[3])
        nameLabel.text = randomImage[3]
    case 4:
        imageLabel.image = UIImage(named: randomImage[4])
        nameLabel.text = randomImage[4]
    case 5:
        imageLabel.image = UIImage(named: randomImage[5])
        nameLabel.text = randomImage[5]
    case 6:
        imageLabel.image = UIImage(named: randomImage[6])
        nameLabel.text = randomImage[6]
    case 7:
        imageLabel.image = UIImage(named: randomImage[7])
        nameLabel.text = randomImage[7]
    case 8:
        imageLabel.image = UIImage(named: randomImage[8])
        nameLabel.text = randomImage[8]
    case 9:
        imageLabel.image = UIImage(named: randomImage[9])
        nameLabel.text = randomImage[9]
    default:
        print("error randomChangeButton")
    }
}

Принцип работы такой. Создаем переменную, которой присваиваем метод arc4random_uniform(),
где в скобках указываем диапазон действия этого метода. Этот метод выдает рандомно числа,
а мы эти числа приравниваем к порядковому номеру в массиве. После чего с помощью конструкции
switch-case, мы проверяем и подставляем соответсвующие элементы массива и выводим их
в Main.storyboard.

Разберем по подробней, как мы отобразили данные:
imageLabel.image = UIImage(named: randomImage[9])

imageLabel - это подключенный элемент ImageView.
imageLabel.image - так мы обращаемся к свойству этого элемента ImageView.
UIImage - мы указываем, что приравниваем именно картинкики.
UIImage(named: ) - указываем на имя этой картинки.
UIImage(named: randomImage[9]) - в качестве имени картинки мы ссылаемся на порядковый номер элемента в массиве randomImage.

nameLabel.text = randomImage[9]

nameLabel - это подключенный элемент label.
namelabel.text - свойство элемента
randomImage[9] - порядковый номен в массиве randomImage.

Пишем код в созданном Action oneImageButton.**

@IBAction func oneImageButton(_ sender: UIButton) {
    imageLabel.image = UIImage(named: oneImage[0])
    nameLabel.text = ""
}

Теперь запускаем наше приложение и результат должен быть примерно таким.

Всем спасибо! Увидимся через неделю.