IOS 9 анонсировала изменения в Collection View Cells. Теперь стала доступной функция длительного нажатия, которая заставляет выбрать ячейку и поменять ее позицию относительно других ячеек, тем самым меняя общий порядок. В этом уроке мы покажем как можно изменить порядок ячеек через длительное нажатие не них, содержащих буквы алфавита. ячейки, содержащие буквы алфавита, порядок этих ячеек может быть легко изменен. Этот туториал создан для iOS 9 в Xcode 7.

Откройте Xcode и создайте новое Single View Application.

Для имени продукта можете использовать что-то типа iOS9CollectionViewReorderDemo, затем заполните следующие поля аналогично снимку внизу, если вам не хочется ломать над этим голову. Установите Язык -Swift, а в качестве устройства выберите iPhone.

Давайте перейдем в наш Main.storyboard и удалим наш единственный View Controller. Затем из библиотеки объектов перетащите на холст Collection View Controller. Выделите View Controller Collection и перейдите в меню Editor -> Embed -> Navigation controller.

Затем выделите Navigation Controller и перейдите Attribute Inspector (вкладка в правом верхнем углу). В разделе View Controller выберите галочку “Is Initial View Controller” (исходный View Controller).

Дважды щелкните Navigation Bar (серая полоска сверху Collection View Controller’а) в Collection View Controller и измените название на (myAlphabet). Выберите Collection View (просто щелкните в середину Collection View Controller) и перейдите в Size Inspector (предпоследняя вкладка в виде линейки справа вверху). В Collection View Section установите размер ячеек на ширину и высоту на 110.

Выберете Collection View Controller Cell перейдите в Attribute Inspector и найдите раздел View. Замените фон - "background" на какой-либо другой, чем просто прозрачный, например, на такой:

Теперь, все так же с выделенной ячейкой, идите в Attribute Inspector и в разделе Collection Reusable View напишите в графе Identifier "Cell”.

Перетащите Label из библиотеки объектов и поместите его в центре Collection View Cell. Дважды щелкните на ярлык и введите букву "A". Затем с выделенным ярлыком (Label) пройдите в Attribute Inspector и поменяйте цвет шрифта на белый, или на тот, который вам подходил лучше, чем стандартный черный.

В итоге у вас должно получиться что-то вроде этого:

Поскольку View Controller был нами удален, то мы можем так же смело удалить и файл ViewController.swift. Теперь давайте добавим новый файл в наш проект, который будет связан с нашим Collection View Controller. В меню выберите File -> New -> File… -> iOS -> Source -> Cocoa Touch Class. Назовите класс CollectionViewController и сделайте его подклассом  UICollectionViewController.

Затем создайте класс для Collection View Cell. Добавьте новый файл в проект. Выберите File -> New -> File… -> iOS -> Source -> Cocoa Touch Class и назовите класс ABCCell и сделайте его подклассом UICollectionViewCell.

Эти новые классы необходимо подключить к нашим объектам в Main.storyboard. Кликните Collection View Controller и перейдите ко вкладке Identity Inspector (вкладка справа вверху, третья слева). Заполните поле class на CollectionViewController.

Теперь щелкните на Collection View Cell (ячейку) и пройдите так же в Identity Inspector. Измените класс на ABCCell.

Теперь давайте создадим IBOutlet ярлыка нашей ячейки в коде. Идем в Assistant Editor и смотрим, чтобы файл ABCCell.swift виден. Выделяем наш ярлык (или Label), зажимаем клавишу Ctrl и перетаскиваем курсор в класс AlphabetCell, а затем создайте следующий Outlet:

Перейдите во CollectionViewController.swift. Выберите класс viewDidLoad и удалите следующую строку:

self.collectionView!.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: reuseIdentifier)

Идентификатор (reuse identifier) уже имеется у нас в Interface Builder. Поэтому эта строка кода нам не нужна.

Добавьте свойство, чтобы хранить значение буквы алфавита.

var charArr: [String] = []

Давайте теперь изменим метод viewDidLoad на:

override func viewDidLoad() {
        super.viewDidLoad()
        
      let letters = "АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ"
        
        for letter in letters.characters {
            charArr.append(String(letter))
        }
    }

Каждая буква в алфавите присваивается массиву charArr. Затем измените предопределенные методы делегата Collection View.

  // 1
  override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
    return 1
  }
  
  
  // 2
  override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return charArr.count
  }

  // 3
  override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("Cell", forIndexPath: indexPath) as! ABCCell
    
    cell.ABCLabel.text = charArr[indexPath.row]
    
    return cell
  }

1. Collection View будет содержать всего один раздел.
2. 33 секций будут созданы в Collection View, так как в массиве charArr содержится 33 членов.
3. В каждой ячейке будет находится по одной букве или, другими словами, по одному члену массива.

Когда происходит изменение порядка ячеек, то содержание должно быть изменено. Это может быть сделано в методе CollectionView: moveItemAtIndexPath:toIndexPath

override func collectionView(collectionView: UICollectionView, moveItemAtIndexPath sourceIndexPath: NSIndexPath,toIndexPath destinationIndexPath: NSIndexPath) {

        let temp = charArr[sourceIndexPath.row]
        charArr[sourceIndexPath.row] = charArr[destinationIndexPath.row]
        charArr[destinationIndexPath.row] = temp
    }

Что мы по сути сделали, так это просто поменяли поменяли значения двух членов.

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

Уверен, что результат вас не разочаровал! Наверное, сейчас вас так и подмывает сделать “пятнашки” :)

Конечный проект доступен по ссылке

Урок подготовлен командой SwiftBook.ru

Автор урока: Акулов Иван