Dynamic UICollectionView Cell Frame

Question

Right now, i'm facing an issue.

I manage to wrap the cell's content view to its label, but there's some spacing which doesn't fit to the design. There's some spaces available between the cell

Here's my code

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return 4
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

    let hastag = Hastag.fetchHastag()[indexPath.row]

    let approximateWidth = view.frame.width - 20
    let size = CGSize(width: approximateWidth, height: 28)
    let attribute = [NSAttributedStringKey.font: UIFont.systemFont(ofSize: 12)]

    let estimatedFrame = NSString(string: hastag.hastag).boundingRect(with: size, options: .usesLineFragmentOrigin, attributes: attribute, context: nil)

    return CGSize(width: estimatedFrame.width + 20, height: 26)

}

Below is the result

And this is what i want to achieve, it will be something like this

UPDATE

Here is my full code of collection view data source and delegate. Hastag.hastag is type of string

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return Hastag.fetchHastag().count
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "hastagCell", for: indexPath) as! HastagCollectionViewCell

    cell.hastag = Hastag.fetchHastag()[indexPath.row]

    return cell
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return 4
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

    let hastag = Hastag.fetchHastag()[indexPath.row]

    let approximateWidth = view.frame.width - 20
    let size = CGSize(width: approximateWidth, height: 28)
    let attribute = [NSAttributedStringKey.font: UIFont.systemFont(ofSize: 12)]

    let estimatedFrame = NSString(string: hastag.hastag).boundingRect(with: size, options: .usesLineFragmentOrigin, attributes: attribute, context: nil)

    return CGSize(width: estimatedFrame.width + 16, height: 26)

}

Making use of Custom layout 'UICollectionViewLeftAlignedLayout' would do the trick — Anuraj, Jul 27 '18 at 04:14
Any idea so that i can achieve it without using library? @Anuraj — Jason, Jul 27 '18 at 04:37
No...You may be missing something else. There is another library called TagListView for showing UI like this. It will adjust size automatically .https://github.com/ElaWorkshop/TagListView — Anuraj, Jul 27 '18 at 07:51
@Anuraj thanks dude, i'm finally using your recommended (TagListView) library — Jason, Jul 27 '18 at 13:56

score 0 · Answer 1 · answered Jul 27 '18 at 04:48

0

You can use AlignedCollectionViewFlowLayout, its not a library just one file. Just add this file to your project and from your UICollectionView xib just set the flow layout as AlignedCollectionViewFlowLayout. It is very easy to use. Please check the below link.

https://github.com/mischa-hildebrand/AlignedCollectionViewFlowLayout

answered Jul 27 '18 at 04:48

vivekDas

1,210
8
11

i've tried to put the file, but there are too much errors. can you show me how to do it? – Jason Jul 27 '18 at 07:12
Are you using xib ? You are creating collectionview manually or in XIB ? – vivekDas Jul 27 '18 at 07:17
Check the link everything is there "Setup in Interface Builder" , "Setup in code" if you don't understand something just ask. – vivekDas Jul 27 '18 at 07:18
i'm creating the collection view cell inside my storyboard. the errors come from the first time i put the file. there's no error on my code, but the file (AlignedCollectionViewFlowLayout.swift) itself has so much errors – Jason Jul 27 '18 at 07:31
you are using Swift 3 or 4? – vivekDas Jul 27 '18 at 07:38
i'm currently using swift 4 – Jason Jul 27 '18 at 07:40
then what error you are getting ? I used the same and its work fine for me – vivekDas Jul 27 '18 at 08:44
there are too many undeclared type of 'UICollectionViewLayoutAttributes' errors. can you show me how to use it? – Jason Jul 27 '18 at 09:24
Give me your gmail id , i will share my file what i m using in my code. – vivekDas Jul 27 '18 at 09:33
Can you please upload it to github, so that everyone can see it too? – Jason Jul 27 '18 at 09:45

pbodsk · Answer 2 · 2018-07-27T08:05:12.027

0

You can use the size(withAttributes:) function of a NSString to give you the CGSize of a string with a specific font and size.

Assuming that Hastag.hastag is a String I think the following should work:

extension YourViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let hastag = Hastag.fetchHastag()[indexPath.row]
        let title = hastag.hastag as NSString
        let titleSize = title.size(withAttributes: [NSAttributedStringKey.font: UIFont.systemFont(ofSize: 12)])
        return CGSize(width: titleSize.width + 20, height: 26)
    }
}

Note that your ViewController must implement the UICollectionViewDelegateFlowLayout protocol and you must set your ViewController as the delegate for the UICollectionView for this to work.

Hope that helps.

edited Jul 27 '18 at 08:05

answered Jul 27 '18 at 05:03

pbodsk

6,371
3
20
47

thank you for answering, but your code returns the same as my code – Jason Jul 27 '18 at 07:06
hmm...then there must be something else different in your setup...because the above work for me :) Could you show me how you have defined the layout maybe? – pbodsk Jul 27 '18 at 07:08
check my updates please ;). on the storyboard, i set constraint for my collection view 8,8,16,16 (top, bottom, trailing, leading) in case you need to know that – Jason Jul 27 '18 at 07:26
@Jason I've updated my answer, make sure that you implement the `UICollectionViewDelegateFlowLayout` and add your view controller as a `delegate` (see this fine answer for instance: https://stackoverflow.com/a/12925529/4063602) – pbodsk Jul 27 '18 at 08:07
OK. And you can see that your method is called if you place an breakpoint in it? – pbodsk Jul 27 '18 at 09:23
sorry, what do you mean? – Jason Jul 27 '18 at 09:24
If you add a breakpoint in your sizeForItemAt: method, and then run your code, is the breakpoint then hit? If it isn’t then that is why it isn’t working – pbodsk Jul 27 '18 at 09:32
It must be hit the method. Because if it doesn't, then the cell doesn't resize to the label inside of it. But I'll try to put the breakpoint. I'll give you the info soon – Jason Jul 27 '18 at 09:46

score 0 · Accepted Answer · answered Jul 27 '18 at 13:55

0

After several try, i finally give up on customizing cell size and instead i'm using the library TagListView

answered Jul 27 '18 at 13:55

Jason

33
7

Dynamic UICollectionView Cell Frame

3 Answers3