iPhone开发之UIScrollView初步

来源：http://blog.csdn.net/htttw/article/details/7891396

iPhone开发之UIScrollView初步

 

 

 

今天我们初步介绍以一下iPhone开发中的UIScrollView。顾名思义，UIScrollView就是可以滚动的视图，常常用在图片显示（缩放，滚动等），文本显示等，是一个非常有用的控件。今天我们的例子很简单：在顶部有一个文本框和一个按钮，在文本框中输入数字，点击按钮，就会在下方的UIScrollView中出现相应数目的按钮，超出一屏的部分用垂直滚动条显示。这个例子我们用两种方法实现。并且我们都不使用Interface Builder来画界面，完全手工写代码完成。下面开始吧：

方法1：

1.

新建一个View-based Application，名称是Scroll

2.

修改 ScrollViewController.h 如下：

 

//
//  ScrollViewController.h
//  Scroll
//
//  Created by HuTao on 8/21/12.
//  Copyright __MyCompanyName__ 2012. All rights reserved.
//

#import <UIKit/UIKit.h>


@interface ScrollViewController : UIViewController<UIScrollViewDelegate>
{
    UITextField * textFieldNumber;
    UIButton * btnStart;
    UIScrollView * scrollView;

    NSMutableArray * btnArray;
}


@property (retain, nonatomic) UITextField * textFieldNumber;
@property (retain, nonatomic) UIButton * btnStart;
@property (retain, nonatomic) UIScrollView * scrollView;
@property (retain, nonatomic) NSMutableArray * btnArray;;


-(IBAction)btnStartAction:(id)sender;
-(IBAction)btnAlert:(id)sender;


@end

修改 ScrollViewController.m 如下：

 

//
//  ScrollViewController.m
//  Scroll
//
//  Created by HuTao on 8/21/12.
//  Copyright __MyCompanyName__ 2012. All rights reserved.
//

#import "ScrollViewController.h"


@implementation ScrollViewController


@synthesize textFieldNumber;
@synthesize btnStart;
@synthesize scrollView;
@synthesize btnArray;



// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad
{
    [super viewDidLoad];

    self.view.backgroundColor = [UIColor yellowColor];


    int widthOut = self.view.frame.size.width;
    int widthIn = widthOut - 20;

    btnArray = [[NSMutableArray alloc] init];

    //声明一个 UITextField
    textFieldNumber = [[UITextField alloc] initWithFrame:CGRectMake(10, 10, widthIn - 70, 30)];
    textFieldNumber.backgroundColor = [UIColor whiteColor];
    textFieldNumber.borderStyle = UITextBorderStyleRoundedRect;
    [self.view addSubview:textFieldNumber];

    //声明一个 UIButton
    btnStart = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [btnStart setTitle:@"开始" forState:UIControlStateNormal];
    btnStart.frame = CGRectMake(widthIn - 50, 10, 60, 30);
    [btnStart addTarget:self action:@selector(btnStartAction:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btnStart];

    //声明一个 UIScrollView
    scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 50, widthOut, self.view.frame.size.height - 50)];
    scrollView.backgroundColor = [UIColor redColor];

    //任意划动
    scrollView.pagingEnabled = NO;

    //划动过程中显示水平滚动条(如果有)
    scrollView.showsHorizontalScrollIndicator = YES;

    //划动过程中显示垂直滚动条(如果有)
    scrollView.showsVerticalScrollIndicator = YES;

    //点击顶部的状态栏滚动到首
    scrollView.scrollsToTop = YES;
    scrollView.delegate = self;

    [self.view addSubview:scrollView];
}


-(IBAction)btnStartAction:(id)sender
{
    [textFieldNumber resignFirstResponder];

    int i;
    UIButton * button;

    for(i=0; i<[btnArray count]; ++i)
    {
        button = (UIButton *)[btnArray objectAtIndex:i];

        //先删除所有按钮(删除后按钮自然不可见)
        [button removeFromSuperview];
    }
    [btnArray removeAllObjects];


    int number = [textFieldNumber.text intValue];


    for(i=0; i<number; ++i)
    {
        button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        [button setTitle:[NSString stringWithFormat:@"%d", i] forState:UIControlStateNormal];
        button.frame = CGRectMake(10, 10 + i * 40, self.view.frame.size.width - 20, 30);
        [button addTarget:self action:@selector(btnAlert:) forControlEvents:UIControlEventTouchUpInside];
        [btnArray addObject:button];
        [scrollView addSubview:button];
    }

    //设置UIScrollView中要滚动的窗口大小(很重要)
    scrollView.contentSize = CGSizeMake(self.view.frame.size.width, number * 40 + 10);
}


-(IBAction)btnAlert:(id)sender
{
    UIButton * btn = (UIButton *)sender;

    NSString * str = [NSString stringWithFormat:@"您按下了 %@ 键", btn.currentTitle];
    UIAlertView * alterview = [[UIAlertView alloc] initWithTitle:@"" message:str delegate:nil cancelButtonTitle:nil otherButtonTitles:@"确定", nil];
    [alterview show];
    [alterview release];
}


- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    NSLog(@"scrollViewDidScroll");
}


- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    NSLog(@"scrollViewWillBeginDragging");
}


- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    NSLog(@"scrollViewDidEndDragging");
}


- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView
{
    NSLog(@"scrollViewWillBeginDecelerating");
}


- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    NSLog(@"scrollViewDidEndDecelerating");
}


- (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView
{
    NSLog(@"scrollViewShouldScrollToTop");

    return YES;
}

- (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView
{
    NSLog(@"scrollViewDidScrollToTop");
}



- (void)viewDidUnload
{
    textFieldNumber = nil;
    btnStart = nil;
    scrollView = nil;

    btnArray = nil;
}


- (void)dealloc
{
    [super dealloc];

    [textFieldNumber release];
    [btnStart release];
    [scrollView release];

    [btnArray release];
}


@end

说明：

1.

在 Interface Builder 中，我们使用连线来关联控件与IBAction，用代码完成的话则是：

 

addTarget:(id)target action:(SEL)action forControlEvents:(UIControlEvents)controlEvents

其中action是@selector(actionFunction:)，一定不要忘记最后的冒号！

2.

要使用 UIScrollView，则必须实现 UIScrollViewDelegate，该Delegate定义如下：

 

@protocol UIScrollViewDelegate<NSObject>

@optional

- (void)scrollViewDidScroll:(UIScrollView *)scrollView;                                               // any offset changes
- (void)scrollViewDidZoom:(UIScrollView *)scrollView __OSX_AVAILABLE_STARTING(__MAC_NA,__IPHONE_3_2); // any zoom scale changes

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;                              // called on start of dragging (may require some time and or distance to move)
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate; // called on finger up if user dragged. decelerate is true if it will continue moving afterwards

- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView;   // called on finger up as we are moving
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView;      // called when scroll view grinds to a halt

- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView; // called when setContentOffset/scrollRectVisible:animated: finishes. not called if not animating

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;     // return a view that will be scaled. if delegate returns nil, nothing happens
- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view __OSX_AVAILABLE_STARTING(__MAC_NA,__IPHONE_3_2); // called before the scroll view begins zooming its content
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale; // scale between minimum and maximum. called after any 'bounce' animations

- (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView;   // return a yes if you want to scroll to the top. if not defined, assumes YES
- (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView;      // called when scrolling animation finished. may be called immediately if already at top

@end

 

有几个是比较重要的：

scrollViewDidScroll：scrollView只要在滚动就会触发该方法（无论是被用户拖动还是在拖动后scrollView由于惯性继续滚动一点距离）

scrollViewWillBeginDragging：scrollView被用户拖动前就会触发该方法

scrollViewDidEndDragging：scrollView被用户拖动结束后就会触发该方法

scrollViewWillBeginDecelerating：scrollView在拖动后继续滚动前就会触发该方法

scrollViewDidEndDecelerating：scrollView在拖动后继续滚动后停止就会触发该方法

scrollViewShouldScrollToTop：返回YES或NO，表示是否支持用户点击屏幕顶端的状态条后scrollView滚动到顶端（默认YES）

scrollViewDidScrollToTop：用户点击屏幕顶端的状态条后scrollView滚动到顶端后会触发该方法（scrollViewShouldScrollToTop如果返回NO，则该方法不会被触发）

UIScrollView的常用属性如下：

 

scrollView.pagingEnabled = NO;

//划动过程中显示水平滚动条(如果有)
scrollView.showsHorizontalScrollIndicator = YES;

//划动过程中显示垂直滚动条(如果有)
scrollView.showsVerticalScrollIndicator = YES;

//点击顶部的状态栏滚动到首
scrollView.scrollsToTop = YES;
scrollView.delegate = self;
scrollView.contentSize = CGRect

pagingEnabled：是否以整数倍的UIScrollView大小滚动（如果是用于图片类的UIScrollView，该值应该设置为YES，如果是用于显示文本类的UIScrollView或者类似与本例的允许用户滚动到任意位置的情况时应该设置为NO）

contentOffset：UIScrollView中content的左上角坐标

contentSize：UIScrollView中content的大小，该值与UIScrollView的大小决定滚动条的长短

decelerating：UIScrollView在拖动放手后是否仍在由于惯性继续滚动中

dragging：UIScrollView是否正在被用户拖动

showsHorizontalScrollIndicator：是否显示水平滚动条

showsVerticalScrollIndicator：是否显示垂直滚动条

另外例子中还介绍了如何用代码（而不是Interface Builder）创建GUI控件，可以看看。

运行结果：

初始界面：

输入20，按开始键，生成了20个UIButton：

划动屏幕，出现滚动条：

点击任意一个按钮：

输入小一点的数字：

Console输出结果如下：

下面介绍方法2：

1.

和方法1类似，不过新建一个 Window-based Application，名称是Scroll2：

2.

新建一个基于UIView的子类，名称是ScrollView

3.

修改 Scroll2AppDelegate.m 如下：

 

//
//  Scroll2AppDelegate.m
//  Scroll2
//
//  Created by HuTao on 8/21/12.
//  Copyright __MyCompanyName__ 2012. All rights reserved.
//

#import "Scroll2AppDelegate.h"
#import "ScrollView.h"


@implementation Scroll2AppDelegate


@synthesize window;


#pragma mark -
#pragma mark Application lifecycle

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    //注意这里的坐标，是除去了顶部的状态栏之后的剩余部分
    ScrollView * view = [[ScrollView alloc] initWithFrame:CGRectMake(0, 20, 320, 460)];
    [window addSubview:view];
    [window makeKeyAndVisible];

    return YES;
}

- (void)dealloc
{
    [window release];
    [super dealloc];
}


@end

方法1我们用的是UIViewController，方法2我们直接用了UIView，都是可以的。

修改 ScrollView.h 如下：

 

//
//  ScrollView.h
//  Scroll2
//
//  Created by HuTao on 8/21/12.
//  Copyright 2012 __MyCompanyName__. All rights reserved.
//

#import <UIKit/UIKit.h>


@interface ScrollView : UIView<UIScrollViewDelegate>
{
    UITextField * textFieldNumber;
    UIButton * btnStart;
    UIScrollView * scrollView;

    NSMutableArray * btnArray;
}


@property (retain, nonatomic) UITextField * textFieldNumber;
@property (retain, nonatomic) UIButton * btnStart;
@property (retain, nonatomic) UIScrollView * scrollView;
@property (retain, nonatomic) NSMutableArray * btnArray;;


-(IBAction)btnStartAction:(id)sender;
-(IBAction)btnAlert:(id)sender;


@end

方法2实现了UIScrollViewDelegate的是UIView，而不是方法1中的UIViewController，都是可以的

修改 ScrollView.m 如下：

 

//
//  ScrollView.m
//  Scroll2
//
//  Created by HuTao on 8/21/12.
//  Copyright 2012 __MyCompanyName__. All rights reserved.
//

#import "ScrollView.h"


@implementation ScrollView


@synthesize textFieldNumber;
@synthesize btnStart;
@synthesize scrollView;
@synthesize btnArray;


- (id)initWithFrame:(CGRect)frame
{
    if ((self = [super initWithFrame:frame]))
    {
        self.backgroundColor = [UIColor yellowColor];

        int widthOut = self.frame.size.width;
        int widthIn = widthOut - 20;

        btnArray = [[NSMutableArray alloc] init];

        //声明一个 UITextField
        textFieldNumber = [[UITextField alloc] initWithFrame:CGRectMake(10, 10, widthIn - 70, 30)];
        textFieldNumber.backgroundColor = [UIColor whiteColor];
        textFieldNumber.borderStyle = UITextBorderStyleRoundedRect;
        [self addSubview:textFieldNumber];

        //声明一个 UIButton
        btnStart = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        [btnStart setTitle:@"开始" forState:UIControlStateNormal];
        btnStart.frame = CGRectMake(widthIn - 50, 10, 60, 30);
        [btnStart addTarget:self action:@selector(btnStartAction:) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:btnStart];

        //声明一个 UIScrollView
        scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 50, widthOut, self.frame.size.height - 50)];
        scrollView.backgroundColor = [UIColor redColor];

        //任意划动
        scrollView.pagingEnabled = NO;

        //划动过程中显示水平滚动条(如果有)
        scrollView.showsHorizontalScrollIndicator = YES;

        //划动过程中显示垂直滚动条(如果有)
        scrollView.showsVerticalScrollIndicator = YES;

        //点击顶部的状态栏滚动到首
        scrollView.scrollsToTop = YES;
        scrollView.delegate = self;

        [self addSubview:scrollView];
    }

    return self;
}




-(IBAction)btnStartAction:(id)sender
{
    [textFieldNumber resignFirstResponder];

    int i;
    UIButton * button;

    for(i=0; i<[btnArray count]; ++i)
    {
        button = (UIButton *)[btnArray objectAtIndex:i];

        //先删除所有按钮(删除后按钮自然不可见)
        [button removeFromSuperview];
    }
    [btnArray removeAllObjects];


    int number = [textFieldNumber.text intValue];


    for(i=0; i<number; ++i)
    {
        button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        [button setTitle:[NSString stringWithFormat:@"%d", i] forState:UIControlStateNormal];
        button.frame = CGRectMake(10, 10 + i * 40, self.frame.size.width - 20, 30);
        [button addTarget:self action:@selector(btnAlert:) forControlEvents:UIControlEventTouchUpInside];
        [btnArray addObject:button];
        [scrollView addSubview:button];
    }

    //设置UIScrollView中要滚动的窗口大小(很重要)
    scrollView.contentSize = CGSizeMake(self.frame.size.width, number * 40 + 10);
}



-(IBAction)btnAlert:(id)sender
{
    UIButton * btn = (UIButton *)sender;

    NSString * str = [NSString stringWithFormat:@"您按下了 %@ 键", btn.currentTitle];
    UIAlertView * alterview = [[UIAlertView alloc] initWithTitle:@"" message:str delegate:nil cancelButtonTitle:nil otherButtonTitles:@"确定", nil];
    [alterview show];
    [alterview release];
}


- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    NSLog(@"scrollViewDidScroll");
}


- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    NSLog(@"scrollViewWillBeginDragging");
}


- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    NSLog(@"scrollViewDidEndDragging");
}


- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView
{
    NSLog(@"scrollViewWillBeginDecelerating");
}


- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    NSLog(@"scrollViewDidEndDecelerating");
}


- (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView
{
    NSLog(@"scrollViewShouldScrollToTop");

    return YES;
}

- (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView
{
    NSLog(@"scrollViewDidScrollToTop");
}


- (void)dealloc
{
    [super dealloc];

    [textFieldNumber release];
    [btnStart release];
    [scrollView release];

    [btnArray release];
}


@end

我们将初始化代码放在了[UIView initWithFrame]中，注意到我们在Scroll2AppDelegate.m中调用了initWithFrame方法，传入了一个CGRect的窗口大小。总的来说，方法1中的self.view.xxx只要改成方法2中的self.xxx就可以了。由此可见iPhone开发的灵活性。对于一个界面，即可以使用UIViewController（内包含一个UIView，就像方法1），也可以直接使用UIView（方法2），很方便。

运行结果与方法1完全一样，故不在赘述。

最后我把两种方法的完整代码一起打包上传上来了：

http://download.csdn.net/detail/htttw/4516528

完成！

更多0