2015-01-23 4 views
10

Я изо всех сил пытаюсь сделать несколько разделов в моем представлении коллекции с заголовком для каждого раздела. Я не знаю Obj-C, и я нашел для него много учебников, но не смог понять, как преобразовать его в Swift.UICollectionView Несколько разделов и заголовков

Все мои данные являются статическими, поэтому все, что мне нужно, это какой-то массив или словарь, который я могу использовать для создания нескольких разделов. У меня уже есть представление коллекции с 1 секцией, поэтому, если у вас есть понимание или код для нескольких разделов, которые будут полезны.

Я знаю, как установить несколько разделов с помощью

func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int { 
    return sectionData.count 
} 

Я думаю, что главное мне нужна помощь в реализации этого Func

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell { } 

и настройка данных!

UICollectionView и UITableView почти точно так же, так что если вы знаете, как сделать несколько разделов в UITableView в Swift, ваша помощь также оценили

+0

Вот как я это делаю: https://github.com/mattneub/Programming-iOS-Book-Examples/blob/master/bk2ch08p466collectionViewFlowLayout2/ch21p748collectionViewFlowLayout2/ViewController.swift Это является частью загружаемого проект, чтобы вы могли просто загрузить и запустить его. Структура данных модели настроена в 'viewDidLoad'. Извлечение правильных данных из него в методы источника данных очень просто. – matt

+0

Выяснил это на основе вашего учебника! – user3399235

+0

Отлично, спасибо, что позволили мне знать! – matt

ответ

11

cellForItemAtIndexPath функция обрабатывает заполнения каждой секции с ячейками, это не обрабатывать разделы или дополнительные элементы, и, следовательно, это не главное, что вам нужно, когда речь заходит о создании заголовков разделов.

Метод, который необходимо реализовать, - viewForSupplementaryElementOfKind. Его подпись:

func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {} 

Предполагая, что ваш CollectionView правильно работает для 1 секции (вы правильно заполнили тело вашего cellForItemAtIndexPath и ваш sectionData массив правильно отражает количество разделов, которые вы хотите отобразить), вы должны иметь возможность создавать заголовки разделов с использованием следующих указателей:

Наряду с ячейками UICollectionView также поддерживает «дополнительные» объекты вида, обычно используемые для верхних или нижних колонтитулов. Эти дополнительные представления действуют очень точно так же, как и объекты UICollectionViewCell. Точно так же, как cellForItemAtIndexPath обрабатывает ячейки, функция viewForSupplementaryElementOfKind обрабатывает дополнительные виды.

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

let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout() 
layout.headerReferenceSize = CGSize(width: self.view.frame.size.width, height: 30) 

ПРИМЕЧАНИЕ: Я использую UICollectionViewFlowLayout

Далее, если вы еще не сделали этого, создать SectionHeader класс, который определяет каждый объект заголовка раздела, так что вы можете зарегистрировать этот класс с объектом CollectionView так:

collectionView!.registerClass(SectionHeaderView.self, forSupplementaryViewOfKind:UICollectionElementKindSectionHeader, withReuseIdentifier: "SectionHeaderView"); 

Здесь первый и третий аргумент, передаваемый в том же регистрации UICollectionViewCell класса, Первый аргумент в этом методе - это ссылка на класс заголовка раздела, который вы создали. Третий - это идентификатор повторного использования для дополнительного просмотра.

Второй аргумент является специфическим для дополнительных Views, это устанавливает вид из SupplementaryView, который в данном случае представляет собой заголовок, постоянная строка предоставляется классом UICollectionViewFlowLayout UICollectionElementKindSectionHeader используется для него. Если вы заметили параметры на viewForSupplementaryElementOfKind, этот вид затем будет передан как параметр kind: String.

заливки в теле вашего viewForSupplementaryElementOfKind же, как вы бы для cellForItemAtIndexPath function-- Используя метод dequeueReusableSupplementaryViewOfKind для создания объекта SectionHeader, а затем установить любые атрибуты, необходимые (этикетки, цвет и т.д.) и, наконец, вернуть заголовок.

Надеюсь, что это поможет!

Ориентир:

https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UICollectionViewDataSource_protocol/index.html#//apple_ref/occ/intfm/UICollectionViewDataSource/

https://developer.apple.com/library/ios/documentation/UIKit/Reference/UICollectionViewFlowLayout_class/index.html#//apple_ref/c/data/UICollectionElementKindSectionHeade

+0

ваше решение не работает чувак. –

+0

какая часть не работает для вас? – mkncode

+0

Работает так, как ожидалось. Единственная проблема заключается в том, что класс раздела должен быть подклассом ob ReusableView. – arvidurs

2

Вот код, который работал для меня

создать ячейку заголовка. Для этого, который я создал пользовательский класс клеток и перо, чтобы сделать настройку ячейки в графическом редакторе

В viewDidLoad добавить следующее

self.collectionView?.registerNib(UINib(nibName: "KlosetCollectionHeaderViewCell", bundle: nil), forSupplementaryViewOfKind:UICollectionElementKindSectionHeader, withReuseIdentifier: "HeaderCell") 

Затем добавить функцию делегат

override func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> KlosetCollectionHeaderViewCell { 

    let headerCell = collectionView.dequeueReusableSupplementaryViewOfKind(kind, withReuseIdentifier: "HeaderCell", forIndexPath: indexPath) as? KlosetCollectionHeaderViewCell  

    return headerCell! 
    } 

