【问题标题】:Collection View cells with full-width and dynamic height具有全宽和动态高度的集合视图单元格
【发布时间】:2018-09-23 15:23:27
【问题描述】:

我正在尝试创建帖子供稿,就像您在 Twitter 或 Facebook 应用程序中看到的那样。据我了解,我应该使用Collection View,所以我设置了一个。

但是现在,我对如何使单元格全宽和单元格高度动态感到困惑,因为单元格内的文本可以从只有 1 行到几十行不等。

我该怎么做呢?

【问题讨论】:

  • 如果你希望你的单元格是屏幕的宽度,你应该看UITableView而不是UICollectionView
  • @AshleyMills 根据我的阅读,UICollectionViewUITableView 有很多优势,比如动画。这是真的吗?

标签: ios swift


【解决方案1】:

您可能需要UICollectionViewFlowLayout 实例

let frame: CGRect = ...
let layout = UICollectionViewFlowLayout()
layout.estimatedItemSize = CGSize.zero
self.collectionView = UICollectionView(frame: someFrame, collectionViewLayout: layout)

关于estimatedItemSize

此属性的默认值为 CGSizeZero。将其设置为任何其他值会导致集合视图使用单元格的 preferredLayoutAttributesFitting(_:) 方法查询每个单元格的实际大小。如果所有单元格的高度相同,请使用 itemSize 属性而不是此属性来指定单元格大小。

然后你可以设计你的 UICollectionViewCell 并在 awakeFromNib() 添加一个内部约束来设置精确的宽度。

然后在cell for item at index path 方法中你可以下一步:

let cell = ... as? MyCustomCell
cell?.load(model: someModel, widthConstraint: collectionView.bounds.width)

重要的是处理旋转和分屏模式下的视图大小变化:

override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
    super.viewWillTransition(to: size, with: coordinator)
    coordinator.animate(alongsideTransition: { _ in
        self.collectionView.collectionViewLayout.invalidateLayout()
    }) { _ in }
}

【讨论】:

    【解决方案2】:

    首先你需要的是UITextView. 确保它的滚动被禁用,并相应地设置文本内容。为此打开 Interface Builder,选择文本视图,将有一个名为“滚动视图”的部分。取消选中启用滚动。这非常重要,因此 UITextView 可以跳过滚动并尽可能多地拉伸内容。

    视图控制器:

    其次,在您的 ViewController 中,您需要处理 SubView 布局更改。当进行旋转或 ViewController 的任何大小的视图发生更改时,都会调用此方法。

     override func viewDidLayoutSubviews() {
            super.viewDidLayoutSubviews()
            if let layout  = self.collection.collectionViewLayout as? UICollectionViewFlowLayout {
                layout.estimatedItemSize = CGSize(width: self.collection.frame.size.width-layout.sectionInset.left-layout.sectionInset.right-self.collection.contentInset.left - self.collection.contentInset.right, height: 100.0)
    
            }
        }
    

    UICollectionViewCell 子类:

    一旦设置了 esitmatedItemSize,就可以提供 PreferredLayoutAttributesFitting。您必须重写 UICollectionViewCell 子类。

    override func preferredLayoutAttributesFitting(_ layoutAttributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributes {
    
            layoutAttributes.size =   self.getCellHeight()
    
            return layoutAttributes
        }
    
        func getCellHeight()->CGSize{
    
            self.setNeedsDisplay()
            self.layoutIfNeeded()
    
            let size = self.contentView.systemLayoutSizeFitting(UILayoutFittingExpandedSize)
            return size
        }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-03-08
      • 1970-01-01
      • 2020-11-02
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多