Как сделать простой вид коллекции с помощью Swift

Question

Как сделать простой вид коллекции с помощью Swift

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

когда я учился использовать UITableView,мы ❤ СвифтКак сделать простой tableview с iOS 8 и Swift была очень простая настройка и объяснение, чтобы заставить меня идти. Есть ли что-нибудь подобное для UICollectionView?

ответ ниже моя попытка научиться этому.

4 135

ios swift uicollectionview

4 ответа:

делегаты и источники данных UICollectionView

//MARK: UICollectionViewDataSource

override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
    return 1     //return number of sections in collection view
}

override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 10    //return number of rows in section
}

override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("collectionCell", forIndexPath: indexPath)
    configureCell(cell, forItemAtIndexPath: indexPath)
    return cell      //return your cell
}

func configureCell(cell: UICollectionViewCell, forItemAtIndexPath: NSIndexPath) {
    cell.backgroundColor = UIColor.blackColor()


    //Customise your cell

}

override func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {
    let view =  collectionView.dequeueReusableSupplementaryViewOfKind(UICollectionElementKindSectionHeader, withReuseIdentifier: "collectionCell", forIndexPath: indexPath) as UICollectionReusableView
    return view
}

//MARK: UICollectionViewDelegate
override func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
      // When user selects the cell
}

override func collectionView(collectionView: UICollectionView, didDeselectItemAtIndexPath indexPath: NSIndexPath) {
     // When user deselects the cell
}

2

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

https://github.com/Ady901/Demo02CollectionView.git

https://www.youtube.com/watch?v=5SrgvZF67Yw

extension ViewController : UICollectionViewDataSource {

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

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return nameArr.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "DummyCollectionCell", for: indexPath) as! DummyCollectionCell
        cell.titleLabel.text = nameArr[indexPath.row]
        cell.userImageView.backgroundColor = .blue
        return cell
    }

}

extension ViewController : UICollectionViewDelegate {

    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        let alert = UIAlertController(title: "Hi", message: "\(nameArr[indexPath.row])", preferredStyle: .alert)
        let action = UIAlertAction(title: "OK", style: .default, handler: nil)
        alert.addAction(action)
        self.present(alert, animated: true, completion: nil)
    }

}

1

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

0

Suragch · Accepted Answer · 2017-12-28 11:57:19

этот проект был протестирован с Xcode 9 и Swift 4.

создать новый проект

это может быть только один вид приложения.

добавить код

создайте новый файл класса Cocoa Touch (File > New > File... > iOS > класс Cocoa Touch). Назовите его MyCollectionViewCell. Этот класс будет содержать выходы для представлений, которые вы добавляете в свою ячейку в раскадровке.
import UIKit
class MyCollectionViewCell: UICollectionViewCell {

    @IBOutlet weak var myLabel: UILabel!
}
мы подключим эту розетку позже.

Открыть Файл ViewController.swift и убедитесь, что у вас есть следующее содержание:
import UIKit
class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {

    let reuseIdentifier = "cell" // also enter this string as the cell identifier in the storyboard
    var items = ["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", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48"]


    // MARK: - UICollectionViewDataSource protocol

    // tell the collection view how many cells to make
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return self.items.count
    }

    // make a cell for each cell index path
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

        // get a reference to our storyboard cell
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath as IndexPath) as! MyCollectionViewCell

        // Use the outlet in our custom class to get a reference to the UILabel in the cell
        cell.myLabel.text = self.items[indexPath.item]
        cell.backgroundColor = UIColor.cyan // make cell more visible in our example project

        return cell
    }

    // MARK: - UICollectionViewDelegate protocol

    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        // handle tap events
        print("You selected cell #\(indexPath.item)!")
    }
}
Примечания

UICollectionViewDataSource и UICollectionViewDelegate - это протоколы, которым следует представление коллекции. Вы также можете добавить UICollectionViewFlowLayout протокол для изменения размера представлений программно, но это не обязательно.

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

настройки раскадровку

перетащите представление коллекции на контроллер вида в раскадровке. Вы можете добавить ограничения, чтобы заполнить родительское представление, если хотите.

убедитесь, что по умолчанию в Инспекторе атрибутов также

пункты: 1

Планировка: Поток

маленькая коробка в левом верхнем углу представления коллекции является Ячейка Представления Коллекции. Мы будем использовать его в качестве прототипа клетки. Перетащите метку в ячейку и центрируйте ее. Вы можете изменить размер границ ячеек и добавить ограничения для центрирования метки, если хотите.

напишите "ячейка" (без кавычек) в поле идентификатора инспектора атрибутов для ячейки представления коллекции. Обратите внимание, что это то же значение, что и let reuseIdentifier = "cell" in ViewController.быстрый.

и в Инспекторе идентификации для ячейки установите имя класса в MyCollectionViewCell наш пользовательский класс, который мы сделали.

подключить розетки

прикрепите метку в ячейке коллекции к myLabel на MyCollectionViewCell класса. (Вы можете Control-drag.)

закрепите представление коллекции delegate и dataSource to контроллер вида. (Щелкните правой кнопкой мыши представление коллекции в структуре документа. Затем щелкните и перетащите стрелку плюс на контроллер вида.)

закончил

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

Улучшение

в пример выше работает, но это довольно некрасиво. Вот несколько вещей, с которыми вы можете играть:

цвет фона

в Построителе интерфейса перейдите к своему Вид Коллекции > Инспектор Атрибутов > Вид > Фон.

расстояние между ячейками

изменение минимального расстояния между ячейками на меньшее значение делает его лучше. В Построителе интерфейса перейдите к своему Вид Коллекции > Размер Инспектор > Мин Интервал и сделать значения меньше. "Для ячеек" - это горизонтальное расстояние, а" для линий " - вертикальное расстояние.

форма ячеек

если вы хотите закругленные углы, границы и тому подобное, вы можете поиграть с ячейкой layer. Вот пример кода. Вы бы поставили его сразу после cell.backgroundColor = UIColor.cyan в коде выше.
cell.layer.borderColor = UIColor.black.cgColor
cell.layer.borderWidth = 1
cell.layer.cornerRadius = 8
посмотреть ответ для других вещей, которые вы можете сделать со слоем (тень, например).

изменение цвета при нажатии

это делает для лучшего пользовательского опыта, когда ячейки визуально реагируют на нажатия. Один из способов добиться этого-изменить цвет фона во время прикосновения к ячейке. Для этого добавьте следующие два метода в ваш ViewController класс:
// change background color when user touches cell
func collectionView(_ collectionView: UICollectionView, didHighlightItemAt indexPath: IndexPath) {
    let cell = collectionView.cellForItem(at: indexPath)
    cell?.backgroundColor = UIColor.red
}

// change background color back when user releases touch
func collectionView(_ collectionView: UICollectionView, didUnhighlightItemAt indexPath: IndexPath) {
    let cell = collectionView.cellForItem(at: indexPath)
    cell?.backgroundColor = UIColor.cyan
}
вот обновленный вид:

далее исследование

Простой UICollectionView Учебник

UICollectionView Учебник Часть 1: Начало Работы

UICollectionView учебник Часть 2: многоразовые представления и выбор ячейки

UITableView версия этого Q & A

UITableView пример для Swift