无法使用 AutoLayout 设置 UICollectionViewCell 的宽度 [英] Unable to set width of UICollectionViewCell with AutoLayout

问题描述

我有一个带有动态高度单元格的集合视图(基于可能的多行标签和内部的文本视图)，当我跨越多行时，它可以完美地适应高度.但是，当文本只有一个单词或它没有覆盖整个屏幕宽度时，单元格会根据需要设置宽度，从而导致单元格彼此相邻而不是彼此下方.

I have a Collection View with cells of dynamic height (based on a possibly multiline label and a textview inside), which adapts in height perfectly when I span it over multiple lines. However, when the text is just one word or it doesn't cover the entire screen width, the cell is just as wide as needed to be, resulting in cells next to each other instead of underneath each other.

在textview中查看不同长度文本的结果.

但是，我希望单元格位于彼此下方，想想 Instagram 或 Twitter 的那种观点.我显然需要为单元格设置宽度约束，使其等于屏幕的整个宽度，但我似乎无法找到如何做到这一点.

However, I want the cells to be underneath each other, think Instagram or Twitter kind of view. I obviously need to set a width constraint for the cell so it is equal to the entire width of the screen, but I can't seem to find how to do this.

我在我的 AppDelegate 中使用 FlowLayout 和一个估计的项目大小:

I use FlowLayout with an estimatedItemSize in my AppDelegate:

let layout = UICollectionViewFlowLayout()
window?.rootViewController = UINavigationController(rootViewController: HomeController(collectionViewLayout: layout))

layout.estimatedItemSize = CGSize(width: 414, height: 150)

我还在 viewDidLoad 中为 collectionView 设置了约束，因此 collectionView 占据屏幕的整个宽度和高度:

I also set constraints for the collectionView in viewDidLoad, so the collectionView takes on the entire width and height of the screen:

collectionView?.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
collectionView?.leftAnchor.constraint(equalTo: self.view.leftAnchor).isActive = true
collectionView?.rightAnchor.constraint(equalTo: self.view.rightAnchor).isActive = true
collectionView?.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true

我对标签和文本视图的约束如下所示，还允许宽度采用所需的大小(因此它不是固定的):

My constraints for the label and the textview look like this, also allowing the width to take on the size required (so it's not fixed):

// vertical constraints usernameLabel & commentTextView
addConstraintsWithFormat(format: "V:|-16-[v0]-2-[v1]-16-|", views: usernameLabel, commentTextView)

// horizontal constraints usernameLabel
addConstraintsWithFormat(format: "H:|-16-[v0]-16-|", views: usernameLabel)

// horizontal constraints commentTextView
addConstraintsWithFormat(format: "H:|-16-[v0]-16-|", views: commentTextView)

在我看来，所有这些对于完成这项工作都是必不可少的.但是，在我看来，我还没有设置宽度约束来完成这项工作.我试图在 collectionView(等于 view.widthAnchor)上添加一个 widthAnchor，这没有用:

All this is, according to me, essential to make this work. However, it seems to me that I have yet to set a width constraint to make this work. I have tried to add a widthAnchor on the collectionView (equal to view.widthAnchor), this didn't work:

collectionView?.widthAnchor.constraint(equalTo: self.view.widthAnchor).isActive = true

我也尝试在 sizeForItemAt 方法中设置宽度，但这也不起作用:

I have also tried to set the width in the sizeForItemAt method, but this also didn't work:

return CGSize(width: view.frame.width, height: 100)

现在，我正在检查宽度以查看哪里出错了，但我得到了我需要的结果，我想:

Now, I am checking the width to see where it goes wrong, but I get the result I would need, I think:

print("collectionView width: ", collectionView?.frame.size.width)
print("collectionView height: ", collectionView?.frame.size.height)

print("screen width: ", UIScreen.main.bounds.width)
print("screen height: ", UIScreen.main.bounds.height)

结果:

collectionView width:  Optional(414.0)
collectionView height:  Optional(736.0)
screen width:  414.0
screen height:  736.0

我对如何前进没有想法.我浏览过的所有与此问题相关的文章或帖子要么明确计算高度，要么使用我上面提到的两种解决方案.

I am out of ideas on how to move forward. All articles or posts I have gone through related to this issue either explicitly calculate the height or use the two solutions I have mentioned above.

对我做错了什么有任何想法吗?

Any ideas on what I am doing wrong?

推荐答案

确保在应用中添加此协议

UICollectionViewDelegate
UICollectionViewDataSource
UICollectionViewDelegateFlowLayout

请使用以下方法

    extension YourViewController: UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout {

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

    }

这篇关于无法使用 AutoLayout 设置 UICollectionViewCell 的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！