Колекції видів (UICollectionView) iOS, Apple, Xcode developer

Колекції видових уявлень відображають упорядковану колекцію елементів даних, використовуючи стандартні або користувацькі шаблони. Подібно до табличних уявлень видів, колекції видових уявлень використовують користувальницьке джерело даних для відображення комбінації колонок і додаткових видів.

Реалізація:
  • Колекції видових уявлень реалізовані в класі UIC CollectionView.
  • Осередки колекції видових уявлень реалізовані в класі UICollectionViewCell.
  • Осередки для багаторазового використання реалізовані в класі UICollectionReusableView.

Контент для колекції видів

Осередки представляють основний контент колекції видів. Основне завдання одного осередку - представити один елемент із джерела даних колекції видів. Кожен осередок повинен бути нащадком класу UICollectionViewCell.

Для забезпечення візуального відображення даних, колекції видів працюють з кількома родинними класами, такими як: UICollectionViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionReusableView, UICollectionViewCell, UICollectionViewLayout, UICollectionViewLayout.

Класи та протоколи для реалізації колекції видів:

Забезпечує Клас / Протокол Опис

UICollectionView надає візуальний майданчик для контенту колекції видів. Цей клас успадковується від UIScrollView і може містити велику площу зі скролінгом. Цей клас також полегшує представлення ваших даних.

UICollectionViewController надає підтримку для керування колекцією видів. Його використання необов'язкове.

Об'єкт data source Найважливіший об'єкт, який ви створили, тільки цей об'єкт знає як представити ваші дані для колекції видів. Створюваний вами об'єкт управління даними повинен реалізовувати протокол UICollectionViewDataSource.

Об'єкт delegate надає можливість перехоплювати події від колекції видів та налаштовувати власну поведінку представлення колекції видів, наприклад підсвічування вибраних осередків колекції. Цей протокол є необов'язковим.

Усі види, що відображаються колекцією видів, повинні бути екземплярами класу UICollectionReusableView. Цей клас підтримує механізм рециркуляції, що використовується колекцією видів.

Об'єкт UICollectionViewCell являє собою специфічний об'єкт виду, що рециркулюється для вашої комірки з даними.

Підкласи UICollectionViewLayout задають положення, розмір та візуальні атрибути для осередків та видів, що перевикористовуються всередині колекції видів.

Всередині процесу створення шарів створюється об'єкт з атрибутами, що є екземпляром класу UICollectionViewLayoutAttributes , який говорить колекції видів як відображати комірки та види, що перевикористовуються.

Об'єкт Шару отримує екземпляр класу UICollectionViewUpdateItem , під час вставки, видалення або переміщення даних в колекції видів. У вас немає потреби у створенні екземпляра даного класу.

Клас UICollectionViewFlowLayout є об'єктом шару, за допомогою якого ви реалізуєте сітку або інші табличні елементи. Ви можете використовувати цей клас як є або в поєднанні з делегатом (UICollectionViewDelegateFlowLayout) для динамічного управління інформацією.

Створення колекції видів

створенняколекція видів завжди починається з додавання об'єкта UICollectionView у ваш storyboard або nib файл. Далі ви конфігуруєте ваш об'єкт колекції видів, додаючи джерело даних (data source), делегат (delegate) тощо. Ви ніколи не створюєте будь-які класи з керування колекцією виду без колекції виду. Наприклад, ви не можете створити об'єкти шарів, не створивши сам об'єкт колекції видів.

Перевикористовувані види підвищують продуктивність

Колекції видів використовують технологію утилізації видів, підвищення продуктивності. Як тільки вид переміщається за поле відображення, він видаляється з виду і ставиться у чергу замість видалення. При скролінг нового контенту вид витягується з черги з новим вмістом. Щоб скористатися даною технологією, всі види колекції видів повинні бути успадковані від класу UICollectionReusableView .

Проектування вашого об'єкта даних та делегата

