【问题标题】:How to change CollectionView cell width according to label text in swift如何根据标签文本快速更改CollectionView单元格宽度
【发布时间】:2021-03-13 17:29:45
【问题描述】:

我需要像这样根据标签文本更改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

如何解决这个问题,请提供代码帮助

【问题讨论】:

    标签: swift uicollectionview label width


    【解决方案1】:

    collectionView 中的所有项目都采用完全相同的大小,因为您为 collectionView 的流布局指定了 layout.itemSize

    删除layout.itemSize = CGSize(width: self.collectionView.frame.size.width / 2, height: 80)

    代码中的其他问题:

    1. layout.invalidateLayout() 在ViewDidLoad 中是不必要的
    2. 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 逻辑中,只要您正确设置标签的自动布局约束,标签的内在内容大小将设置 containerView 的宽度,然后依次设置有助于适当地设置单元格的宽度,

    这里单元格的背景颜色为红色,容器视图为橙色,标签没有背景颜色,我在单元格和视图之间添加了前导和尾随间距为 10,标签和容器视图的前导和尾随间距为 5

    编辑:

    由于 OP 要求容器视图、标签和单元格之间的约束,我正在更新答案以反映相同

    很明显

      - - - - - - - - - - - - Cell - - - - - - - - - - - - - - - -
    |       - - - - - - - - Container View - - - - - - - -          |
    |     |                      |5                          |      |   
    |-10- |-5-                  Label                     -5-| -10- |   
    |     |                      |5                          |      |
    |       - - - - - - - - - - - - - - - - - - - - - - - - -       |
    |                                                               |
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  
    
    

    如果需要,您可以在单元格和容器之间添加顶部和底部约束,但我保持容器视图垂直居中到单元格

    它是如何工作的?

    标签具有固有的内容大小,它从为其设置的文本中获取,视图确实根据其子视图的大小获取其固有大小,因为容器视图中没有子视图,它从标签和很明显,无论尺寸标签返回什么,视图都会增加 10 的宽度和 10 的高度(5 个前导,5 个尾随,5 个顶部和 5 个底部)最后单元格从其子视图中获取其大小,因为只有一个子视图(容器视图)它获得宽度从容器视图和高度它从集合视图获取它的高度(因为子视图没有提供足够的数据来计算它的高度)

    如果由于某种原因(可能是因为您有意/无意地设置了一些其他约束,例如在容器视图上添加宽度约束)标签没有正确采用其内在内容大小,您始终可以设置 setContentCompressionResistancePriority 和 @987654342 @标签上的标签到你的单元格从笔尖醒来

    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
    

    【讨论】:

    • 如果我们没有给出视图的顶部和底部或高度,那么它会显示错误,对吧?
    • 我在上面添加了你的代码.. 但是如何给容器视图和标签提供约束
    • 我需要和你一样的o/p请在这里指导我
    • 你有没有给出collectionview的高度
    • 请添加collectionview和containerview以及标签约束
    猜你喜欢
    • 1970-01-01
    • 2019-07-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多