CollectionView单元格大小以适合标签

时间:2017-11-19 22:37:34

标签: swift xcode uicollectionview uicollectionviewlayout

我已经设置了一个水平滚动的集合视图,并在'companies'数组中显示元素。

enter image description here

单元格会相对于标签宽度自动调整大小。

我使用过代码&以下故事板限制来实现这一点:

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
    }

    }

enter image description here

然而问题是,当我在标签后面添加一个UIImage视图并指定约束时,它指示它应该与标签的大小和位置相同,我得到下面的意外结果:

enter image description here

实际上,我希望实现以下目标:

enter image description here

我用于应用背后图像的约束如下:

enter image description here

有趣的是,当我使用UIView而不是UIImage视图时,它按预期工作,但我确实需要在此实例中使用图像视图。

为什么会发生这种情况?如何解决此问题?

2 个答案:

答案 0 :(得分:3)

标签具有固有的尺寸。 图像视图具有固有的大小。

当您将标签和图像视图的宽度等同时,自动布局无法决定哪个应更改大小以满足约束。

您需要通过降低图片视图的内容拥抱和内容压缩阻力优先级来消除歧义。

例如,您可能最终得到标签CH = 251,CCR = 750和图像视图CH = 240,CCR = 740。

然后,在自动布局期间,标签的内在大小将获胜,图像视图将采用标签的大小。

普通视图没有内在大小,因此在您尝试该选项时没有歧义(默认情况下赢得标签)。如果您尝试将两个标签的宽度等同,您会看到相同的歧义。

答案 1 :(得分:0)

  1. 水平移除中心和垂直居中约束。
  2. UIImageView的前导和尾随约束添加到UILabel
  3. 您只需要将Leading,Trailing,Equalwidth,EqualHeight中的四个约束(UIImageView)添加到UILabel