我试图实现这个UICollectionView布局

Question

这是我迄今为止在UICollectionView

中取得的成就

这是我的UICollectionViewDelegate功能

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

    if indexPath.item % 2 == 0{

        return CGSize(width: collectionView.bounds.size.width, height: 97 * 1.5)

    }else{

        return CGSize(width: collectionView.bounds.size.width/2.0, height: 97)

    }
}

我正在寻找的是这种模式......

或者至少if indexPath.item % 2 == 0然后创建一个单元格布局else 2个单元格布局。

  

我的滚动方向只是垂直

另外，这是我删除UICollectionViewDelegateFlowLayout功能时获得的视图。

每行2个细胞。这是我需要的，但每行的宽度不同，如目标布局。

这是我的故事板原型单元

Answer 1

你走在正确的轨道上，但你的逻辑很疯狂：

public function beforeFilter() {
    parent::beforeFilter();
    $this->layout = 'bootstrap';
    $this->Auth->allow('index');
}

public function index() {
}

为了将两个单元格放入一行，您需要两个单元格等于或小于行的总宽度，即小于func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { if indexPath.item % 2 == 0{ return CGSize(width: collectionView.bounds.size.width, height: 97 * 1.5) }else{ return CGSize(width: collectionView.bounds.size.width/2.0, height: 97) } } 。但在您的代码中，单元格的宽度始终为collectionView.bounds.size.width/2.0或更大。片刻的想法将揭示在这种情况下绝对没有办法将多个项目连成一排。

换句话说：你已经展示了输出布局（集合视图实际上是什么样子），并且你已经展示了collectionView.bounds.size.width/2.0的实现，前者正是我所期望的鉴于后者，所以很难看出问题是什么。集合视图正在尽其所能地完成您所要做的事情。

Answer 2

感谢matt＆amp; Larme我理解我的逻辑中出了什么问题，这就是我如何解决我的问题。

        let width = collectionView.bounds.size.width / 1.01  //THANKS TO MATT

        //THANKS TO LARME
        let x = indexPath.item % 5
        switch x {
        case 0:
            return CGSize(width: collectionView.bounds.size.width, height: 97 * 1.5)
        case 1:
            return CGSize(width: width * 1/4, height: 97)
        case 2:
            return CGSize(width: width * 3/4, height: 97)
        case 3,4:
            return CGSize(width: width * 1/2, height: 97)
        default:
            return CGSize(width: collectionView.bounds.size.width, height: 97 * 1.5)

        }