UIScrollview - 如何在滚动离开屏幕时使子视图更小

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!

Answer 2

Assuming that you have the scrollView inside self.view , you can implement scrollViewDidScroll: in the scroll view delegate to find when it is scrolled.

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    for (UIView *view in self.scrollView.subviews) {
        CGRect frame = [view convertRect:view.frame toView:self.view]; // Contains the frame of view with respect to self.view
    }
}

You can them use the frame to resize subviews as you want.

Answer 3

The answer starts with analyzing the UIScrollView Class Reference and it's delegate . In the delegate documentation see the responding to scrolling and dragging section. You should also review the sample code for each. You can create outlets to your subviews and change the subview properties within a uiview animation . These references will give you a good foundation in understanding where you can build the call to animate the subviews.

Here is a link to animating subviews . Additional examples can be found by Googling "uiview subview animation" (without the quotes). If you run into any major issues read the header files first and post some sample code for additional (more precise) help.

Other reference: UIKit ScrollViews