Wednesday, May 18, 2011

How to load 1000s of UIImageView on UIScrollView !

Now  I  have had experience where my juniors came across the problem of how to fit so many UIImageView on the UIScrollView .. won't it do havoc on the memory to load 100s of them at the same time..
Hence I took time to write the blog about how to go about adding 1000s of UIImageViews on the scrollview. This code has the horizontal scroller in the bottom of the screen and each page of scrollview has like 4 UIImageView on it.. There are total 4000 UIImageViews embedded on the scrollview. When user presses any imageview on the scroller, that image is displayed on the top in bigger view.

I have applied the methods of loading 3 pages at a time.

Unload any previous pages on scrollview - Load Previous Page  -  Load Current Page  -  Load Next Page  -  Unload any other next page.


Suppose you have pages as following on your scrollview
Page 1- Page 2- Page 3- Page 4- Page 5- Page 6- Page 7- Page 8- Page 9

When application starts, it loads Page 1 and Page 2 before you even see the screen.
You scroll to the right

If Page 2(already loaded in the memory) is your current Page, then you load page 3(so that when you scroll from current page to page 3, it is smooth as the page 3 is already loaded in the memory) and keep the page 1 in memory because if user goes from page 2 back to page 1, then it is smooth scrolling with preloaded images and you wont need to load the page again.

You scroll more to the right.
You unload the Page 1 from your scrollview.
If Page 3(already loaded in the memory in the previous step) is your current Page, then you load page 4(so that when you scroll from current page to page 4, it is smooth as the page 4 is already loaded in the memory) and keep the page 2 in memory because if user goes from page 3 back to page 2, then it is smooth scrolling with preloaded images and you wont need to load the page again.

Now, let assume if user goes back from Page 3 to Page 2.
You unload Page 4.
You already have Page 2 and Page 3 in the memory.
You load Page 1.
Because at any time, you can have only n-1,n  and n+1 page with image views loaded in your scrollview where n is your current page, you have to unload any other pages which includes n-2, n-3 (with n-m > 0) and n+2,n+3 (with n+m < total pages).



It looks like the screenshot below.




























You can download the code from here


10 comments:

  1. Hi, I tried to download the code but the link doesn't work, can you please have a look? Thanks!

    ReplyDelete
  2. Oops, sorry, please ignore my comment, it's downloaded but I thought it didn't. Will be more careful next time. Thanks for the helpful information!

    ReplyDelete
  3. sorry mate but what you are doing here is NOT loading 1000 images. Instead you are REPEATING 1000 times the same images over and over again. You need to add a method to your code to add 1000 DIFFERENT images...
    sorry

    ReplyDelete
  4. @George, This is for systematic loading 1000s of UIImageViews on Scrollview if you read the article HEADLINE. This has to do with memory management.

    You can write your own method to load your 1000 images.It is simple to write a method like that.

    ReplyDelete
    Replies
    1. ok. whatever. still it shouldnt say "load 1000 images" but repeat 1000 times the same images... Huge difference mate!

      Delete
  5. This comment has been removed by the author.

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. Can i use it in UITableViewCell? If yes please give me how can i use it? please

    ReplyDelete
  8. When I use 100 diferent images...memory crash....
    See my code and help me, pls
    http://pastebin.com/BKmsdXxf

    ReplyDelete