Scroll View School Hands-On Challenges

Transcription

1

2 Scroll View School Hands-On Challenges Copyright 2014 Razeware LLC. All rights reserved. No part of this book or corresponding materials (such as text, images, or source code) may be reproduced or distributed by any means without prior written per- mission of the copyright owner. This book and all corresponding materials (such as source code) are provided on an "as is" basis, without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose, and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in action of contract, tort or otherwise, arising from, out of or in connec- tion with the software or the use or other dealings in the software. All trademarks and registered trademarks appearing in this book are the property of their respective owners.

3 Challenge C: Scrolling Background The about screen from the lecture is a great start, but it would look even better if there was a background image behind the about page, with the blurred effect popularized in ios 7. To add some extra polish, you ll even add some parallax scrolling! Part 1: Dual Scroll Views Open the starter project for this challenge (which is the same spot where the demo from the lecture left off). Open Main.storyboard, and drag another scroll view inside the About Scene, as a direct child of the main view (and a sibling of the other scroll view). Select the new scroll view, and make its size equal to the main view. Then go to Editor\Pin\Leading Space to Superview. Repeat this for the other edges. Add an image view as a child of this new scroll view, and set the image to BackgroundBlurred. Pin the image view to all 4 edges of the scroll view with 0 distance. Build and run the app, and you should see the following:

4 Notice that there is a problem the text Flappy Felipe isn t completely visible at start, even though Adjust Scroll View Insets is selected in the Storyboard editor. This is because Adjust Scroll View Insets only works for the first child scroll view, and now that you have two child scroll views the view controller is no longer automatically adjusting the second (foreground) scroll view. To fix this, simply add this these lines at the end of viewdidload: CGFloat topinset = CGRectGetHeight(self.navigationController.navigationBar.frame) + CGRectGetHeight( [UIApplication sharedapplication].statusbarframe); self.fgscrollview.contentinset = UIEdgeInsetsMake(topInset, 0, 0, 0); self.fgscrollview.scrollindicatorinsets = UIEdgeInsetsMake(topInset, 0, 0, 0); Build and run, and it s looking slightly better:

5 However, notice that you can t see the background behind the status bar (this was actually the case before too, but it wasn t as easy to see since the text was showing up behind). To fix this, simply open Main.storyboard and uncheck Adjust Scroll View Insets. Build and run one last time: Looking good! Uber Haxx0r Challenge: Parallax Scrolling It turns out that BackgroundBlurred image provided in this starter project is taller than the screen. Your challenge is to add a bit of extra polish to the about

6 page and make the background scroll view scroll from top to bottom, as you scroll the foreground scroll view from top to bottom. Since the content size of the background scroll view is less than the content size of the foreground scroll view, you wills scroll the background slower than the foreground image scrolls, for a neat parallax effect. Here are some hints on accomplishing this: You ll need to implement scrollviewdidscroll:, and refresh the background scroll view s content offset each time. First figure out the percentage that the foreground view has scrolled so far. Then update the background view to be a similar percent. You may wish to reduce the background image view s scroll area a bit so that when you bounce the foreground outside of the visible area, you don t see blank space.