iPhone开发之UIScrollView初步

来源：http://blog.youkuaiyun.com/htttw/article/details/7891396

iPhone开发之UIScrollView初步

 

 

 

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

方法1：

1.

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

2.

修改 ScrollViewController.h 如下：

 

[cpp]  view plain copy

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

修改 ScrollViewController.m 如下：

 

[cpp]  view plain copy

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

说明：

1.

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

 

[plain]  view plain copy

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

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

2.

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

 

[cpp]  view plain copy

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

 

有几个是比较重要的：

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

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

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

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

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

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

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

UIScrollView的常用属性如下：

 

[plain]  view plain copy

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

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

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

修改 ScrollView.h 如下：

 

[cpp]  view plain copy

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

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

修改 ScrollView.m 如下：

 

[cpp]  view plain copy

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

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

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

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

http://download.youkuaiyun.com/detail/htttw/4516528

本文转自夏雪冬日博客园博客，原文链接：http://www.cnblogs.com/heyonggang/p/3497472.html，如需转载请自行联系原作者