Showing posts with label 1000s of UIImageView on UIScrollView. Show all posts
Showing posts with label 1000s of UIImageView on UIScrollView. Show all posts

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