CollectionView 单元格大小以适合 Label
CollectionView Cell size to fit Label
我已经设置了一个集合视图,使用它可以水平滚动并显示“companies”数组中的元素。
单元格会根据标签宽度自动调整大小。
我使用下面的代码和故事板约束来实现这一点:
class addTextStatus: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
var companies: [String] = ["Everyone","Limited", "Friends", "Only Me", "Test Length Cells", ]
@IBOutlet weak var collectionView: UICollectionView!
@IBOutlet weak var userImage: UIImageView!
override func viewDidLoad(){
collectionView.register(UINib.init(nibName: "statusCompanyCollectionView", bundle: nil), forCellWithReuseIdentifier: "cell4")
if let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
flowLayout.estimatedItemSize = CGSize(width: 1,height: 1)
}
userImage.layer.masksToBounds = false
userImage.layer.cornerRadius = userImage.frame.height/2
userImage.clipsToBounds = true
}
@IBOutlet weak var backButton: UIButton!
@IBAction func backButton(_ sender: Any) {
dismiss(animated: true, completion: nil)
}
override var preferredStatusBarStyle : UIStatusBarStyle {
return UIStatusBarStyle.default
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return self.companies.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell4 = collectionView.dequeueReusableCell(withReuseIdentifier: "cell4", for: indexPath) as! statusCompanyCollectionView
cell4.company.text = self.companies[indexPath.item]
return cell4
}
}
但是问题是,当我在标签后面添加一个 UIImage 视图并分配约束,规定它的大小和位置应与标签相同时,我会得到以下意外结果:
实际上我想实现以下目标:
我用来应用后面图像的约束如下:
有趣的是,当我使用 UIView 而不是 UIImage 视图时,它按预期工作,但是我确实需要在这种情况下使用图像视图。
为什么会发生这种情况,我该如何解决这个问题?
标签具有固有尺寸。
图像视图具有固有大小。
当您将标签和图像视图的宽度相等时,自动布局无法决定应更改哪一个的大小以满足约束。
您需要通过降低图像视图的 Content Hugging 和 Content Compression Resistance 优先级来消除歧义。
例如,您最终可能会得到 Label CH=251、CCR=750 和 Image View CH=240、CCR=740。
然后,在自动布局期间,您的标签的固有大小将获胜,图像视图将采用标签的大小。
普通视图没有固有大小,因此当您尝试该选项时没有歧义(默认情况下标签获胜)。如果您试图使两个标签的宽度相等,您会看到同样的歧义。
- 删除水平居中和垂直居中约束。
- 添加从
UIImageView
到 UILabel
的前导和尾随约束。
您只需添加从UIImageView
到UILabel
的四个约束(Leading,Trailing,Equalwidth,EqualHeight
)。
我已经设置了一个集合视图,使用它可以水平滚动并显示“companies”数组中的元素。
单元格会根据标签宽度自动调整大小。
我使用下面的代码和故事板约束来实现这一点:
class addTextStatus: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
var companies: [String] = ["Everyone","Limited", "Friends", "Only Me", "Test Length Cells", ]
@IBOutlet weak var collectionView: UICollectionView!
@IBOutlet weak var userImage: UIImageView!
override func viewDidLoad(){
collectionView.register(UINib.init(nibName: "statusCompanyCollectionView", bundle: nil), forCellWithReuseIdentifier: "cell4")
if let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
flowLayout.estimatedItemSize = CGSize(width: 1,height: 1)
}
userImage.layer.masksToBounds = false
userImage.layer.cornerRadius = userImage.frame.height/2
userImage.clipsToBounds = true
}
@IBOutlet weak var backButton: UIButton!
@IBAction func backButton(_ sender: Any) {
dismiss(animated: true, completion: nil)
}
override var preferredStatusBarStyle : UIStatusBarStyle {
return UIStatusBarStyle.default
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return self.companies.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell4 = collectionView.dequeueReusableCell(withReuseIdentifier: "cell4", for: indexPath) as! statusCompanyCollectionView
cell4.company.text = self.companies[indexPath.item]
return cell4
}
}
但是问题是,当我在标签后面添加一个 UIImage 视图并分配约束,规定它的大小和位置应与标签相同时,我会得到以下意外结果:
实际上我想实现以下目标:
我用来应用后面图像的约束如下:
有趣的是,当我使用 UIView 而不是 UIImage 视图时,它按预期工作,但是我确实需要在这种情况下使用图像视图。
为什么会发生这种情况,我该如何解决这个问题?
标签具有固有尺寸。 图像视图具有固有大小。
当您将标签和图像视图的宽度相等时,自动布局无法决定应更改哪一个的大小以满足约束。
您需要通过降低图像视图的 Content Hugging 和 Content Compression Resistance 优先级来消除歧义。
例如,您最终可能会得到 Label CH=251、CCR=750 和 Image View CH=240、CCR=740。
然后,在自动布局期间,您的标签的固有大小将获胜,图像视图将采用标签的大小。
普通视图没有固有大小,因此当您尝试该选项时没有歧义(默认情况下标签获胜)。如果您试图使两个标签的宽度相等,您会看到同样的歧义。
- 删除水平居中和垂直居中约束。
- 添加从
UIImageView
到UILabel
的前导和尾随约束。
您只需添加从UIImageView
到UILabel
的四个约束(Leading,Trailing,Equalwidth,EqualHeight
)。