So all I need is to make a horizontal list of just labels and for this I used a collection view. it looks like it works as expected but my label gets cropped and only half the label shows just like this:
and this is how it is supposed to look like:
my vc code:
class STViewController: UIViewController {
@IBOutlet weak var collectionView: UICollectionView!
let data: [stmodel] = [stmodel(text: "صف أول"),
stmodel(text: "صف ثاني"),
stmodel(text: "صف ثالث")]
override func viewDidLoad() {
super.viewDidLoad()
collectionView.dataSource = self
collectionView.delegate = self
// Do any additional setup after loading the view.
}
}
extension STViewController : UICollectionViewDataSource,UICollectionViewDelegate {
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return data.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "myCell", for: indexPath) as! ClassesCollectionViewCell
cell.configure(with: data[indexPath.row])
return cell;
}
}
thank you!
3
Answers
Regarding your problem, you can solve it by using UICollectionViewDelegateFlowLayout.
To learn more about UICollectionViewDelegateFlowLayout, you can read the Apple documentation. [link]: https://developer.apple.com/documentation/uikit/uicollectionviewdelegateflowlayout
I faced the same issue and found 2 effective way to solve that.
1. You can create a new instance of UICollectionViewFlowLayout and set that as the collectionViewLayout of your UICollectionView. By doing this, you can easily control the itemSize of your UICollectionView so that it doesn’t get cropped. To achieve this, edit your viewDidLoad() in the following way.
2. You can use the sizeForItemAt method of UICollectionViewDelegateFlowLayout protocol. This will also allow you to set the size for the item of UICollectionView. Just by simply adding the following extension you can achieve that.
This should solve your issue.
You do not need to set
layout.itemSize, and you do not need to implementsizeForItemAt.In fact, if you want variable-width cells (which it looks like you want), then using either of those will not give you the desired results.
Since you are using Storyboard, make sure your collection view Estimated Cell Size is Automatic:
It can help during development to give your UI elements contrasting colors to make it easy to see the frames.
For example, my Storyboard looks like this:
So, here’s how that looks at run-time…
First, with the "development" colors, plus a red-border around the collection view so we can see its frame:
Then, with "run-time" colors:
and without the red border:
To get that, I used your code…
You didn’t provide your
stmodelso I used this:and a simple cell class to try and match your images:
and the controller class – note there is no
.itemSizeorsizeForItemAtcode:and here’s the Storyboard source: