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 如下：

[cpp] view plaincopy

1. //
2. //  ScrollViewController.h
3. //  Scroll
4. //
5. //  Created by HuTao on 8/21/12.
6. //  Copyright __MyCompanyName__ 2012. All rights reserved.
7. //
8. #import <UIKit/UIKit.h>
9. @interface ScrollViewController : UIViewController<UIScrollViewDelegate>
10. {
11. UITextField * textFieldNumber;
12. UIButton * btnStart;
13. UIScrollView * scrollView;
14. NSMutableArray * btnArray;
15. }
16. @property (retain, nonatomic) UITextField * textFieldNumber;
17. @property (retain, nonatomic) UIButton * btnStart;
18. @property (retain, nonatomic) UIScrollView * scrollView;
19. @property (retain, nonatomic) NSMutableArray * btnArray;;
20. -(IBAction)btnStartAction:(id)sender;
21. -(IBAction)btnAlert:(id)sender;
22. @end

修改 ScrollViewController.m
如下：

[cpp] view plaincopy

1. //
2. //  ScrollViewController.m
3. //  Scroll
4. //
5. //  Created by HuTao on 8/21/12.
6. //  Copyright __MyCompanyName__ 2012. All rights reserved.
7. //
8. #import "ScrollViewController.h"
9. @implementation ScrollViewController
10. @synthesize textFieldNumber;
11. @synthesize btnStart;
12. @synthesize scrollView;
13. @synthesize btnArray;
14. // Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
15. - (void)viewDidLoad
16. {
17. [super viewDidLoad];
18. self.view.backgroundColor = [UIColor yellowColor];
19. int widthOut = self.view.frame.size.width;
20. int widthIn = widthOut - 20;
21. btnArray = [[NSMutableArray alloc] init];
22. //声明一个 UITextField
23. textFieldNumber = [[UITextField alloc] initWithFrame:CGRectMake(10, 10, widthIn - 70, 30)];
24. textFieldNumber.backgroundColor = [UIColor whiteColor];
25. textFieldNumber.borderStyle = UITextBorderStyleRoundedRect;
26. [self.view addSubview:textFieldNumber];
27. //声明一个 UIButton
28. btnStart = [UIButton buttonWithType:UIButtonTypeRoundedRect];
29. [btnStart setTitle:@"开始" forState:UIControlStateNormal];
30. btnStart.frame = CGRectMake(widthIn - 50, 10, 60, 30);
31. [btnStart addTarget:self action:@selector(btnStartAction:) forControlEvents:UIControlEventTouchUpInside];
32. [self.view addSubview:btnStart];
33. //声明一个 UIScrollView
34. scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 50, widthOut, self.view.frame.size.height - 50)];
35. scrollView.backgroundColor = [UIColor redColor];
36. //任意划动
37. scrollView.pagingEnabled = NO;
38. //划动过程中显示水平滚动条(如果有)
39. scrollView.showsHorizontalScrollIndicator = YES;
40. //划动过程中显示垂直滚动条(如果有)
41. scrollView.showsVerticalScrollIndicator = YES;
42. //点击顶部的状态栏滚动到首
43. scrollView.scrollsToTop = YES;
44. scrollView.delegate = self;
45. [self.view addSubview:scrollView];
46. }
47. -(IBAction)btnStartAction:(id)sender
48. {
49. [textFieldNumber resignFirstResponder];
50. int i;
51. UIButton * button;
52. for(i=0; i<[btnArray count]; ++i)
53. {
54. button = (UIButton *)[btnArray objectAtIndex:i];
55. //先删除所有按钮(删除后按钮自然不可见)
56. [button removeFromSuperview];
57. }
58. [btnArray removeAllObjects];
59. int number = [textFieldNumber.text intValue];
60. for(i=0; i<number; ++i)
61. {
62. button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
63. [button setTitle:[NSString stringWithFormat:@"%d", i] forState:UIControlStateNormal];
64. button.frame = CGRectMake(10, 10 + i * 40, self.view.frame.size.width - 20, 30);
65. [button addTarget:self action:@selector(btnAlert:) forControlEvents:UIControlEventTouchUpInside];
66. [btnArray addObject:button];
67. [scrollView addSubview:button];
68. }
69. //设置UIScrollView中要滚动的窗口大小(很重要)
70. scrollView.contentSize = CGSizeMake(self.view.frame.size.width, number * 40 + 10);
71. }
72. -(IBAction)btnAlert:(id)sender
73. {
74. UIButton * btn = (UIButton *)sender;
75. NSString * str = [NSString stringWithFormat:@"您按下了 %@ 键", btn.currentTitle];
76. UIAlertView * alterview = [[UIAlertView alloc] initWithTitle:@"" message:str delegate:nil cancelButtonTitle:nil otherButtonTitles:@"确定", nil];
77. [alterview show];
78. [alterview release];
79. }
80. - (void)scrollViewDidScroll:(UIScrollView *)scrollView
81. {
82. NSLog(@"scrollViewDidScroll");
83. }
84. - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
85. {
86. NSLog(@"scrollViewWillBeginDragging");
87. }
88. - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
89. {
90. NSLog(@"scrollViewDidEndDragging");
91. }
92. - (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView
93. {
94. NSLog(@"scrollViewWillBeginDecelerating");
95. }
96. - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
97. {
98. NSLog(@"scrollViewDidEndDecelerating");
99. }
100. - (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView
101. {
102. NSLog(@"scrollViewShouldScrollToTop");
103. return YES;
104. }
105. - (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView
106. {
107. NSLog(@"scrollViewDidScrollToTop");
108. }
109. - (void)viewDidUnload
110. {
111. textFieldNumber = nil;
112. btnStart = nil;
113. scrollView = nil;
114. btnArray = nil;
115. }
116. - (void)dealloc
117. {
118. [super dealloc];
119. [textFieldNumber release];
120. [btnStart release];
121. [scrollView release];
122. [btnArray release];
123. }
124. @end

说明：

1.

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

[plain] view plaincopy

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

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

2.

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

[cpp] view plaincopy

1. @protocol UIScrollViewDelegate<NSObject>
2. @optional
3. - (void)scrollViewDidScroll:(UIScrollView *)scrollView;                                               // any offset changes
4. - (void)scrollViewDidZoom:(UIScrollView *)scrollView __OSX_AVAILABLE_STARTING(__MAC_NA,__IPHONE_3_2); // any zoom scale changes
5. - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;                              // called on start of dragging (may require some time and or distance to move)
6. - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate; // called on finger up if user dragged. decelerate is true if it will continue moving afterwards
7. - (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView;   // called on finger up as we are moving
8. - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView;      // called when scroll view grinds to a halt
9. - (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView; // called when setContentOffset/scrollRectVisible:animated: finishes. not called if not animating
10. - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;     // return a view that will be scaled. if delegate returns nil, nothing happens
11. - (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view __OSX_AVAILABLE_STARTING(__MAC_NA,__IPHONE_3_2); // called before the scroll view begins zooming its content
12. - (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale; // scale between minimum and maximum. called after any 'bounce' animations
13. - (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView;   // return a yes if you want to scroll to the top. if not defined, assumes YES
14. - (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView;      // called when scrolling animation finished. may be called immediately if already at top
15. @end

有几个是比较重要的：

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

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

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

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

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

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

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

UIScrollView的常用属性如下：

[plain] view plaincopy

1. scrollView.pagingEnabled = NO;
2. //划动过程中显示水平滚动条(如果有)
3. scrollView.showsHorizontalScrollIndicator = YES;
4. //划动过程中显示垂直滚动条(如果有)
5. scrollView.showsVerticalScrollIndicator = YES;
6. //点击顶部的状态栏滚动到首
7. scrollView.scrollsToTop = YES;
8. scrollView.delegate = self;
9. 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 如下：

[cpp] view plaincopy

1. //
2. //  Scroll2AppDelegate.m
3. //  Scroll2
4. //
5. //  Created by HuTao on 8/21/12.
6. //  Copyright __MyCompanyName__ 2012. All rights reserved.
7. //
8. #import "Scroll2AppDelegate.h"
9. #import "ScrollView.h"
10. @implementation Scroll2AppDelegate
11. @synthesize window;
12. #pragma mark -
13. #pragma mark Application lifecycle
14. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
15. {
16. //注意这里的坐标，是除去了顶部的状态栏之后的剩余部分
17. ScrollView * view = [[ScrollView alloc] initWithFrame:CGRectMake(0, 20, 320, 460)];
18. [window addSubview:view];
19. [window makeKeyAndVisible];
20. return YES;
21. }
22. - (void)dealloc
23. {
24. [window release];
25. [super dealloc];
26. }
27. @end

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

修改 ScrollView.h
如下：

[cpp] view plaincopy

1. //
2. //  ScrollView.h
3. //  Scroll2
4. //
5. //  Created by HuTao on 8/21/12.
6. //  Copyright 2012 __MyCompanyName__. All rights reserved.
7. //
8. #import <UIKit/UIKit.h>
9. @interface ScrollView : UIView<UIScrollViewDelegate>
10. {
11. UITextField * textFieldNumber;
12. UIButton * btnStart;
13. UIScrollView * scrollView;
14. NSMutableArray * btnArray;
15. }
16. @property (retain, nonatomic) UITextField * textFieldNumber;
17. @property (retain, nonatomic) UIButton * btnStart;
18. @property (retain, nonatomic) UIScrollView * scrollView;
19. @property (retain, nonatomic) NSMutableArray * btnArray;;
20. -(IBAction)btnStartAction:(id)sender;
21. -(IBAction)btnAlert:(id)sender;
22. @end

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

修改 ScrollView.m
如下：

[cpp] view plaincopy

1. //
2. //  ScrollView.m
3. //  Scroll2
4. //
5. //  Created by HuTao on 8/21/12.
6. //  Copyright 2012 __MyCompanyName__. All rights reserved.
7. //
8. #import "ScrollView.h"
9. @implementation ScrollView
10. @synthesize textFieldNumber;
11. @synthesize btnStart;
12. @synthesize scrollView;
13. @synthesize btnArray;
14. - (id)initWithFrame:(CGRect)frame
15. {
16. if ((self = [super initWithFrame:frame]))
17. {
18. self.backgroundColor = [UIColor yellowColor];
19. int widthOut = self.frame.size.width;
20. int widthIn = widthOut - 20;
21. btnArray = [[NSMutableArray alloc] init];
22. //声明一个 UITextField
23. textFieldNumber = [[UITextField alloc] initWithFrame:CGRectMake(10, 10, widthIn - 70, 30)];
24. textFieldNumber.backgroundColor = [UIColor whiteColor];
25. textFieldNumber.borderStyle = UITextBorderStyleRoundedRect;
26. [self addSubview:textFieldNumber];
27. //声明一个 UIButton
28. btnStart = [UIButton buttonWithType:UIButtonTypeRoundedRect];
29. [btnStart setTitle:@"开始" forState:UIControlStateNormal];
30. btnStart.frame = CGRectMake(widthIn - 50, 10, 60, 30);
31. [btnStart addTarget:self action:@selector(btnStartAction:) forControlEvents:UIControlEventTouchUpInside];
32. [self addSubview:btnStart];
33. //声明一个 UIScrollView
34. scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 50, widthOut, self.frame.size.height - 50)];
35. scrollView.backgroundColor = [UIColor redColor];
36. //任意划动
37. scrollView.pagingEnabled = NO;
38. //划动过程中显示水平滚动条(如果有)
39. scrollView.showsHorizontalScrollIndicator = YES;
40. //划动过程中显示垂直滚动条(如果有)
41. scrollView.showsVerticalScrollIndicator = YES;
42. //点击顶部的状态栏滚动到首
43. scrollView.scrollsToTop = YES;
44. scrollView.delegate = self;
45. [self addSubview:scrollView];
46. }
47. return self;
48. }
49. -(IBAction)btnStartAction:(id)sender
50. {
51. [textFieldNumber resignFirstResponder];
52. int i;
53. UIButton * button;
54. for(i=0; i<[btnArray count]; ++i)
55. {
56. button = (UIButton *)[btnArray objectAtIndex:i];
57. //先删除所有按钮(删除后按钮自然不可见)
58. [button removeFromSuperview];
59. }
60. [btnArray removeAllObjects];
61. int number = [textFieldNumber.text intValue];
62. for(i=0; i<number; ++i)
63. {
64. button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
65. [button setTitle:[NSString stringWithFormat:@"%d", i] forState:UIControlStateNormal];
66. button.frame = CGRectMake(10, 10 + i * 40, self.frame.size.width - 20, 30);
67. [button addTarget:self action:@selector(btnAlert:) forControlEvents:UIControlEventTouchUpInside];
68. [btnArray addObject:button];
69. [scrollView addSubview:button];
70. }
71. //设置UIScrollView中要滚动的窗口大小(很重要)
72. scrollView.contentSize = CGSizeMake(self.frame.size.width, number * 40 + 10);
73. }
74. -(IBAction)btnAlert:(id)sender
75. {
76. UIButton * btn = (UIButton *)sender;
77. NSString * str = [NSString stringWithFormat:@"您按下了 %@ 键", btn.currentTitle];
78. UIAlertView * alterview = [[UIAlertView alloc] initWithTitle:@"" message:str delegate:nil cancelButtonTitle:nil otherButtonTitles:@"确定", nil];
79. [alterview show];
80. [alterview release];
81. }
82. - (void)scrollViewDidScroll:(UIScrollView *)scrollView
83. {
84. NSLog(@"scrollViewDidScroll");
85. }
86. - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
87. {
88. NSLog(@"scrollViewWillBeginDragging");
89. }
90. - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
91. {
92. NSLog(@"scrollViewDidEndDragging");
93. }
94. - (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView
95. {
96. NSLog(@"scrollViewWillBeginDecelerating");
97. }
98. - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
99. {
100. NSLog(@"scrollViewDidEndDecelerating");
101. }
102. - (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView
103. {
104. NSLog(@"scrollViewShouldScrollToTop");
105. return YES;
106. }
107. - (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView
108. {
109. NSLog(@"scrollViewDidScrollToTop");
110. }
111. - (void)dealloc
112. {
113. [super dealloc];
114. [textFieldNumber release];
115. [btnStart release];
116. [scrollView release];
117. [btnArray release];
118. }
119. @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