Как центрировать горизонтально ячейки UICollectionView?

Я провел некоторое исследование, но я не смог найти ни одного примера кода о том, как центрировать ячейки в UICollectionView по горизонтали.



вместо того, чтобы первая ячейка была такой X00, Я хочу, чтобы это было так 0X0. есть ли способ сделать это?



EDIT:



визуализировать то, что я хочу:



enter image description here



Мне нужно, чтобы он выглядел как версия B, когда в CollectionView есть только один элемент. Когда я получил более одного элемента, то он должен быть похож на версию A, но с большим количеством элементов.



на данный момент это выглядит как версия A, когда у меня есть только 1 элемент, и мне интересно, как я могу сделать его похожим на B.



Спасибо за помощь!

735   11  

11 ответов:

не очень хорошая идея использовать библиотеку, если ваша цель-только это, т. е. центрировать выравнивание.

лучше вы можете сделать это простое вычисление в вашей функции collectionViewLayout.

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {

    let totalCellWidth = CellWidth * CellCount
    let totalSpacingWidth = CellSpacing * (CellCount - 1)

    let leftInset = (collectionViewWidth - CGFloat(totalCellWidth + totalSpacingWidth)) / 2
    let rightInset = leftInset

    return UIEdgeInsetsMake(0, leftInset, 0, rightInset)
}
125  
2017-03-29 23:12:10

swift 3 

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

        let totalCellWidth = 80 * collectionView.numberOfItems(inSection: 0)
        let totalSpacingWidth = 10 * (collectionView.numberOfItems(inSection: 0) - 1)

        let leftInset = (collectionView.layer.frame.size.width - CGFloat(totalCellWidth + totalSpacingWidth)) / 2
        let rightInset = leftInset

        return UIEdgeInsetsMake(0, leftInset, 0, rightInset)

    }

Не забудьте добавить протокол

UICollectionViewDelegateFlowLayout
26  
2017-06-26 12:08:13

Я использую KTCenterFlowLayout для этого, и он прекрасно работает. Это пользовательский подкласс UICollectionViewFlowLayout Это центрирует клетки, как вы хотите. (Примечание: это не тривиальная вещь, чтобы решить, разместив некоторый код, поэтому я ссылаюсь на проект GitHub!)

18  
2015-12-14 18:11:45

попробуйте это для Swift 4

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        let cellWidth : CGFloat = 165.0

        let numberOfCells = floor(self.view.frame.size.width / cellWidth)
        let edgeInsets = (self.view.frame.size.width - (numberOfCells * cellWidth)) / (numberOfCells + 1)

        return UIEdgeInsetsMake(15, edgeInsets, 0, edgeInsets)
    }

добавить cellWidth вместо 165.0

15  
2017-11-01 16:15:44

объективная-C версия ответ Даршана Пателя:

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(nonnull UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
    CGFloat totalCellWidth = kItemWidth * self.dataArray.count;
    CGFloat totalSpacingWidth = kSpacing * (((float)self.dataArray.count - 1) < 0 ? 0 :self.dataArray.count - 1);
    CGFloat leftInset = (self.bounds.size.width - (totalCellWidth + totalSpacingWidth)) / 2;
    CGFloat rightInset = leftInset;
    UIEdgeInsets sectionInset = UIEdgeInsetsMake(0, leftInset, 0, rightInset);
    return sectionInset;
}
9  
2018-01-01 14:31:21

немного изменив ответ @ Safad Funy, это то, что сработало для меня в последней версии Swift & iOS. В этом случае я хотел, чтобы ширина ячеек составляла треть размера представления коллекции.

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

  let totalCellWidth = Int(collectionView.layer.frame.size.width) / 3 * collectionView.numberOfItems(inSection: 0)
  let totalSpacingWidth = (collectionView.numberOfItems(inSection: 0) - 1)

  let leftInset = (collectionView.layer.frame.size.width - CGFloat(totalCellWidth + totalSpacingWidth)) / 2
  let rightInset = leftInset

  return UIEdgeInsetsMake(0, leftInset, 0, rightInset)
}
3  
2017-05-05 18:33:37

Swift 4

extension ViewController: UICollectionViewDelegateFlowLayout {

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

        let cellWidth: CGFloat = 170.0 // Your cell width

        let numberOfCells = floor(view.frame.size.width / cellWidth)
        let edgeInsets = (view.frame.size.width - (numberOfCells * cellWidth)) / (numberOfCells + 1)

        return UIEdgeInsetsMake(0, edgeInsets, 0, edgeInsets)
    }

 }
2  
2018-05-05 01:10:39

вы можете использовать это расширение (Swift 4).

Он может центрировать ячейки, если вы collectionView есть layout.estimatedItemSize = UICollectionViewFlowLayoutAutomaticSize.

Он работает с любым размером ячеек и работает отлично, когда scrollDirection = .horizontal

public extension UICollectionView {
    func centerContentHorizontalyByInsetIfNeeded(minimumInset: UIEdgeInsets) {
        guard let layout = collectionViewLayout as? UICollectionViewFlowLayout,
            layout.scrollDirection == .horizontal else {
                assertionFailure("\(#function): layout.scrollDirection != .horizontal")
                return
        }

        if layout.collectionViewContentSize.width > frame.size.width {
            contentInset = minimumInset
        } else {
            contentInset = UIEdgeInsets(top: minimumInset.top,
                                        left: (frame.size.width - layout.collectionViewContentSize.width) / 2,
                                        bottom: minimumInset.bottom,
                                        right: 0)
        }
    }
}


final class Foo: UIViewController {
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        collectionView.centerContentHorizontalyByInsetIfNeeded(minimumInset: yourDefaultInset)
    }
}

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

2  
2018-08-08 11:42:14

вы можете попробовать мое решение работает нормально,

func refreshCollectionView(_ count: Int) {
    let collectionViewHeight = collectionView.bounds.height
    let collectionViewWidth = collectionView.bounds.width
    let numberOfItemsThatCanInCollectionView = Int(collectionViewWidth / collectionViewHeight)
    if numberOfItemsThatCanInCollectionView > count {
        let totalCellWidth = collectionViewHeight * CGFloat(count)
        let totalSpacingWidth: CGFloat = CGFloat(count) * (CGFloat(count) - 1)
        // leftInset, rightInset are the global variables which I am passing to the below function
        leftInset = (collectionViewWidth - CGFloat(totalCellWidth + totalSpacingWidth)) / 2;
        rightInset = -leftInset
    } else {
        leftInset = 0.0
        rightInset = -collectionViewHeight
    }
    collectionView.reloadData()
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    return UIEdgeInsetsMake(0, leftInset, 0, rightInset)
}
0  
2017-03-16 08:23:28

принятый ответ является правильным ответом, но если ваш totalCellWidth меньше CollectionView ' s width, но просто для защиты от этого вы можете сделать, как показано ниже.

if (leftInset > 0) {
     return UIEdgeInsetsMake(0, leftInset, 0, rightInset)
  } else {
     return UIEdgeInsetsMake(0, 10, 0, 10)
}
0  
2018-09-23 06:44:51

Я думаю , что вам нужно центрировать ячейку, поэтому вместо использования collectionView мне бы хотелось, чтобы UITableView был очень полезен. Просто используйте UIViewController и поместите два UIViews спереди и сзади и поместите UITableView в середине Надеюсь, это поможет

-3  
2015-12-14 17:23:47

Comments

    Ничего не найдено.
Click here to cancel reply.