如何创建垂直居中的UICollectionView?

时间:2018-06-06 10:17:25

标签: swift3 uicollectionview xcode9 uicollectionviewlayout

我必须创建垂直居中的集合视图。我正在搜索谷歌没有按要求得到任何具体的答案。

我的要求是如果集合视图中有11个项目,每行显示3个项目,那么在第4行之后只有两个项目存在。这两个项目显示在屏幕的中心位置。但是这两个细胞之间的间距与其他细胞相同。

(11%3)=最后一个单元格的2个项目。总行数= 4

同样的情况是集合视图中有7个项目。如果每行显示3个项目,则在最后一行中只有一个项目存在。因此,该项目显示在屏幕的中央。

(7%3)=最后一个单元格中的1个项目。总行数= 3

我正在使用UICollectionViewDelegateFlowLayout委托来设计这种类型的布局。在UICollectionViewDelegateFlowLayout委托中有3种方法。我很困惑这种设计使用哪种方法。我正在尝试这个,但没有得到具体的结果。以下是我的代码。

extension  CollectionViewController: UICollectionViewDelegate,UICollectionViewDataSource{
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 11
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionCell", for: indexPath) as! CollectionCell
    return cell
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {

}}

extension CollectionViewController: UICollectionViewDelegateFlowLayout {

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

    let elements_count = 11.0
    let cellCount = CGFloat(elements_count)
    let reminderCount = cellCount.truncatingRemainder(dividingBy: itemsPerRow) //I'm getting 2 item is remider at last index. How to use this??

    //If the cell count is zero, there is no point in calculating anything.
    if cellCount > 0 {
        let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout
        let cellWidth = flowLayout.itemSize.width + flowLayout.minimumInteritemSpacing

        //20.00 was just extra spacing I wanted to add to my cell.
        let totalCellWidth = cellWidth*cellCount + 20.00 * (cellCount-1)
        let contentWidth = collectionView.frame.size.width - collectionView.contentInset.left - collectionView.contentInset.right

        if (totalCellWidth < contentWidth) {
            //If the number of cells that exists take up less room than the
            //collection view width... then there is an actual point to centering them.

            //Calculate the right amount of padding to center the cells.
            let padding = (contentWidth - totalCellWidth) / 2.0
            return UIEdgeInsetsMake(0, padding, 0, padding)
        } else {
            //Pretty much if the number of cells that exist take up
            //more room than the actual collectionView width, there is no
            // point in trying to center them. So we leave the default behavior.
            return UIEdgeInsetsMake(0, 40, 0, 40)
        }
    }

    return UIEdgeInsets.zero

}}

我已将图像附加到此问题以便更好地理解。

enter image description here

如果有人在集合视图中分享如何管理它的想法,将会非常有帮助。或者是否存在一些用于此类功能的自定义库。

提前致谢。

0 个答案:

没有答案