Это поместит HeaderCell в SectionView из PFCollectionView Элементы управления, которые отображаются в ячейке, которую вы добавляете в файл xib, а также выходы и действия

2

После создания и регистрации пользовательских заголовков (и/или нижних колонтитулов) вы можете легко указать разные заголовки (или нижние колонтитулы, если на то пошло) для разных разделов. Вот пример:

override func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView { 
     switch kind { 
     case UICollectionElementKindSectionHeader: 
      let section = indexPath.section 

      switch section { 
      case 0: 
       let userHeader = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: homeHeaderReuseIdentifier, for: indexPath) as! UserHeader 
       return userHeader 
      default: 
       let postHeader = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: sectionSpacingHeaderReuseIdentifier, for: indexPath) as! PostHeader 
       return postHeader 
      } 
     case UICollectionElementKindSectionFooter: 
      let userFooter = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: homeFooterReuseIdentifier, for: indexPath) as! UserFooter 
      return userFooter 
     default: 
      return UICollectionReusableView() 
     } 
    } 

Обязательно укажите нужное количество разделов, тоже:

override func numberOfSections(in collectionView: UICollectionView) -> Int { 
     return 2 
    } 
0

Работал решение для Swift-3

я) Создание пользовательских ячейки & & соответствующие XIB

class SectionHeaderView: UICollectionViewCell { 
     static let kReuseIdentifier = "SectionHeaderView" 
     @IBOutlet weak var invitationsSectionHeader: UILabel! 
     @IBOutlet weak var numberOfPerson: UILabel! 
} 

ii) Регистрация Custom Collect ion View Cell for HeaderView

self.collectionView.register(UINib(nibName: SectionHeaderView.kReuseIdentifier, bundle: nil), forSupplementaryViewOfKind:UICollectionElementKindSectionHeader, withReuseIdentifier: SectionHeaderView.kReuseIdentifier) 

iii) Вызовите функцию делегата для визуализации пользовательского представления заголовка.

func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView { 
     switch kind { 
     case UICollectionElementKindSectionHeader: 
      let headerView: SectionHeaderView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: SectionHeaderView.kReuseIdentifier, for: indexPath) as! SectionHeaderView 
      return headerView 
     default: 
      return UICollectionReusableView() 
     } 
    } 

IV) Упоминание Высота пользовательский заголовок Просмотр

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize { 
     return CGSize(width:collectionView.frame.size.width, height:30) 
} 
0

Определите ваш UICollectionViewCell который будет ваш взгляд Заголовок любезного UICollectionElementKindSectionHeader - В моем случае у меня есть два заголовка - OfferHeaderCell и APRHeaderCell, определенные ниже :

verticalCollectionView.register(UINib(nibName: "OfferHeaderCell", bundle: nil), forSupplementaryViewOfKind:UICollectionElementKindSectionHeader, withReuseIdentifier: "OfferHeaderCell") 
verticalCollectionView.register(UINib(nibName: "APRHeaderCell", bundle: nil), forSupplementaryViewOfKind:UICollectionElementKindSectionHeader, withReuseIdentifier: "APRHeaderCell") 

Идите вперед и возвращает заголовок для каждой секции, а затем установить размер заголовка раздела, чтобы иметь размер, равный нулю в этом Функция UICollectionViewDelegateFlowLayout

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize { 
    if(section==0) { 
     return CGSize.zero 
    } else if (section==1) { 
     return CGSize(width:collectionView.frame.size.width, height:133) 
    } else { 
     return CGSize(width:collectionView.frame.size.width, height:100) 
    } 

} 

Важно определить viewForSupplementaryElementOfKind для двух различных секций, как показано ниже:

func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView { 

    var reusableview = UICollectionReusableView() 
    if (kind == UICollectionElementKindSectionHeader) { 
     let section = indexPath.section 
     switch (section) { 
     case 1: 
      let firstheader: OfferHeaderCell = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "OfferHeaderCell", for: indexPath) as! OfferHeaderCell 
      reusableview = firstheader 
     case 2: 
      let secondHeader: APRHeaderCell = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "APRHeaderCell", for: indexPath) as! APRHeaderCell 
      reusableview = secondHeader 
     default: 
      return reusableview 

     } 
    } 
    return reusableview 
} 

И, наконец, DataSource,

func numberOfSections(in collectionView: UICollectionView) -> Int { 
    return 3 
} 

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { 
    if (section==2) { 
     return 2 
    } 
    return 0 
} 

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { 
    let cell = verticalCollectionView.dequeueReusableCell(withReuseIdentifier: "ReviseOfferCell", for: indexPath) 
    cell.backgroundColor = UIColor.white 
    return cell 
} 

Примечание: Не забыл добавить UICollectionFlowLayout, как ниже:

// МАРК: UICollectionViewDelegateFlowLayout

extension MakeAnOfferController: UICollectionViewDelegateFlowLayout { 

     func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { 

      if indexPath.item == 0 { 
       return CGSize(width: self.view.frame.size.width, height: 626.0) 
      } 
      return CGSize() 
     } 

     func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize { 

      if(section==0) { 
       return CGSize.zero 
      } else if (section==1) { 
       return CGSize(width:collectionView.frame.size.width, height:133) 
      } else { 
       return CGSize(width:collectionView.frame.size.width, height:100) 
      } 
     } 
    } 
Смежные вопросы