如何根据 swift 中的标签文本更改 CollectionView 单元格宽度
How to change CollectionView cell width according to label text in swift
我需要像这样根据其标签文本更改 collectionview 单元格宽度
为此我给了 collectionview 约束
top, leading, trailing, = 10 height = 80
在单元格中,我在 uiview 中放置了标签,我放置了 uiview,因为我需要给角半径
和代码
class SearchFilterVC: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
var textArray = ["hbdhwebhj", "behgwfhjewgbkfjbe", "hbhjs", "bdhsbfhegu", "gwdgyqwuguq"]
@IBOutlet weak var collectionView: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
layout.minimumInteritemSpacing = 0
layout.minimumLineSpacing = 5
self.collectionView.collectionViewLayout = layout
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return textArray.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "SearchFilterCollectionViewCell", for: indexPath as IndexPath) as! SearchFilterCollectionViewCell
cell.textLabel.text = textArray[indexPath.row]
return cell
}
}
编辑:
o/p
如何解决这个问题,请帮忙代码
collectionView 中的所有项目都采用完全相同的大小,因为您已为 collectionView 的流布局指定 layout.itemSize
移除layout.itemSize = CGSize(width: self.collectionView.frame.size.width / 2, height: 80)
代码中的其他问题:
layout.invalidateLayout()
在 ViewDidLoad
中是不必要的
if let layout = self.collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
设置 minimumInteritemSpacing
和 minimumLineSpacing
是不必要的,在它上面的语句中你已经创建了 let layout = UICollectionViewFlowLayout()
为什么不简单地设置 minimumInteritemSpacing
minimumLineSpacing
本身就在那里?为什么要使用额外的 if let
?
随便写
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
layout.minimumInteritemSpacing = 0
layout.minimumLineSpacing = 5
self.collectionView.collectionViewLayout = layout
您无需指定项目大小,集合视图流布局本质上设置为水平,因此默认情况下每个项目将采用与集合视图高度相同的高度,如果单元格内只有一个标签,并且如果您正确设置了自动布局约束,标签的固有内容大小将确保单元格获得适当的宽度
无论出于何种原因,如果您决定将标签包装在 UIView
逻辑中,只要您正确设置标签的自动布局约束,label 的固有内容大小将设置 containerView 的宽度和这将反过来有助于适当地设置单元格的宽度,
这里单元格的背景颜色是红色,容器视图是橙色,标签没有背景颜色,我在单元格和视图之间添加了前导和尾随间距为 10,标签和容器视图有前导和尾随 space 为 5
编辑:
由于 OP 要求容器视图、标签和单元格之间的约束,我正在更新答案以反映相同的内容
很明显
- - - - - - - - - - - - Cell - - - - - - - - - - - - - - - -
| - - - - - - - - Container View - - - - - - - - |
| | |5 | |
|-10- |-5- Label -5-| -10- |
| | |5 | |
| - - - - - - - - - - - - - - - - - - - - - - - - - |
| |
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
如果需要,您可以在单元格和容器之间添加顶部和底部约束,但我保持容器视图垂直居中于单元格
如何运作?
Label 具有从设置给它的文本中获取的固有内容大小,View 确实根据其子视图的大小获取其固有大小,因为容器视图中没有子视图,它从中获取其大小label 并且显然无论大小 label returns 视图将宽度加 10,高度加 10(5 个前导,5 个尾随,5 个顶部和 5 个底部)最终单元格从其子视图中获取其大小,因为只有一个子视图(容器视图)它从容器视图获取宽度,对于高度,它从集合视图获取高度(因为子视图没有提供足够的数据来计算它的高度)
并且如果由于某种原因(可能是因为您有意/无意地设置了一些其他约束,例如在容器视图上添加宽度约束)标签没有正确采用其固有内容大小,您可以随时设置 setContentCompressionResistancePriority
and setContentHuggingPriority
on label to high in your cell's awaken from nib
override func awakeFromNib() {
super.awakeFromNib()
self.label.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
self.label.setContentHuggingPriority(.defaultHigh, for: .horizontal)
}
虽然在通常情况下不需要这样做,但如果需要这样做以获得正确的固有大小,那么如果我处在您的位置,则必须有一些其他限制阻止标签采用其正确的隐式固有内容大小宁愿先检查并修复它。尽管如此,无法使用您提供的有限代码进一步调试。
编辑 2:
没有意识到 OP 正在使用 UICollectionViewFlowLayout
的自定义实例并且没有将 estimatedItemSize
属性 设置为 automaticSize
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
layout.minimumInteritemSpacing = 0
layout.minimumLineSpacing = 5
layout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
self.collectionView.collectionViewLayout = layout
我需要像这样根据其标签文本更改 collectionview 单元格宽度
为此我给了 collectionview 约束
top, leading, trailing, = 10 height = 80
在单元格中,我在 uiview 中放置了标签,我放置了 uiview,因为我需要给角半径
和代码
class SearchFilterVC: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
var textArray = ["hbdhwebhj", "behgwfhjewgbkfjbe", "hbhjs", "bdhsbfhegu", "gwdgyqwuguq"]
@IBOutlet weak var collectionView: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
layout.minimumInteritemSpacing = 0
layout.minimumLineSpacing = 5
self.collectionView.collectionViewLayout = layout
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return textArray.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "SearchFilterCollectionViewCell", for: indexPath as IndexPath) as! SearchFilterCollectionViewCell
cell.textLabel.text = textArray[indexPath.row]
return cell
}
}
编辑:
o/p
如何解决这个问题,请帮忙代码
collectionView 中的所有项目都采用完全相同的大小,因为您已为 collectionView 的流布局指定 layout.itemSize
移除layout.itemSize = CGSize(width: self.collectionView.frame.size.width / 2, height: 80)
代码中的其他问题:
layout.invalidateLayout()
在ViewDidLoad
中是不必要的
if let layout = self.collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
设置minimumInteritemSpacing
和minimumLineSpacing
是不必要的,在它上面的语句中你已经创建了let layout = UICollectionViewFlowLayout()
为什么不简单地设置minimumInteritemSpacing
minimumLineSpacing
本身就在那里?为什么要使用额外的if let
?
随便写
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
layout.minimumInteritemSpacing = 0
layout.minimumLineSpacing = 5
self.collectionView.collectionViewLayout = layout
您无需指定项目大小,集合视图流布局本质上设置为水平,因此默认情况下每个项目将采用与集合视图高度相同的高度,如果单元格内只有一个标签,并且如果您正确设置了自动布局约束,标签的固有内容大小将确保单元格获得适当的宽度
无论出于何种原因,如果您决定将标签包装在 UIView
逻辑中,只要您正确设置标签的自动布局约束,label 的固有内容大小将设置 containerView 的宽度和这将反过来有助于适当地设置单元格的宽度,
这里单元格的背景颜色是红色,容器视图是橙色,标签没有背景颜色,我在单元格和视图之间添加了前导和尾随间距为 10,标签和容器视图有前导和尾随 space 为 5
编辑:
由于 OP 要求容器视图、标签和单元格之间的约束,我正在更新答案以反映相同的内容
很明显
- - - - - - - - - - - - Cell - - - - - - - - - - - - - - - -
| - - - - - - - - Container View - - - - - - - - |
| | |5 | |
|-10- |-5- Label -5-| -10- |
| | |5 | |
| - - - - - - - - - - - - - - - - - - - - - - - - - |
| |
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
如果需要,您可以在单元格和容器之间添加顶部和底部约束,但我保持容器视图垂直居中于单元格
如何运作?
Label 具有从设置给它的文本中获取的固有内容大小,View 确实根据其子视图的大小获取其固有大小,因为容器视图中没有子视图,它从中获取其大小label 并且显然无论大小 label returns 视图将宽度加 10,高度加 10(5 个前导,5 个尾随,5 个顶部和 5 个底部)最终单元格从其子视图中获取其大小,因为只有一个子视图(容器视图)它从容器视图获取宽度,对于高度,它从集合视图获取高度(因为子视图没有提供足够的数据来计算它的高度)
并且如果由于某种原因(可能是因为您有意/无意地设置了一些其他约束,例如在容器视图上添加宽度约束)标签没有正确采用其固有内容大小,您可以随时设置 setContentCompressionResistancePriority
and setContentHuggingPriority
on label to high in your cell's awaken from nib
override func awakeFromNib() {
super.awakeFromNib()
self.label.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
self.label.setContentHuggingPriority(.defaultHigh, for: .horizontal)
}
虽然在通常情况下不需要这样做,但如果需要这样做以获得正确的固有大小,那么如果我处在您的位置,则必须有一些其他限制阻止标签采用其正确的隐式固有内容大小宁愿先检查并修复它。尽管如此,无法使用您提供的有限代码进一步调试。
编辑 2:
没有意识到 OP 正在使用 UICollectionViewFlowLayout
的自定义实例并且没有将 estimatedItemSize
属性 设置为 automaticSize
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
layout.minimumInteritemSpacing = 0
layout.minimumLineSpacing = 5
layout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
self.collectionView.collectionViewLayout = layout