Dynamic cell width of UICollectionView depending on label width
IosObjective CSwiftUicollectionviewUicollectionviewcellIos Problem Overview
I have a UICollectionView, that loads cells from reusable cell, which contains label. An array provides content for that label. I can resize label width depending on content width easily with sizeToFit. But I cannot make cell to fit label.
Here's the code
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
arrayOfStats = @[@"time:",@"2",@"items:",@"10",@"difficulty:",@"hard",@"category:",@"main"];
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection: (NSInteger)section{
return [arrayOfStats count];
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
return CGSizeMake(??????????);
}
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
return 1;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
Cell *cell = (Cell *) [collectionView dequeueReusableCellWithReuseIdentifier:@"qw" forIndexPath:indexPath];
cell.myLabel.text = [NSString stringWithFormat:@"%@",[arrayOfStats objectAtIndex:indexPath.item]];
// make label width depend on text width
[cell.myLabel sizeToFit];
//get the width and height of the label (CGSize contains two parameters: width and height)
CGSize labelSize = cell.myLbale.frame.size;
NSLog(@"\n width = %f height = %f", labelSize.width,labelSize.height);
return cell;
}
Ios Solutions
Solution 1 - Ios
In sizeForItemAtIndexPath
return the size of the text
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
return [(NSString*)[arrayOfStats objectAtIndex:indexPath.row] sizeWithAttributes:NULL];
}
Solution 2 - Ios
Swift 4.2+
Principle is:
-
Make sure delegation is set up (e.g.
collectionView.delegate = self
) -
Implement
UICollectionViewDelegateFlowLayout
(it contains necessary method signature). -
Call
collectionView...sizeForItemAt
method. -
No need to bridge-cast
String
toNSString
to callsize(withAttributes:
method. SwiftString
has it out of the box. -
Attributes are the same you set for
(NS)AttributedString
, i.e. font family, size, weight, etc. Optional parameter.
Sample solution:
extension ViewController: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return "String".size(withAttributes: nil)
}
}
But you would most likely want to specify concrete string attributes respective to your cell, hence final return would look like:
extension ViewController: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
// dataArary is the managing array for your UICollectionView.
let item = dataArray[indexPath.row]
let itemSize = item.size(withAttributes: [
NSAttributedString.Key.font : UIFont.boldSystemFont(ofSize: 14)
])
return itemSize
}
}
Why you SHOULD NOT use UILabel to calculate the size? Here's the suggested solution:
let label = UILabel(frame: CGRect.zero)
label.text = textArray[indexPath.item]
label.sizeToFit()
Yes, you get same result. It looks simplistic and may seem as a go-to solution. But it's improper because:
- it's expensive, 2) overhead and 3) dirty.
It's expensive because UILabel is a complex UI object, which is being created on every iteration whenever your cell is about to show even though you don't need it here. It's an overhead solution because you only need to get size of a text, but you go as far as to create a whole UI object. And it's dirty for that reason.
Solution 3 - Ios
I have found a small trick for swift 4.2
For dynamic width & fixed height:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let label = UILabel(frame: CGRect.zero)
label.text = textArray[indexPath.item]
label.sizeToFit()
return CGSize(width: label.frame.width, height: 32)
}
For dynamic height & fixed width:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let label = UILabel(frame: CGRect.zero)
label.text = textArray[indexPath.item]
label.sizeToFit()
return CGSize(width: 120, height: label.frame.height)
}
Solution 4 - Ios
Checkout below code you might be giving very short CGSize.
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
NSString *testString = @"SOME TEXT";
return [testString sizeWithAttributes:NULL];
}
Solution 5 - Ios
In Swift 3
let size = (arrayOfStats[indexPath.row] as NSString).size(attributes: nil)
Solution 6 - Ios
Swift 4
let size = (arrayOfStats[indexPath.row] as NSString).size(withAttributes: nil)
Solution 7 - Ios
In Swift 5.X, this single line of code is enough.
In the below answer i have added dynamic width and static height. Based on your requirement change height value.
//MARK: - UICollectionViewDelegateFlowLayout
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: itemsArray[indexPath.item].size(withAttributes: [NSAttributedString.Key.font : UIFont.systemFont(ofSize: 17)]).width + 25, height: 30)
}
Add UICollectionViewDelegateFlowLayout to your delegate
It's perfectly worked to me with equal cell space with dynamic cell size based on text length.
PFA image below...
Fix height of the collectionView (not cell )based on content(Dynamic height for collection view)
Solution 8 - Ios
//add in view didload
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
[layout setScrollDirection:UICollectionViewScrollDirectionHorizontal];
layout.estimatedItemSize = CGSizeMake(self.breadScrumbCollectionView.frame.size.width, 30);
self.breadScrumbCollectionView.collectionViewLayout = layout;
Solution 9 - Ios
This one line for my UICollectionViewFlowLayout()
did the trick for me:
collectionViewLayout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize