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.   
  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 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.   
  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 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.   
  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 plaincopy
  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 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.   
  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 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.   
  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 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.   
  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.csdn.net/detail/htttw/4516528







完成！

更多0
 
posted on 2013-12-30 11:40  猿人谷  阅读(1562)  评论(0)  编辑  收藏  举报

Powered by: 博客园 Copyright © 2024 猿人谷
Powered by .NET 9.0 on Kubernetes