CollectionViewLayout高度

Question

我想使用collectionView为UICollectionViewDelegateFlowLayout的每一行定制大量的版面尺寸，如下所示：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let width = view.frame.width
        if indexPath.row == 0 {
            return CGSize(width: width, height: 300)
        }else if indexPath.row == 1 {
            return dynamicSize // i want this size wrap its content
        }
        return CGSize(width: width, height:100)
}

我想要可以将其内容包装成某行的dynamicSize。 有谁知道怎么做？

这是我希望动态大小包装它的单元格的图像。

Answer 1

使用此委托方法。这对我有用。

 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
       return CGSize(width: Your cellWidth, height: YourcellHeight);
    }

Answer 2

我建议你使用tableview而不是collectionview。这对你来说很容易。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="row portfolio"> <div class="col-sm-12"> <h2>Portfolio</h2> </div> <div class="col-lg-4 col-sm-6 portfolio-item"> <div class="card h-100"> <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a> <div class="card-body d-flex flex-column"> <h4 class="card-title">Project One</h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p> <a href="#" class="card-link text-info mt-auto text-center">View CodePen</a> </div> </div> </div> <div class="col-lg-4 col-sm-6 portfolio-item"> <div class="card h-100"> <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a> <div class="card-body d-flex flex-column"> <h4 class="card-title">Project Two</h4> <p class="card-text ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p> <a href="#" class="card-link text-info mt-auto text-center">View CodePen</a> </div> </div> </div> <div class="col-lg-4 col-sm-6 portfolio-item"> <div class="card h-100"> <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a> <div class="card-body d-flex flex-column"> <h4 class="card-title">Project Three</h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quisquam, error quod sed cumque, odio distinctio velit nostrum temporibus necessitatibus et facere atque iure perspiciatis mollitia recusandae vero vel quam!</p> <a href="#" class="card-link text-info mt-auto text-center">View CodePen</a> </div> </div> </div> <div class="col-lg-4 col-sm-6 portfolio-item"> <div class="card h-100"> <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a> <div class="card-body d-flex flex-column"> <h4 class="card-title">Project Four</h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p> <a href="#" class="card-link text-info mt-auto text-center">View CodePen</a> </div> </div> </div> <div class="col-lg-4 col-sm-6 portfolio-item"> <div class="card h-100"> <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a> <div class="card-body d-flex flex-column"> <h4 class="card-title">Project Five</h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p> <a href="#" class="card-link text-info mt-auto text-center">View CodePen</a> </div> </div> </div> <div class="col-lg-4 col-sm-6 portfolio-item"> <div class="card h-100"> <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a> <div class="card-body d-flex flex-column"> <h4 class="card-title">Project Six</h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque earum nostrum suscipit ducimus nihil provident, perferendis rem illo, voluptate atque, sit eius in voluptates, nemo repellat fugiat excepturi! Nemo, esse.</p> <a href="#" class="card-link text-info mt-auto text-center">View CodePen</a> </div> </div> </div> </div>返回cellForHeight。它将计算您的细胞高度本身并相应地进行调整。

注意：确保您的约束正确。

  

编辑：使用带有两列的collectionview。

UITableViewAutomaticDimension

<强>输出：