UIScrollview - how to make subview smaller as it scrolls off screen

Question

I'm a beginner with iOS, so i'm just not sure what to research here. I have a UIScrollView with a few square subViews added. How can i make the subviews smaller as they scroll off screen and bigger as they approach the center of the screen?

#import "HorizontalScrollMenuViewController.h"
#import <UIKit/UIKit.h>

#define SUBVIEW_WIDTH_HEIGHT 280
@interface HorizontalScrollMenuViewController : UIViewController

@property (nonatomic, strong) IBOutlet UIScrollView *scrollView;

@end


@implementation HorizontalScrollMenuViewController

-(void)viewDidLoad{
    [super viewDidLoad];

    NSArray *colors = [NSArray arrayWithObjects:[UIColor greenColor],[UIColor redColor],[UIColor orangeColor],[UIColor blueColor],nil ];
    CGRect screenRect = [[UIScreen mainScreen] bounds];
    CGFloat screenWidth = screenRect.size.width;
    CGFloat screenHeight = screenRect.size.height;
    CGFloat originX = (screenWidth - SUBVIEW_WIDTH_HEIGHT)/2.0; // get margin to left and right of subview
    CGFloat originY = ((screenHeight - SUBVIEW_WIDTH_HEIGHT)/2);


    // add subviews of all activities
    for (int i = 0; i < colors.count; i++){

        CGRect frame = CGRectMake(0,0,SUBVIEW_WIDTH_HEIGHT,SUBVIEW_WIDTH_HEIGHT);
        frame.origin.x = self.scrollView.frame.size.width * i + originX;
        frame.origin.y = originY;
        UIView *subView = [[UIView alloc] initWithFrame:frame];

        [UIView setAnimationBeginsFromCurrentState: YES];
        subView.layer.cornerRadius = 15;
        subView.layer.masksToBounds = YES;

        subView.backgroundColor = [colors objectAtIndex:i];

        [self.scrollView addSubview:subView];
    }

    self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width * colors.count, self.scrollView.frame.size.height);
}

@end

Answer 1

Here you can find a fully working example of what you're trying to accomplish. It only has one subview because it's just to give you an idea of how can you accomplish it. Also, this example was tested on an iPad (iOS7) simulator.

The *.h file

#import <UIKit/UIKit.h>

// Remember to declare ourselves as the scroll view delegate
@interface TSViewController : UIViewController <UIScrollViewDelegate>

@property (nonatomic, strong) UIView *squareView;

@end

The *.m file

#import "TSViewController.h"

@implementation TSViewController
@synthesize squareView = _squareView;

- (void)viewDidLoad
{
    [super viewDidLoad];

    // Create and configure the scroll view (light gray)
    UIScrollView *myScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(100, 100, 500, 500)];
    CGRect contentSize = myScrollView.frame;
    contentSize.size.height = contentSize.size.height + 400;
    myScrollView.contentSize = contentSize.size;
    myScrollView.userInteractionEnabled = YES;

    // give the scroll view a gray color so it's easily identifiable
    myScrollView.backgroundColor = [UIColor lightGrayColor];

    // remember to set yourself as the delegate of the scroll view
    myScrollView.delegate = self;

    [self.view addSubview:myScrollView];

    // Create and configure the square view (blue)
    self.squareView = [[UIView alloc] initWithFrame:CGRectMake(200, 400, 60, 60)];
    self.squareView.backgroundColor = [UIColor blueColor];
    [myScrollView addSubview:self.squareView];
}

// Here is where all the work happens
-(void)scrollViewDidScroll:(UIScrollView *)scrollView {

    // Get the difference between the contentOffset y position and the squareView y position
    CGFloat y = self.squareView.frame.origin.y - scrollView.contentOffset.y;

    // If the square has gone out of view, return
    if (y <= 0) {
        return;
    }

    // Modify the squareView's frame depending on it's current position
    CGRect squareViewFrame = self.squareView.frame;
    squareViewFrame.size.height = y + 5;
    squareViewFrame.size.width = y + 5;
    squareViewFrame.origin.x = (scrollView.contentSize.width - squareViewFrame.size.width) / 2.0;
    self.squareView.frame = squareViewFrame;
}

@end

And here is a little explanation of what is going on:

A UIScrollView has several properties that allow you to configure it correctly. For example it has a frame (gray) which is inherited from UIView; with this property you specify the visible size of the scroll view. It also has the contentSize (red) which specifies the total size of the scroll view; in the image it's showed as the red area but this is only for illustration purposes as it will not be visible in the program. Imagine the scroll view's frame as the window that let's you see only a part of the bigger content the scroll view has.

When the user starts scrolling a gap appears between the top part of the contentSize and the top part of the frame. This gap is known as the contentOffset

• Here is the reference to UIScrollView
• Here is the reference to UIScrollViewDelegate

Hope this helps!