Кожен об'єкт Collection View повинен мати джерело даних (datasource), яке надає контент для відображення вашим додатком. Це може бути об'єкт моделі даних або контролер виду, що керується колекцією видів. Все, що потрібно від джерела даних, - це надати інформацію колекції видів про те, скільки осередків необхідно уявити і які видові уявлення відобразити.

UICollectionViewDataSource надає протокол для джерела даних колекції видів.

Кількість секцій та осередків

Надання видів для Collection View

Приклад реалізації Collection View

У цьому прикладі розглянемо Колекцію видів з однією секцією та осередками, що містять елементи Image view та Label.

Тепер створимо клас, успадкований від NSObject, для одного елемента джерела даних, який буденадавати рядок з найменуванням та зображення для Collection View.

Реалізація mbFruitData.h

Зауважимо, що Xcode, принаймні шоста версія, створює успадковані класи від NSObject з імпортом бібліотеки Foundation, яка нічого не знає про UIImage , тому замінюємо імпорт на UIKit !

Файл реалізації mbFruitData.m залишаємо без змін.

Тепер додамо кілька файлів з картинками, у нашому випадку три: apple.jpg, apples.jpg, apricot.jpg розміром 180 х 180 пікселів.

Тепер настала черга створити клас, успадкований від UICollectionViewCell, який представлятиме нашу комірку в колекції видів.

Реалізація mbCVReuse.h

Переходимо в Interface Builder, виділяємо комірку та призначаємо для неї клас mbCVReuse. Далі з'єднуємо елементи осередку з відповідними властивостями, як показано нижче:

Тепер переходимо в ViewController.h і додаємо змінну NSMutableArray* arrItems , яка міститиме масив із екземплярами класів mbFruitData.h . І нарешті відредагуємо ViewController.h, в якому заповнимо цей масив, а також реалізуємо протокол UICollectionViewDataSource.

Реалізація ViewController.h

Реалізація ViewController.m

Цей приклад звичайно дуже примітивний, але він показує приклад реалізації Колекції видів та протоколу джерела даних.

Реалізація делегату

Колекції видів реалізують підтримку вибору та підсвічування одиночної комірки за умовчанням, або кількох опційно. Якщо встановлено властивість осередку selectedBackgroundView , то при торканні та виборі осередку відображається задане у цій властивості видове уявлення.

Делегат колекції видів надає такі методи для відстеження торкання та вибору осередків:

  • collectionView:shouldSelectItemAtIndexPath: - повертає YES якщо комірка може бути обрана, значення за промовчанням YES .
  • collectionView:shouldDeselectItemAtIndexPath: - повертає YES якщо заданий осередок може бути невибраний, значення за умовчанням YES .
  • collectionView:didSelectItemAtIndexPath: - викликається якщо комірка була вдало обрана.
  • collectionView:didDeselectItemAtIndexPath: - викликається, якщо обраний осередок був скинутий.
  • collectionView:shouldHighlightItemAtIndexPath: - повертає YES якщо комірка може бути підсвічена під час торкання, значення за промовчанням YES .
  • collectionView:didHighlightItemAtIndexPath: - викликається при торканні комірки для підсвічування.
  • collectionView:didUnhighlightItemAtIndexPath: - викликається, щоб повідомити про закінчення підсвічування.

Ви можете використовувати наведені методи для індикації вибору та підсвічування осередків, наприклад, шляхом зміни властивості backgroundColor видового подання осередку, як показано нижче:

Виведення меню редагування

При тривалому утриманні комірки може бути виведено меню редагування, що дозволяє копіювати, вставляти та видаляти комірки. Для цього делегат має реалізувати такі методи:

У цьому прикладі ми просто зберігаємо індекс копіюється комірки, і вставляємо той же об'єкт даних в масив об'єкта даних при виборі "вставити" перед обраним коміркою.

Верхній рівень та управління
Управлінняконтентом
Подання
Шар подачі