zoukankan      html  css  js  c++  java
  • 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 如下:

     

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

     

    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,用代码完成的话则是:

     

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


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



    2.

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

     

    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的常用属性如下:

     

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

     

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

     

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

     

    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
     
  • 相关阅读:
    poj 2312 Battle City
    poj 2002 Squares
    poj 3641 Pseudoprime numbers
    poj 3580 SuperMemo
    poj 3281 Dining
    poj 3259 Wormholes
    poj 3080 Blue Jeans
    poj 3070 Fibonacci
    poj 2887 Big String
    poj 2631 Roads in the North
  • 原文地址:https://www.cnblogs.com/heyonggang/p/3497472.html
Copyright © 2011-2022 走看看