CODEWITHSUNDEEP
iosswiftuicollectionview
Ashfaque
Ashfaque

Reputation: 1284

Dynamic UICollectionView in UIViewController

I am an android developer and developing my first iOS app, I need to implement GridView in order to add some social icon so after some search I found UICollectionView but it's not working as expected. How to set dynamic height of the UICollection view? Actually I want to display all icons but it showing only a row and others after scrolling the UICollectionView.

below is the example: This is what I am getting

enter image description here

This is what I want:

enter image description here

I am using below code:

import UIKit

class CollectionViewDemo: UIViewController, UICollectionViewDelegate,    UICollectionViewDataSource {

@IBOutlet weak var socialHandleCollection: UICollectionView!


@IBOutlet weak var socialImageView: UIImageView!

var socialHandleArray:[String] = ["Facebook", "Twitter", "Youtube","Vimeo", "Instagram", "Custom URL", "Linkedin", "pinterest"]


override func viewDidLoad() {

    self.socialHandleCollection.delegate = self
    self.socialHandleCollection.dataSource = self

  //  socialHandleCollection.frame.size.height = 130
}

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

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

    let cell: colvwCell = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath) as! colvwCell

    cell.imgCell.image = UIImage(named: "demo_img.png")

    return cell
}

func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
        print(self.socialHandleArray[indexPath.row])
 }
}

Any help would be appreciated.

Upvotes: 1

Views: 364

Answers (1)

Rikh
Rikh

Reputation: 4232

Assuming you are using autoLayout

Initially declare a specific number of columns that you desire

let numberOfColumns = 5

Okay so first things first. You will have to make your class conform to the UICollectionViewDelegateFlowLayout. Now implement the function -

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

        return CGSize(width: collectionView.bounds.size.width/numberOfColumns, height: collectionView.bounds.size.width/numberOfColumns);
}

Here 5 can be changed to the number of columns you want in each row and passing same value as height will ensure that the shape is always square. And hence you can apply corner radius to make it circular.

Now moving on. From your interface builder, ctrl + click and drag the UICollectionView height constraint to your UIViewController (similar to how you would do for a UIView but do it for the constraint)

Now once you know the number of items that you need to display inside your UICollectionView, you can do something like:

//replace 5 with the number of columns you want
//array contains the items you wish to display
func figureOutHeight(){

    if(array.count == 0){
         //as no items to display in collection view
         return
    }

    //ceil function is just to round off the value to the next one, for example 6/5 will return 1 but we need 2 in this case. Ensure all arguments inside ceil function are float 
    let rowsCount = ceil(Float(array.count)/Float(numberOfColumns))

    //now you have number of rows soo just update your height constraint by multiplying row count with height of each item inside UICollectionView
    collectionViewHeightConstraint.constant = rowsCount * collectionView.bounds.size.height / numberOfColumns;

    view.layoutIfNeeded()
}

Also if you haven't change the scroll direction to vertical.

Upvotes: 1

Related Questions