0

I'm trying to create a grid that displays about 5000 (static) thumbnails. To set up the grid, I'm using GridView library, which is a scrollview subclass that allows two dimensional scrolling.

This works fine when there are about 100-200 thumbs on the screen at once, but I'd like to add the ability to zoom in / out of the grid. This becomes when a problem when zooming out and the number of items increases to about 1000 on screen at once - the grid's scrolling lags heavily.

To display the thumbs, I'm using a UIView subclass that is inflated from a nib file that holds a UIImageview to display the cell's thumb.

I realize there are better ways to this, but I'm not sure where to start. How should I load cells into the grid if not from nibs? Should I use core graphics?

EDIT: Here's an example of the grid:

enter image description here

And here's the zoomed out grid: enter image description here

The grid will need to display about 5000 elements on screen at once (the screenshot above is about 1500 elements). Here is the relevant code

// IN GRIDVIEW'S DATASOURCE & DELEGATES
func gridView(_ gridView: GridView, cellForRowAt indexPath: IndexPath) -> GridViewCell {

    // this function sets up each cell

    let cell = gridView.dequeueReusableCell(withReuseIdentifier: "GridCell", for: indexPath)
    if let cell = cell as? GridCell {

        cell.configure(indexPath.row, indexPath.section)
    }

    return cell
}

// GRIDCELL DECLARATION
 class GridCell: GridViewCell {
@IBOutlet weak var image: UIImageView!

static var nib: UINib {
    return UINib(nibName: "GridCell", bundle: Bundle(for: self))
}

func configure(_ row: Int, _ section: Int) {
    // this function will sets up the thumbnails. As an example, we're changing the background color of cells in odd rows
    if (row % 2 == 1) {
        self.backgroundColor = .gray
    }
    else {
        self.backgroundColor = .white
    }
}
}
Malfunction
  • 1,324
  • 4
  • 15
  • 25
  • Pls share screenshots or more relevant code for what you are trying – Ajay Beniwal Sep 19 '17 at 07:45
  • @AjayBeniwal I updated the question with some screenshots. – Malfunction Sep 19 '17 at 07:52
  • 1
    Its very difficult to tell what is going wrong here without actual code , Instruments app is your best friends here try to profile the app with Instruments and see what is the cause of lag here which function is talking lot of time to draw on screen – Ajay Beniwal Sep 19 '17 at 07:56
  • @AjayBeniwal Thanks Ajay! I'm looking into instruments right now. Meanwhile, I've add some relevant code. – Malfunction Sep 19 '17 at 08:21
  • Try the UICollectionView. Here a SO thread with sample code links: https://stackoverflow.com/questions/22182657/how-to-enable-zoom-for-uicollectionview – Rishi Sep 19 '17 at 08:34
  • @Rishi That doesn't support two dimensional scrolling, and really doesn't solve the issue - the collection view will still lag when set up with a huge number of elements like I'm trying to do. – Malfunction Sep 19 '17 at 08:36
  • I think the answer here is to use some kind of simplified thumbnail when you scroll out a certain distance because I don't see how you aren't going to get laggy performance as that is a huge amount of image processing at once. Think about how websites often display a blurred / pixelated / simplified version of a picture while the full image loads. If you have 5000 images on screen at once, arguably you could just replace the images with circles representing the dominant colour. – Marcus Sep 19 '17 at 09:41
  • @Sparky But these circles will still be views, wouldn't they? That won't solve the problem. Apple's Photos app can display a huge number of thumbnails in its "years" view, and I've seen other apps do something similar to this. I'm just not sure how to approach the problem! – Malfunction Sep 19 '17 at 10:51

0 Answers0