• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

ios - UICollectionView,第一次加载时图像大小不正确

[复制链接]
菜鸟教程小白 发表于 2022-12-11 16:52:13 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

我有一个非常简单的演示,它使用 UICollectionView 来显示图片列表,我使用了一个自定义单元格类,它包含一个 UIImage 和一个标签,如下所示,没有约束。

customize cell on storyboard

然后我在代码中设置单元格的大小,如下所示。每行有 3 列。所有边距都设置为 10。

// Calculate size of cell
    func collectionView(collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                               sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        let totalSpace = marginLeft + marginRight + (colomnSpacing * CGFloat(numberOfItemsPerRow - 1))
        let size = Int((collectionView.bounds.width - totalSpace) / CGFloat(numberOfItemsPerRow))

        // 20 is for label height.
        return CGSize(width: size, height: size + 20)
    }

    // Section margin, if you only have one section, then this is the CollectionView's margin.
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
        return UIEdgeInsets(top: marginTop, left: marginLeft, bottom: marginBottom, right: marginRight) // top, left, bottom, right.
    }

    // Set row spacing
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
        return rowSpacing
    }

    // Set column spacing
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
        return colomnSpacing
    }

这是用于设置图像和标签大小的代码。图像的宽度为屏幕宽度的 1/3(不包括列空间),高度等于宽度。标签宽度等于图片宽度,标签高度设置为20。

override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! SearchImageCell

        // Set image size
        cell.imageView.frame = CGRect(x: 0, y: 0, width: cell.frame.width, height: cell.frame.height - 20)
        cell.imageView.contentMode = .ScaleAspectFill


        let currentItem = self.responseArray[indexPath.row]
        let imageUrl = currentItem["imgurl"] as? String
        let url = NSURL(string: imageUrl!)

        // Load the image
        dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0)) {
            let data = NSData(contentsOfURL: url!)
            dispatch_async(dispatch_get_main_queue(), { 
                cell.imageView.image = UIImage(data: data!)
            })
        }

        // Set label size
        cell.imageDesc.frame = CGRect(x: 0, y: cell.imageView.frame.height, width: cell.frame.width, height: 20)

        let shujia = currentItem["shujia"] as? String
        cell.imageDesc.text = shujia!
        cell.imageDesc.font = cell.imageDesc.font.fontWithSize(14)
        cell.imageDesc.textAlignment = .Center

        return cell
    }

问题是:

当我第一次加载图像时,图像的大小不正确,如下所示,您可以看到图像的高度占据了整个单元格的高度,并且标签没有显示出来。

enter image description here

但是,当我向下和向上滚动时(这使得单元格被重复使用),图像被调整大小,我得到了正确的结果,这就是我想要的!

enter image description here

我尝试添加一些调试代码来打印单元格/图像/标签的大小,似乎所有大小都是正确的。

cell width:  100.0
cell height:  120.0
image width:  100.0
image height:  100.0
label width:  100.0
label height:  20.0

那么,怎么了?

关于 SO( here , here ) 有一些类似的问题,但答案对我不起作用,例如

1. cell.layoutIfNeeded()
2. self.collectionViewLayout.invalidateLayout()
3. self.collectionView?.layoutIfNeeded()

请帮忙,如果您需要更多代码,请告诉我。



Best Answer-推荐答案


为您的 image viewlabel 设置 translatesAutoresizingMaskIntoConstraints 为 true。也许它有效。

注意:使用IB时会设置为false

关于ios - UICollectionView,第一次加载时图像大小不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38128580/

回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关注0

粉丝2

帖子830918

发布主题
阅读排行 更多
广告位

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap