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

时间:2013-10-22 19:45:43

标签: ios iphone objective-c uiscrollview

我是iOS的初学者,所以我不确定在这里研究什么。我有一个UIScrollView,添加了几个方形子视图。当他们接近屏幕中心时,如何使子视图在屏幕上滚动时变小?更大?

#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

3 个答案:

答案 0 :(得分:5)

在这里,您可以找到一个完整的示例,说明您要完成的任务。它只有 一个子视图,因为它只是让你知道如何实现它。此外,此示例在iPad(iOS7)模拟器上进行了测试。

* .h文件

#import <UIKit/UIKit.h>

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

@property (nonatomic, strong) UIView *squareView;

@end

* .m文件

#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

以下是对正在发生的事情的一点解释:

UIScrollView有几个允许您正确配置的属性。例如,它有一个frame(灰色),它继承自UIView;使用此属性指定滚动视图的可见大小。它还有contentSize(红色),它指定了滚动视图的总大小;在图像中,它显示为红色区域,但这仅用于插图目的,因为在程序中不可见。想象一下滚动视图的框架作为窗口,让您只看到滚动视图所具有的更大内容的一部分。

当用户开始滚动时,在contentSize的顶部和框架的顶部之间出现间隙。这个差距称为contentOffset

enter image description here

希望这有帮助!

答案 1 :(得分:2)

假设您在self.view内有scrollView,您可以在滚动视图scrollViewDidScroll:中实现delegate以查找滚动时间。

- (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
    }
}

您可以根据需要使用框架调整子视图的大小。

答案 2 :(得分:0)

答案从分析UIScrollView类Reference开始,它是delegate。在委托文档中,请参阅响应滚动和拖动部分。您还应该查看每个示例代码。您可以为子视图创建出口,并在uiview animation内更改子视图属性。这些参考资料将为您提供一个良好的基础,帮助您了解可以在何处构建调用以为子视图设置动画。

以下是animating subviews的链接。其他示例可以通过Google搜索“uiview子视图动画”(不带引号)找到。如果遇到任何重大问题,请首先阅读头文件并发布一些示例代码以获得更多(更精确)的帮助。

其他参考: UIKit ScrollViews