Search code examples
iosobjective-cuiscrollviewgpuimage

iOS scrollview with grayscale image on inactive and normal image on scroll

The statement

The images in scrollview will gain colour when the scrollview is scrolling and be grayscaled after scroll has ended or is not scrolling.

Contents in scrollview

The scrollview will UIView and UIImage as a direct descendant. The image may or may not be contained in every UIView. Each UIView may have texts, texts & images and images.

Resolution of images

The image resolution will be small, something like 300x150, 450x150

What have we done ?

We have come across GPUImage Framework by Brad Larson. The framework is impressive to say the least, and we have been fascinated with everything the framework offers.

Our initial tests on performance by the framework is satisfactory.

We have managed to use GPUImageGrayscaleFilter to transform images into grayscale images when they are inserted in the scrollview.

Optimization

We have decided to apply filters on images that are visible in the scrollview. This will significantly reduce the load

Where are we stuck now ?

There are two ways we could get the color back to the image

  1. remove GPUImageGrayscaleFilter from the UIImage. We have not been able to do this.
  2. remove the UIImage and insert the original image. The images are being downloaded with cache policy of NSURLRequestReturnCacheDataElseLoad. inserting the downloaded image will not be a issue.

Either way, we will be applying filter and inserting same image number of times. We are not certain about this part. Are we missing a simple trick ?

I would like to thank everyone in advance for their time and response :)

UPDATE & SOLUTION

I was able to achieve this using GPUImage.

Steps involved

  1. Assign normal image to UIControlStateNormal of UIButton and grayscale transformed image from GPUImageGrayScaleFilter to UIControlStateHighlighted
  2. Trigger state change when you want image to gain color
  3. Trigger state change when you want image to be grayed

The performance of this carousel is very smooth. There is a spike in GPU Time Elapsed profile in the begining but afterwards its absolutely zero.

I will update the profiling stats as we progress with our tests.

Thanks everyone.

Solution

  • If you have a limited number of images, you can download a normal image, create a grayscale copy and save both to disk. In the scroll view, instead of UIImageView, use UIButton with type custom and clear background color. UIButton lets you set a different image for different control states. Set the normal and grayscale images for normal and selected/disabled state. For the views which do not need an image just don't set an image. Change the button's state when scrolling begins and ends, in the delegate.

    P.S. : Have you considered scroll view's more sophisticated descendants 'UITableView' and 'UICollectionView' instead of using simple scroll view? They'll save you a lot of scrolling related code and time.