Как стать автором
Обновить

Добавление UICollectionViews в кастомный UITableViewCell который сделан через Xib

Время на прочтение2 мин
Количество просмотров8.1K
Я был удивлен, узнав, сколько было препятствий для реализации UICollectionView в UITableViewCell. Поэтому этот туториал здесь, надеюсь он сэкономит вам много времени.

Примечание: это туториал не для начинающих. Предполагается, что вы знаете о tableViews и создании пользовательских ячеек с файлами xib.

Также я не описываю ничего, про визульную составляющую.

1) Добавьте UICollectionView к вашей TableViewCell Xib

  1. Перетащите UICollectionView в ваш TableViewCell Xib
  2. Добавить констрейны
  3. И узнайте, что вы не можете добавить CollectionViewCells в свой недавно добавленный UICollectionView :)

Оказывается, вам нужен отдельный файл для размещения любых ячеек представления коллекции, которые вы хотите отобразить. (Когда ваш UICollectionView находится в Xib-файле)

2) Добавьте файл UICollectionViewCell и Xib в ваш проект

image

Вы можете делать все, что захотите, в своем ячейки коллекции Collection View Cell Xib (добавить label, image и тд.), для целей этого туториала мы это здесь не трогаем.

Убедитесь, что вы даете своей ячейке resuableIdentifier.

image

3) Убедитесь в соответствие вашего класса TableViewCell UICollectionView Data Source и Delegate протоколы.

Шаг 1: Вернитесь к вашему Xib-файлу tableViewCells.

image

Шаг 2: Перетащите из вашего collectionView в ‘File’s Owner’ и выберите dataSource и затем delegate.

image

Шаг 3: Перетащите из вашего collectionView в ваш класс TableViewCell и создайте IBOutlet

image

Шаг 4: Убедитесь в соответствие вашего класса TableViewCell UICollectionView Data Source и Delegate протоколы.

class TableViewCell: UITableViewCell, UICollectionViewDelegate, UICollectionViewDataSource {
    @IBOutlet weak var collectionView: UICollectionView!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
        self.collectionView.dataSource = self
        self.collectionView.delegate = self
        self.collectionView.register(UINib.init(nibName: "CollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "collectionViewID")
        
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 15
    }
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "collectionViewID", for: indexPath as IndexPath) as! CollectionViewCell
        
        
        return cell
    }
}

Пояснение к коду:

  1. Добавьте UICollectionViewDelegate и UICollectionViewDataSource к описанию класса
  2. Сделайте datasource collectionView и delegate = self в awakeFromXib
  3. Добавьте функцию numberOfItemsInSection
  4. Добавьте функцию cellForItemAt
  5. Создайте ячейку с вашим reuseIdentifier как свою пользовательскую ячейку.

Действия по устранению неполадок:

  1. Мои идентификаторы назначены и корректны?
  2. Перетащил ли я из своего collectionView в Files Owner в вашем Xib-файле?

Если есть вопросы, пишите в комментариях.

Если это вам помогло или поможет в будещем поставьте лайк.

Надеюсь кому то это сэкономит очень много времени.
Теги:
Хабы:
+4
Комментарии5

Публикации

Истории

Работа

Swift разработчик
30 вакансий
iOS разработчик
22 вакансии

Ближайшие события

Weekend Offer в AliExpress
Дата20 – 21 апреля
Время10:00 – 20:00
Место
Онлайн
Конференция «Я.Железо»
Дата18 мая
Время14:00 – 23:59
Место
МоскваОнлайн