UICollectionView горизонтальное разбиение по страницам с интервалом между страницами

Я ищу способ заменить родную горизонтальную подкачку UIPageViewController на UICollectionView.

пока что я сделал следующее:

let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
layout.itemSize = collectionView.frame.size
layout.minimumLineSpacing = 0
layout.minimumInteritemSpacing = 10

collectionView.setCollectionViewLayout(layout, animated: false)
collectionView.isPagingEnabled = true
collectionView.alwaysBounceVertical = false

это отлично работает, и я получаю эффект горизонтального разбиения по страницам.

Теперь я хочу добавить горизонтальное пространство между страницами (как вы сделаете с UIPageViewControllerOptionInterPageSpacingKey на UIPageViewController)

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


ios uikit uicollectionview uipageviewcontroller uicollectionviewlayout
person Eyal    schedule 27.02.2017    source источник

Ответы (2)


arrow_upward
27
arrow_downward

Решение первое:

  1. collectionView.isPagingEnabled = false
  2. добавьте minimumLineSpacing для расстояния между страницами
  3. реализовать targetContentOffsetForProposedContentOffset:withScrollingVelocity:, чтобы переместить contentOffset на ближайшую страницу. Вы можете рассчитать страницу с помощью простой математики на основе ваших itemSize и minimumLineSpacing, но для правильного расчета может потребоваться немного усилий.

Решение второе:

  1. collectionView.isPagingEnabled = true
  2. добавьте minimumLineSpacing для расстояния между страницами
  3. размер страницы основан на границах collectionView. Поэтому сделайте collectionView больше, чем screenSize. Например, если у вас есть minimumLineSpacing из 10, установите рамку collectionView на {0,-5, ширина+10, высота}.
  4. установите contentInset равным minimumLineSpacing, чтобы первый и последний элементы отображались правильно.
person Jon Rose    schedule 27.02.2017
comment
но тогда будет трудно дублировать все поведение пейджинга - person Eyal; 27.02.2017
comment
Спасибо за совет, удалось сделать это, сопоставив вставки, как вы сказали, minimumLineSpacing = 20 и sectionInset = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 10) в CollectionViewLayout - person raulriera; 14.10.2017
comment
Вот что я пытаюсь сделать: у меня есть ASPagerNode с тремя страницами. Я пытаюсь иметь минимальный межстрочный интервал 10 или 20 между страницами. Затем каждая страница представляет собой ASCollectionNode с 3 столбцами. Я пытаюсь сделать равные интервалы между тремя столбцами. Мне удалось правильно разместить 3 столбца, но страницы немного смещены вправо, и я изо всех сил пытаюсь это исправить. - person Kugutsumen; 17.01.2019

arrow_upward
3
arrow_downward

  • По умолчанию минимальное значение LineSpacing UICollectionViewFlowLayout равно 10,0, когда элемент collectionView заполнен по горизонтали (itemSize.width = collectionView.bounds.width) и collectionView включено разбиение на страницы, больше нуля 'minimumLineSpacing' вызовет непреднамеренную производительность: начинать со второй страницы, каждую страницу имеет пробел, который будет накапливаться по номеру страницы.
  • Кажется, мы можем расширить ширину collectionView с помощью «minimumLineSpacing», чтобы решить эту проблему. Но практика сводит на нет это решение: когда есть две или более страниц, collectionView не будет давать последней «lineSpacing», поэтому «contentSize» недостаточно, чтобы полностью отобразить содержимое этой страницы, что означает, что «минимум LineSpacing» был 10,0 , конец последней страницы выйдет за пределы contentSize collectionView на 10,0.
  • Наконец, я использую следующее простое решение для вставки поля между каждым элементом (например, преформа UIScrollView): расширить ширину каждого collectionViewItem на фиксированное значение «pageSpacing» (например, 10,0) и увеличить ширину collectionView на то же значение. И не забывайте, что при компоновке подвидов collevtionViewCell есть дополнительный интервал, который не предназначен для отображения реального контента.

Вот код, написанный на Swift 3.1, я уверен, что он вам понятен:

let pageSpacing: CGFloat = 10

class ViewController: UITableViewController {
     override func viewDidLoad() {
        super.viewDidLoad()

        let layout = UICollectionViewFlowLayout()
        layout.itemSize                = CGSize(width: view.frame.width + pageSpacing, height: view.frame.height)
        layout.scrollDirection         = .horizontal
        layout.minimumInteritemSpacing = 0
        layout.minimumLineSpacing      = 0

        let frame = CGRect(x: 0, y: 0, width: view.frame.width + pageSpacing, height: view.frame.height)
        let collectionView = UICollectionView(frame: frame, collectionViewLayout: layout)
        view.addSubview(collectionView)
    }
}

class MyCell: UICollectionViewCell {
    var fullScreenImageView = UIImageView()
    override func layoutSubviews() {
        super.layoutSubviews()
        fullScreenImageView.frame = CGRect(x: 0, y: 0, width: frame.width - pageSpacing, height: frame.height)
    }
}

Надеюсь, это поможет вам.

person Rick    schedule 17.07.2017