Продолжим более подробное изучение контроллеров представления в iOS. На очереди контроллер коллекции — UICollectionViewController. При его изучении, напишем приложение-галлерею, в котором рассмотрим работу с UICollectionView, а также впервые создадим свой кастомный класс для ячейки.
Откройте Xcode и создайте новый проект:
- Name: MyGallery;
- Language: Swift;
- Devices: iPhone.
Перед тем как продолжить, подготовьте 15-20 изображений, которые впоследствии будут использованы. Так как имя проекта MyGallery, не лишним будет использовать Ваши фотографии либо же просто проявить немного фантазии. Собрав нужное количество фотографий, добавьте их в asset-каталог проекта.
Интерфейс
Откройте Xcode и отключите опцию Use Size Classes. Перетащите UICollectionViewController из Object library таким образом, чтобы он был слева от уже существующего контроллера предсталвения. Оберните его в UINavigationController и последний задайте в качестве первоначального контроллера, выбрав опцию Is Initial View Controller. После добавьте связь между ячейкой контроллера коллекции и UIViewController‘ом:
Добавление связи между UICollectionViewCell и UIViewController
Выделите появившийся segue и задайте ему идентификатор «goPhoto». Контроллер коллекции позволит отображать список фотографий. По нажатию на определенное фото (ячейку), приложение откроет её в полном размере в контроллере представления. Теперь, когда мы закончили добавление необходимых контроллеров, подготовим UICollectionViewController. Выделите его, откройте вкладку Size Inspector и укажите следующие параметры:
- Cell Size:
- Width: 78;
- Height: 78;
- Min spacing:
- For Cells: 1;
- Min lines: 1;
- Section Insets:
- Left: 1;
- Right: 1;
Такие параметры позволят отображать 4 ячейки в ряд, с равными промежутками между ними, а также с равным расстоянием от левой и правой границы экрана. Далее зададим идентификатор ячейки, к которому будем обращаться из кода. Выделите её и в разделе Attributes inspector в поле Identifier напишите «Cell».
Убедитесь, что ячейка всё еще выделена и перетащите в неё объект UIImageView, задав следующие параметры:
- Attributes inspector:
- Mode: Aspect Fill.
- Size inspector:
- X: 0;
- Y: 0;
- Width: 78;
- Height: 78.
В результате Ваш контроллер коллекции должен выглядеть следующим образом:
UICollectionViewCell с объектом UIImageView
Перейдем к UIViewController и также поместим на него объект UIImageView со следующими параметрами:
- Attributes inspector:
- Mode: Aspect Fit.
- Size inspector:
- X: 0;
- Y: 0;
- Width: 320;
- Height: 568.
На данном этапе вся подготовительная работа с интерфейсом окончена.
UICollectionViewCell
Я упоминал ранее, что в данном уроке речь пойдет и о создании своего класса ячейки. Так как в интерфейсе мы подготовили кастомную ячейку с UIImageView, создание класса будет не лишним. Добавим новый файл к проекту: New File -> Cocoa Touch Class и зададим следующие значения:
- Name: MyCell;
- Subclass of: UICollectionViewCell;
- Language: Swift.
Вернемся в storyboard и снова выделим нашу ячейку. Откройте Identity inspector и в поле Class укажите название нового класса — «MyCell». Как Вы видите, это тот же самый процесс, который происходит при связывании контроллера со своим классом. Откройте файл MyCell, зажав кнопку Alt, протяните связь между UIImageView и классом, и дайте имя imageView:
Добавление связи между UIImageView и классом UICollectionViewCell
Готово! Казалось бы простые действия, но в будущем они отлично упростят нам работу.
UIViewController
Последнее, что нам нужно сделать до работы с UICollectionViewController — подготовить UIViewController.
Добавьте в проект класс под названием «PreviewVC» (Subclass of: UIViewController). Выделите контроллер и в поле Class секции Identity inspector укажите имя только что созданного класса. Осталось добавить связь между UIImageView и самим классом. Дайте имя объекту imageViewPreview. После @IBOutlet добавьте идентификатор private. Это позволит скрыть UIImageView от других контроллеров.
Также создадим параметр типа UIImage c именем «currentPhoto». В него мы будем передавать изображение из выбранной ячейки. Но просто задать объект изображения недостаточно. Необходимо отображать новое изображение каждый раз, когда попадаем на PreviewVC. Для этого добавим метод viewWillAppear() и в его теле будем передавать объекту imageViewPreview объект currentPhoto. В результате класс должен содержать следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@IBOutlet private weak var imageViewPreview: UIImageView! var currentPhoto: UIImage! override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view. } override func viewWillAppear(animated: Bool) { super.viewWillAppear(animated) self.imageViewPreview.image = currentPhoto; } |
UICollectionViewController
Пришло время заняться и главным виновником данного урока — контроллером коллекции. Добавьте новый класс под названием «GalleryCVC» (Subclass of: UICollectionViewController) и укажите его в Identity inspector.
Откройте только что созданный класс и взгляните на его содержание. Как и в случае с UITableViewController, работа UICollectionViewController строится на основе data source и delegate. У данного класса они носят следующие имена:
- UICollectionViewDataSource;
- UICollectionViewDelegate.
Основными методами в дата сурсе являются:
- numberOfSectionsInCollectionView: — запрашивает количетсво секций;
- collectionView: numberOfItemsInSection: — запрашивает количество ячеек для каждой секции;
- collectionView: cellForItemAtIndexPath: — просит саму ячейку.
Подобный набор методов нам уже знаком из урока с UITableViewController. Так что можно сказать, что оба контроллера руководствуются одинаковыми принципами работы.
Обратите внимание на начало кода в GalleryCVC — в шаблон класса уже добавлен идентификатор ячейки, который можно использовать:
|
1 |
private let reuseIdentifier = "Cell" |
Так как он совпадает с тем идентификатором, что был указан при построении интерфейса, его менять не будем. Перейдем к методу viewDidLoad(). Здесь имеется регистрация класса ячейки, который должен использоваться. Но так как мы добавили свой, он нам не нужен — закомментируйте его:
|
1 2 |
// Register cell classes // self.collectionView!.registerClass(MyCell.self, forCellWithReuseIdentifier: reuseIdentifier) |
Опустившись ниже по коду, увидим набор методов дата сурса и различные методы делегата. Сперва, необходимо подготовить данные, которые будут отображаться в коллекции. Добавьте массив стрингов под названием «allPhotos» перед viewDidLoad(). В самом же методе, заполните массив названиями Ваших фотографий из asset-каталога. В результате начало класса должно выглядеть подобно этому:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var allPhotos: [String]! override func viewDidLoad() { super.viewDidLoad() // Uncomment the following line to preserve selection between presentations // self.clearsSelectionOnViewWillAppear = false // Register cell classes // self.collectionView!.registerClass(MyCell.self, forCellWithReuseIdentifier: reuseIdentifier) // Do any additional setup after loading the view. allPhotos = ["sw_1", "sw_2", "sw_3", "sw_4", "sw_5", "sw_6", "sw_7", "sw_8", "sw_9", "sw_10", "sw_11", "sw_12", "sw_13", "sw_14", "sw_15", "sw_16"] } |
Также укажем заголовок контроллера, но в этот раз не в storyboard, а с помощью кода. В том же методе viewDidLoad() добавьте следующий код:
|
1 |
self.title = "My Gallery" |
Перейдем к заполнению методов data source:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
// MARK: UICollectionViewDataSource override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int { // Нам нужна лишь одна секция return 1 } override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { // Количество ячеек должно соответствовать количеству // фотографий в нашем массиве return allPhotos.count } override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell { // Инициализируем ячейку let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! MyCell // Получаем имя фотографии из массива // под индексом текущей ячейки - indexPath.item let imageName = allPhotos[indexPath.item] // Задаем объекту imageView изображение с именем фотографии // UICollectionViewCell не имеет своего объкта UIImageView. Это тот же объект, // который мы добавили в storyboards и связали с классом "MyCell". cell.imageView.image = UIImage(named: imageName) return cell } |
Закончив работу с отображением контента, осталось лишь добавить передачу выбранного изображения из GalleryCVC в PreviewVC. Найдите и раскомментируйте метод prepareForSegue и напишите внутри него такой код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// MARK: - Navigation // In a storyboard-based application, you will often want to do a little preparation before navigation override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) { if segue.identifier == "goPhoto" { // Даём понять, что sender это ячейка класса MyCell let cell: MyCell = sender as! MyCell // Получает объект image из текущей ячейки let image = cell.imageView.image // Даём понять, что destinationViewController это контроллер класса PreviewVC let previewVC: PreviewVC = segue.destinationViewController as! PreviewVC // Задаём контроллеру изображение с текущей ячейки previewVC.currentPhoto = image } } |
Попробуйте «добраться» до объекта imageViewPreview из класса GalleryCVC.
Не получается? Всему виной идентификатор private, который мы указали при объявлении объекта. Старайтесь прятать внутренние (приватные) объекты от внешних контроллеров, если они им не нужны. Это является одним из правил хорошего тона в программировании.
Мы сделали всё что было нужно. Выберите модель iPhone 5 или 5s в качестве симулятора и запустите приложение. Вот что получилось у меня:
GalleryCVC и PreviewVC
Убедитесь, что всё работает исправно. И теперь Вы с гордостью можете заявить, что написали первое приложение-галлерею! Поздравляем!