具有基于约束的collectionView的不同单元格大小

时间:2016-10-30 14:51:54

标签: ios swift uicollectionview

我创建了一个collectionView,其中我有3个单元格,第一个单元格必须填充第一行,第三行应该填充第二行但是我似乎无法弄清楚如何执行此操作,因为每次我尝试在sizeForItemAt中进行,我得到了collectionView框架为(0, 0, 0, 0)

这就是我现在所拥有的

class FlowLayout: UICollectionViewFlowLayout {

    var numberOfCells: Int!

    override init() {
        super.init()
        setupLayout()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupLayout()
    }

    func setupLayout() {
        minimumInteritemSpacing = 1
        minimumLineSpacing = 1

    }

    override var itemSize: CGSize {
        set {

        }
        get {
            let numberOfColumns: CGFloat = 2

            let itemWidth = (self.collectionView!.frame.width - (numberOfColumns - 1)) / numberOfColumns
            let itemHeight = self.collectionView!.frame.height / 2


            return CGSize(width: itemWidth, height: itemHeight)
        }
    }


}

我想要的插图

在我的视图中设置collectionView

func createCollectionView() {
    let layout = FlowLayout()
    layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    layout.numberOfCells = 2



    collectionView = UICollectionView(frame: CGRect.zero, collectionViewLayout: layout)
    collectionView.dataSource = self
    collectionView.delegate = self
    collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "Cell")
    collectionView.backgroundColor = UIColor.white
    collectionView.isScrollEnabled = false
    self.topWrapperView.addSubview(collectionView)


    collectionView.snp.makeConstraints { (make) -> Void in

        make.left.equalTo(topWrapperView).offset(0)
        make.top.equalTo(topWrapperView).offset(0)
        make.bottom.equalTo(topWrapperView).offset(0)
        make.right.equalTo(topWrapperView).offset(0)
    }
}

enter image description here

1 个答案:

答案 0 :(得分:2)

我有类似的情况,除了它是第一个我想在第一行中有2个单元格的单元格,之后每行有3个单元格。在图像的集合视图中用于主要配置文件pic和bio。我使用sizeForItemAtIndexPath和默认的UICollectionViewDelegateFlowLayout成功实现了它。 以下是适合您情况的内容:

 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

let insets = collectionView.contentInset
let collectionViewWidth = collectionView.frame.width - (insets.left + insets.right + 1)
let collectionViewHeight = collectionView.frame.height - (insets.top + insets.bottom)

  switch indexPath.row {
   case 0, 1:

   return CGSize(width: collectionViewWidth / 2, height: collectionViewHeight / 2)

    default:
    return CGSize(width: collectionViewWidth, height: collectionViewHeight / 2)
  }
}

您可以更改高度除以得到所需高度的内容。

这是我为我的情况所写的,我想发布它可以帮助你或其他任何读它的人。如果希望它随旋转而改变,请使用viewWillTransition并使用didSet侦听器设置bool标志:

 var isPortraitOrientation: Bool = true {
   didSet {
 if oldValue != isPortraitOrientation {
    collectionView?.collectionViewLayout.invalidateLayout()
     }
   }
} 

 override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
   super.viewWillTransition(to: size, with: coordinator)
  isPortraitOrientation = (size.width - size.height) <= 0 ? true : false
}


 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

    let insets = collectionView.contentInset
    let collectionViewWidth = collectionView.frame.width - (insets.left + insets.right + 1)
    let collectionViewHeight = collectionView.frame.height - (insets.top + insets.bottom)

    switch indexPath.row {
    case 0:

        if textViewSelected {
            return isPortraitOrientation ? CGSize(width: collectionViewWidth, height: collectionViewHeight / 2) : CGSize(width: collectionViewWidth, height: collectionViewWidth / 3)
        } else {
            return isPortraitOrientation ? CGSize(width: collectionViewWidth / 2, height: collectionViewWidth / 2) : CGSize(width: collectionViewWidth / 2, height: collectionViewHeight / 1.5)
        }
    case 1:
        return isPortraitOrientation ? CGSize(width: collectionViewWidth / 2, height: collectionViewWidth / 2) : CGSize(width: collectionViewWidth / 2, height: collectionViewHeight / 1.5)

    default:
        return isPortraitOrientation ? CGSize(width: collectionViewWidth / 3, height: collectionViewWidth / 3) : CGSize(width: collectionViewWidth / 5, height: collectionViewWidth / 5)
    }
}

编辑:

基于您的附加代码,而不是为collectionView框架执行CGRect.zero使用topWrapperView.bounds。