Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

iOS

Posted by Martin Dweh
Martin Dweh
1,014 Points

Adding images to CollectionView Sections Cells

Good morning guys

I need a little help with CollectionView. I'm using Swift 2. I have a CollectionView set up with 3 SECTIONS. Each has 5 CELLS in it. I have an "imageArray" set up with 15 photos in it. I want to display 5 photos in each SECTION'S CELLS.

How can I go about doing this?

Any help will be greatly appreciated -THANKS

4 Answers

Michael Reining
Michael Reining
10,101 Points
Michael Reining
Michael Reining
10,101 Points

Hi Martin,

Here is one example of how you could do this.

If you had an array called abcImages, then you could display each image in a CollectionView like this.

// MARK: UICollectionViewDataSource

    override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        //#warning Incomplete method implementation -- Return the number of sections
        return 1
    }


    override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        //#warning Incomplete method implementation -- Return the number of items in the section
        return abcImages.count
    }

    override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as MyCollectionViewCell

        // Configure the cell
        let image = UIImage(named: abcImages[indexPath.row])
        cell.imageView.image = image
        return cell
    }

I hope that helps,

Mike

PS: Thanks to the awesome resources on Team Treehouse, I just launched my first app. :-)

Code! Learn how to program with Swift

Martin Dweh
Martin Dweh
1,014 Points

Hey Michael, thank you very much for taking the time to help me, I really appreciate it.

But I have something similar like this, -This displays all the photos in my imageArray in the cells. It repeats this in all 3 SECTIONS's CELLS .

What I need is; The CollectionView have 3 SECTIONS, each SECTIONS has 5 Cells. I have an "imageArray" set up with 15 photos in it. I want to display 5 photos in each SECTION'S CELLS. I want the 15 photos in "imageArray" to be distributed evenly throughout the 3 SECTIONS's Cells. 5 different photos per SECTION.

*No repeating images in the sections

-BUT, THANKS VERY MUCH FOR YOUR TIME

Michael Reining
Michael Reining
10,101 Points

Hi Martin,

There is a many ways to do this. One example would be to create a function that splits your initial array into three section arrays and then to call the proper section array for each section.

Here is how how this could be done. The example is with an integer array but it would work with any type of array if you update the function.

I am using a tuple as the return value so that I can return 3 arrays from a single function.

var initialArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]

func splitArrayIntoSections (initialArray: [Int]) -> ([Int],[Int],[Int]) {
    var section1Array = [Int]()
    var section2Array = [Int]()
    var section3Array = [Int]()

    for number in 0..<15 {
        if number < 5 {
            section1Array.append(initialArray[number])
        }
        else if number < 10 {
            section2Array.append(initialArray[number])

        }
        else {
            section3Array.append(initialArray[number])

        }
    }
    return (section1Array,section2Array, section3Array)
}

let sectionArrays = splitArrayIntoSections(initialArray)

var image = sectionArrays.0[0] // example to access image 1 from array 1
image = sectionArrays.1[1] // example to access image 2 from array 2

I hope that helps,

Mike

Martin Wildfeuer
PLUS
Martin Wildfeuer
Courses Plus Student 11,071 Points
Martin Wildfeuer
Martin Wildfeuer
Courses Plus Student 11,071 Points

If it's guaranteed that, as you posted above, there are

  • always 15 images in your array
  • exactly 3 sections
  • exactly 5 images per section

you could hardcode this:

override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
    return 3
}

override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
   return 5
}

override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let index = indexPath.section * 5 + indexPath.row
    let image = UIImage(named: imageArray[index])
    ...
}

This way, the section and row information of NSIndexPath is mapped to a 0 to 14 array index

// 5 is the number of images per section
let index = indexPath.section * 5 + indexPath.row

This is untested, so I really hope it works ;)

Martin Dweh
Martin Dweh
1,014 Points

Hey.... another Martin, cool!...lol

Thanks bro for the help. But I can't hardcode it. I'll be adding more images to the imageArray later on.

Thanks very much, if you have another workaround, please let me know

THANKS

Michael, thanks a lot, I haven't tried that method yet, I'll get to it. - Is there a easier / shorter way to get this done apart from the above method?

thanks for all your help Michael

Martin Wildfeuer
Martin Wildfeuer
Courses Plus Student 11,071 Points

Hehe ;)

I have a CollectionView set up with 3 SECTIONS. Each has 5 CELLS in it. I have an "imageArray" set up with 15 photos in it. I want to display 5 photos in each SECTION'S CELLS.

For this scenario, my solution works. It will fill section one cells with image 0 - 4, section two 5 - 9 and section three with images 10 - 14.

So what am I getting wrong?. What happens if you have 17 images in your array then? Are there gonna be 4 sections, with section 4 only displaying 2 images?

Martin Dweh
Martin Dweh
1,014 Points
Martin Dweh
Martin Dweh
1,014 Points

Hey Martin, I just tried your solution, it's giving me this error: "cannot subscript a value of type '[UIImage?]' " any tip on how to fix it?

Martin Wildfeuer
Martin Wildfeuer
Courses Plus Student 11,071 Points

Hey Martin ;) In the above example, just like in Michael Reinings solution, I was assuming that your array contains Strings with the image names. If it contains UIImages, it would have to be:

let index = indexPath.section * 5 + indexPath.row
let image = imageArray[index]

Does that help?

Martin Dweh
Martin Dweh
1,014 Points
Martin Dweh
Martin Dweh
1,014 Points

No sorry it didn't help. I keep getting error.

I came up with this after trying for an hour

cell.myCellImageV.image = imageArray[indexPath.row] this works, but it starts from the beginning of the "imageArray" -it repeats the images in the 3 sections.

I changed .row TO section.

cell.myCellImageV.image = imageArray[indexPath.section]

it works, but it repeats a SINGLE image in a section. The first image in the "imageArray" repeats and fills up the first 5 CELLS in the first SECTION.

The 2nd image in the "imageArray" repeats and fills up the 2nd 5 CELLS in the 2nd SECTION. Likewise the 3rd image to the 3rd SECTION.

So only the first 3 images in the imageArray are filling up the 3 SECTIONS & 15 CELLS.

Any help on how to fit this will be greatly appreciated. -THANKS Martin for your help

Martin Wildfeuer
Martin Wildfeuer
Courses Plus Student 11,071 Points

Just to be a 100% sure before we continue debugging: have you applied my code like this before?

let index = indexPath.section * 5 + indexPath.row
cell.myCellImageV.image = imageArray[index]