UICollectionView with array of images set it right

Question

I have a question. Inside UICollectionView I have UIImage with Content Mode - Aspect Fit... Now I need that in UICollectionView images show one near another. Now I have a lot of space between them.

extension UserDetailInformationOfAnimalViewController: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
func numberOfSections(in collectionView: UICollectionView) -> Int {
    return 1
}

//MARK: - Collections
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    let post = postsArray[collectionView.tag]
    //        print("count: ", post.imagesLink.count)
    return post.imageLinks.count
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCell

    let post = postsArray[collectionView.tag]
    //        print("postArrayPhotos: ", post.imagesLink.count)
    if post.imageLinks.count != 0 {
        //            print("POST = ", post)
        //            print("Look here: ", post.imagesLink[indexPath.row].imageLink)
        //            print("IMAGELINK = ", post.imagesLink[indexPath.row].imageLink)
        let imageLink = post.imageLinks[indexPath.row]

        if imageLink.imageLink != nil {
            let url = URL(string: imageLink.imageLink!)
            print("IMAGELINK = ", imageLink)

            cell.imageOfAnimalInCollectionView.sd_setImage(with: url!, placeholderImage: UIImage(named: "App-Default"),options: SDWebImageOptions(rawValue: 0), completed: { (image, error, cacheType, imageURL) in
            })
        }
    }

    return cell
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let height = self.view.frame.size.height;
    let width  = self.view.frame.size.width;
    // in case you you want the cell to be 40% of your controllers view
    return CGSize(width: width, height: height * 0.35)
  }
}

Possible duplicate of [UICollection horizontally scroll, so reduce the space between cell item](https://stackoverflow.com/questions/45386611/uicollection-horizontally-scroll-so-reduce-the-space-between-cell-item) — Harshal Valanda, Aug 09 '17 at 12:59
I would check current cell frame, it could be right as you set, but the image is just smaller in width than your cell. Also for image gallery with collection view, I use one cell for one section, so the number of sections = number of items. — Alex Kosyakov, Aug 09 '17 at 13:29

score 0 · Accepted Answer · edited Aug 09 '17 at 13:08

0

Use this method to set width of cell dynamically

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    if indexPath.row == whatever you want {
        return CGSize(width: collectionView.frame.size.width/2, height: collectionView.frame.size.width/2)
    }
}

edited Aug 09 '17 at 13:08

sn86

778
3
19

answered Aug 09 '17 at 13:00

cole

2,452
2
11
25

Can you show your code, that you use for setting image in your app ? – cole Aug 09 '17 at 13:09
Also if you don't using anything to setup from code. Try using, constraints and keep aspect ratio and width and height. That definitely should work for you – cole Aug 09 '17 at 13:13
try like this `HomeViewController:UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout` magin will done by `UICollectionViewDelegateFlowLayout` – Virender Aug 09 '17 at 13:16
Add my code. I think func sizeForItemAt break everything. – Dmytro Ryshchuk Aug 09 '17 at 13:40
Check using aspect fill and see does that fill space accordingly ? If it does, then its different issue – cole Aug 09 '17 at 13:44
Use aspect fill and let me know ..if it fixed issue. Then we can handle the issue differently – cole Aug 09 '17 at 13:45
Yeap, in Aspect Fill it works great. How could I make it works as well in Aspect Fit? – Dmytro Ryshchuk Aug 09 '17 at 13:46
Then my answer is correct. You can add background color to your image view it. And see it in aspect fit. You need add images in your app which are not in portrait mode. Also you need add constraints so no two images appear on same row. Also add background color like white or black depending on your app. – cole Aug 09 '17 at 13:53
background color will help you understand does aspect fit reduce your imageview size ? So need to do some debugging – cole Aug 09 '17 at 13:54
Thank you for help! – Dmytro Ryshchuk Aug 09 '17 at 14:32
Good, hope you now better understand how to debug the image view for future. If you are happy, please accept my answer or up vote it. – cole Aug 09 '17 at 14:33

score 0 · Answer 2 · answered Aug 09 '17 at 14:14

I understand your problem. Here I give you a way around. This solution may not effective for you but it will give you idea how to solve it. Main concept is the you have to return cell size according to image. But instantly image is not in your hand. Its on the server. So you can do that fist return a demo or place holder image height then after finishing download actual image from server tell the collection view to re-layout the cell according to actual image size.

 cell.imageOfAnimalInCollectionView.sd_setImage(with: url!, placeholderImage: UIImage(named: "App-Default"),options: SDWebImageOptions(rawValue: 0), completed: { (image, error, cacheType, imageURL) in
           //told the collection view to relayout according to image size
           collectionView.collectionViewLayout.invalidateLayout()          
    })

public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let cell = collectionView.cellForItem(at: indexPath) as! CollectionViewCell
        return cell.imageOfAnimalInCollectionView.image.size! // Put your logic here, until actual image download from server you can return a default size.
    }

thank you! I'll try to figure out how it works and try to use it. — Dmytro Ryshchuk, Aug 09 '17 at 14:31

UICollectionView with array of images set it right

2 Answers2