0

I have a UIScrollView over an image at the bottom of my app that acts as a dock with icons that can be scrolled through horizontally. Instead of the harsh edges of the UIScrollView, I would like the icons to fade out for a more aesthetically pleasing look. Being new to iOS development, I don't know if either of these would be valid options:

  1. Create a faded image to use as an overlay on the scrollview so the icons only appear through the visible portion.
  2. Actually change the alpha of the images based on their distance from the center (or from each edge).

I suspect the first idea would be the most simple, but I'd like to throw this out there for any other ideas.

Note: I did see this tutorial, however that technique assumes that the background is a solid color. If I were to do it programatically, I would probably need to fade the individual images.

Alec Sanger
  • 4,442
  • 1
  • 33
  • 53

1 Answers1

1

You can definitely implement something along the lines of #2. It'd be something similar to what the tutorial describes. The alpha transition however won't be as smooth as using the gradient layer mentioned in the tutorial or using an image since the entire icon would have the same alpha. How much discernible the difference is depends on the size of your icons. Smaller icons, very few will be able to tell the difference. Larger icons the difference would be quite clear.

You'd have to implement the

  • (void)scrollViewDidScroll:(UIScrollView *)scrollView

method in your scroll view's delegate class. This method will get called every time the scroll view changes the location of its content. In this method you can call its subviews and adjust their alphas as required. To optimize it a bit instead of calling the alpha adjustments on all the elements you can just update the subviews which are still partially/completely visible.

EDIT: to figure out which views to adjust you'll use the contentOffset property of the scrollView that gets passed as a parameter in the above method.

kanwalkapoor
  • 78
  • 5
  • I ended up going with something similar to what you described, so I'll give you the points for it. I ended up using the same CAGradientLayer from the tutorial that I posted, rotated the points, set the bounds to the scrollview, and applied the mask to the container within the scrollview that held all of my icons. This ended up working perfectly. I did not need to touch any of the individual icon alpha values. – Alec Sanger Apr 25 '12 at 16:50