The two label overlap in a UICollectionViewCell

Question

I am new for IOS development , and I try to use UIcollectionView to show the photo.

I am not using storyboard .

I create a xib file call AITFileCell_grid.xib , and add a Collection View Cell like the following picture.

The view show show the icon , file name and file size in collectionViewCell .

The file name is long , so set the line of file name to 2

When I run the App. The text of file name and file size are overlap like the following picture.

How should I modify can make **file name and file size non-overlapping ?**

What reason causing this condition happened ?

Answer 1

Because you have set the file name label to be a 2-liner it displays in 2 lines if its text is long enough. File size label position is static so it doesn't move down in this cases.

You have multiple choices.

• you can either make UICollectionViewCell bigger so that the filename can take two lines and put the file size label under;
• you can also make filename label scale its font's size if it becomes longer than 1 line and leave file size label as it is;
• you can also truncate filename label if it becomes longer than 1 line (in case you don't need full filename);
• you can make use of auto-layout (as @Wain suggested) and dynamically resize and position both labels based on their text sizes.