Дневник начинающего разработчика. Урок 4. Работа с элементом PickerView.

Всем привет!

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

Для начала создаем новый проект в Xcode, назовем его Lesson4, выбираем язык программирования Swift. Выбираем место сохранения проекта.

Переходим в Main.storyboard, а затем в Object Library. В строке поиска вводим PickerView, после того как библиотека отсортирует и отобразит элемент согласно введенному названию. Перетащите элемент на экран приложения и расположите его по середине экрана. Укажите элементу PickerView горизонтальные и вертикальные ограничения(Constraints) для позиционирования его на экране приложения.

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

Т.к. по умолчанию ограничения создаются в центре экрана.

Вы можете пойти двумя разными способами:

1. Перенести Constraints на то место, где располагается элемент.
2. Перенести элемент в центр согласно Constraints.

Первый вариант.

Выделяем PickerView и переходим в Resolve Auto Layout Issues.

В открывшемся окне, выбираем Update Constraints.

Второй вариант

Проделываем все тоже самое, что и в первом варианте, только, когда появится окно, надо выбрать Update Frames.

И после того, как все сделано, опять возвращаемся в Object Library и ищем элемент с названием Label. Их нам понадобится два. Один назовем Город, а второй - Название города.

Текст у Label (Название города) нам нужен для того, чтобы позиционировать этот Label, позже это уберем по желанию.

По желанию вы можете задать цвет тексту Label, чтобы отделить от “Название города” визуально. Делается это очень просто, выделяете Label и переходите в Show the Attributes inspector.

Потом находите пункт Color и там задаете понравившийся вам цвет.

Я выбрал фиолетовый.

Теперь расставляем наши лейблы, как показано на скриншоте.

Теперь осталось добавить Constraints к Label, тут ничего сложного, в прошлых уроках это описывал, думаю тут не возникнет сложности.

Итак после того, как визуальная часть завершена, можно приступать к подключению и написанию кода. Подключаем label(Название города) и PickerView в файле ViewController.swift.

Теперь переходим в ViewController.swift, к классу ViewController и добавляем новые протоколы UIPickerViewDelegate, UIPickerViewDataSource.

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource{
}

Значение этих протоколов:

1. UIPickerViewDelegate - Делегат реализует необходимые методы этого протокола для возврата высоты, ширины, заголовков строки и содержание значения для строк в каждом компоненте. Он также должен обеспечивать содержание для строки каждого компонента либо в виде строки или его вид. Как правило, делегат реализует другие необязательные методы, чтобы реагировать на select или deselections компонентов.
2. UIPickerViewDataSource - Протокол должен принять объект, который является связующим звеном между объектом UIPickerView и моделью данного приложения для этой точки зрения сборщика. Источник данных обеспечивает выбор режима просмотра с числом компонентов и количеством строк в каждом компоненте, а также для отображения данных и выбора режима просмотра.

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

Создаем переменную cities, в ней будет храниться информация, которая будет отображаться в PickerView.

var cities = ["Москва", "Санкт-Петербург", "Токио", "Бостон", "Берлин", "Вашинктон", "Париж", "Милан"]

Теперь спускаемся ниже к методу viewDidLoad и пишем.

override func viewDidLoad() {
    super.viewDidLoad()
    picker.delegate = self
    picker.dataSource = self
}

Потом добавляем

override func viewDidLoad() {
    super.viewDidLoad()
    picker.delegate = self
    picker.dataSource = self
}

Потом добавляем функции.

func numberOfComponents(in pickerView: UIPickerView) -> Int {
    return 1
}

func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
    return cities.count
}

func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
    return cities[row]
}

func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
    cityesLabel.text = cities[row]
}

Подробнее, что мы сделали.

1. Функция numberOfComponents нужна для того, чтобы указать количество ячеек, в которых будет размещаться информация в PickerView. В данном случае поставил 1.
2. Функция numberOfRowsInComponent нужна для того, чтобы указать PickerView, где он должен брать информацию, которую собирается отображать. cities.count означает весь массив.
3. Функция titleForRow нужна для того, чтобы отобразить информацию на самом PickerView, если этого не сделать, то будут отображаться “?” и вы сами не увидите, что выбираете. cities[row] означает, что надо выбирать значение из массива.
4. Функция didSelectRow нужна для того, чтобы вывести информацию в наш Label.

И теперь, по желанию, хотите уберите текст “Название города” или же можете оставить.

Запускаете приложение и оно должно работать как тут.

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