Бесконечная прокрутка с использованием UICollectionView и UIPageControl

Здравствуйте, читатели, почти все мы, возможно, работали над демо каруселью или реальными вариантами использования на своем карьерном пути. Что ж, мы столкнулись с такими требованиями, как представление карусели изображений, представление динамической коллекции для галереи изображений и работа с анимацией для представления карусели с автоматической прокруткой. Сегодня мы собираемся изучить что-то похожее на описанные выше сценарии. Мы будем разрабатывать демонстрационное приложение, которое будет генерировать простое карусельное представление изображений с бесконечной прокруткой/циклом, используя UICollectionView и UIPageControl. Будет проще, так что давайте углубимся.

Давайте сделаем это с кодом и пояснениями.

Сначала создайте простое представление коллекции изображений.

import UIKit
import Foundation

class MainVC: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource{

 //MARK: - OUTLETS
    @IBOutlet weak var colVw: UICollectionView!

//MARK: - GLOBAL VARIABLES
    var imageArray = ["place_canada","place_costa_rica","place_germany","place_greece","place_india"] //add your sample images

//MARK: - DELEGATE METHODS
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return imageArray.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! DetailCollectionViewCell
        cell.imgView.image = UIImage(named: imageArray[indexPath.row])
        return cell
    }
}

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

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        CGSize(width: UIScreen.main.bounds.width, height: 250)
    }

Метод делегата установит CGSize ячейки, но мы должны внести некоторые изменения в раскадровку. Выберите представление коллекции, откройте инспектор размеров на правой панели и измените предполагаемый размер представления коллекции на «Нет». Теперь повторно запустите код. Мы должны исправить неровные ячейки. Hi-Fi

Двигаясь дальше, добавьте UIPageControl в раскадровку, указав соответствующие ограничения, и привяжите его к быстрому файлу. Для настройки номера страницы и управления страницей мы будем кодировать методы делегата представления прокрутки: scrollViewDidEndDecelerating и scrollViewDidEndDragging соответственно.

//MARK: - GLOBAL VARIABLES
    var frame = CGFloat(0)
    
//MARK: - UI VIEW CONTROLLER LIFE CYCLES
    override func viewDidLoad() {
        super.viewDidLoad()
        pageControl.numberOfPages = imageArray.count
    }

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        let pageNumber = scrollView.contentOffset.x/scrollView.frame.size.width
        pageControl.currentPage = Int(pageNumber)
        if pageControl.currentPage == 1{
            frame = pageNumber
        }
    }
    
func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
        if pageControl.currentPage == imageArray.count - 1{
            pageControl.currentPage = 0
            colVw.contentOffset = CGPoint(x: 0, y: 0)
        }
    }

Весь код должен выглядеть так:

import UIKit
import Foundation

class MainVC: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout, UIScrollViewDelegate{

    //MARK: - OUTLETS
    @IBOutlet weak var colVw: UICollectionView!
    @IBOutlet weak var pageControl: UIPageControl!
    
    //MARK: - GLOBAL VARIABLES
    var imageArray = ["place_canada","place_costa_rica","place_germany","place_greece","place_india"]
    var frame = CGFloat(0)
    
    //MARK: - UI VIEW CONTROLLER LIFE CYCLES
    override func viewDidLoad() {
        super.viewDidLoad()
        pageControl.numberOfPages = imageArray.count
    }

    //MARK: - DELEGATE METHODS
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return imageArray.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! DetailCollectionViewCell
        cell.imgView.image = UIImage(named: imageArray[indexPath.row])
        return cell
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        CGSize(width: UIScreen.main.bounds.width, height: 250)
    }
    
    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        let pageNumber = scrollView.contentOffset.x/scrollView.frame.size.width
        pageControl.currentPage = Int(pageNumber)
        if pageControl.currentPage == 1{
            frame = pageNumber
        }
    }
    
    func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
        if pageControl.currentPage == imageArray.count - 1{
            pageControl.currentPage = 0
            colVw.contentOffset = CGPoint(x: 0, y: 0)
        }
    }
}

Вот и все, дайте вашей демонстрации последний запуск.

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

Проверьте GitHub Repo для примера проекта. Удачного кодирования!

Большое спасибо за чтение. Я надеюсь, что у вас есть лучшее представление об этой теме, и вам было так же весело читать это, как и мне писать. С дополнительными вопросами и запросами обращайтесь по адресу [email protected].