码迷,mamicode.com
首页 > 其他好文 > 详细

UI基础视图----UIScrollView总结

时间:2015-12-20 17:37:34      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:

  UIScrollView是UIKit框架下的很重要的视图类,是UIView的子类。UILabel,UIImageView,UIWebView分别用于展示文字,图片,网页,UILabel通过属性text来展示文字,UIImageView通过属性image来展示图片,UIWebView通过loadRequest:来展示网页(当然展示方法不止这些),UIScrollView虽然是这些视图类的兄弟类,但是并没有这些属性或者方法。但是根据UIView的层级关系,UIScrollView可以用来展示其他视图类,只需要把其他视图类的对象通过addSubview:方法加到UIScrollView的对象上就可以。

  所以得出结论:UIScrollView用来展示其他视图类的对象,如UIImageView,UILabel的对象。

  什么时候使用UIScrollView?如果只是展示一张普通的图片,没必要用UIScrollView来展示。从名字上看,UIScrollView是滚动视图的意思,就是需要滚动的时候才会用到。什么时候需要滚动,拿图片来说,就是一张图片本身的尺寸要大于滚动视图的尺寸,不能一次性全部展示出来。或者多张图片需要连续展示在滚动视图上同一位置,我们可以把这些图片合在一起形成一张超过滚动视图尺寸的大图片,然后让它实现滚动就可以了。

  所以,UIScrollView主要用于三个方面:一是展示一张超出滚动视图尺寸的图片。二是多张需要连续滚动的图片。三是一张图片实现缩放的效果。(事实上在实际开发中大多数情况UIScrollView都是用来展示图片,或者说是展示UIImageView的实例化对象)。

  UIScrollView也是可以设置代理的视图类,可以在滚动的不同状态通过相应的代理方法来处理相应的业务逻辑。其中,无论是滚动一张还是多张图片,本质是一样的,都是拖动,滚动,所以代理方法是一样的。重要的有四个。一张图片缩放有自己独有的代理方法,重要的也有四个而且必须实现其中一个。

0:准备工作

  首先准备三个UIScrollView的属性

 

1 @property (nonatomic, strong) UIScrollView * scrollView1;//用于滚动一张图片
2 @property (nonatomic, strong) UIScrollView * scrollView2;//用于滚动多张图片
3 @property (nonatomic, strong) UIScrollView * scrollView3;//用于缩放一张图片

 

 

 

1:一张图片的滚动

  实现一张图片的滚动基本就三步:一是实例化UIScrollView和UIImageView并把imageView添加到scrollView上。二是设置必须设置的属性contentSize滚动范围。三是把scrollView添加到父视图上。有这三步就可以实现一个滚动视图。其他的属性可以根据业务需要设置,代理也是根据需要来设置。

  注意:

    实例化UIScrollView的时候frame不是所有图片加一起的frame,而是你想给用户展示到屏幕上的大小。就好像有一长串图片,通过UIScrollView这个屏幕上的窗口来展示,只是默认展示了整个图片的一部分,其他部分的展现需要用户来配合拖动或滑动。

 1 /**
 2  *  1:一张超过scrollView尺寸图片的滚动(其实是imageView)
 3  */
 4 - (void)scrollOneImage
 5 {
 6     //1:实例化scrollView和UIImageView,并把imageView添加到scrollView上面
 7     //准备一张大尺寸图片,并把它放在imageView上,且要注意,如果图片尺寸太大,可能不显示
 8     UIImage * image = [UIImage imageNamed:@"apple3"];
 9     UIImageView * imageView = [[UIImageView alloc] initWithImage:image];
10     self.scrollView1 = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, 100)];//scrollView本身还是那么大,通过属性设置一共的滚动范围
11     [self.scrollView1 addSubview:imageView];
12     
13     //2:设置必须设置的属性
14     self.scrollView1.contentSize = imageView.bounds.size;//滚动范围,和图片的尺寸一样
15     
16     //3:把imageView添加到scrollView上,把scrollView添加到self.view上
17     [self.view addSubview:self.scrollView1];
18     
19     //0:可选设置的属性
20     self.scrollView1.scrollEnabled = YES;//默认为YES,如果要暂时关闭拖动,可以设置为NO
21     self.scrollView1.contentOffset = CGPointZero;//偏移量,默认为0
22     self.scrollView1.showsHorizontalScrollIndicator = NO;//水平滚动条,默认打开
23     self.scrollView1.showsVerticalScrollIndicator = NO;//竖直滚动条,默认打开
24     self.scrollView1.bounces = NO;//设置是否回弹,默认是YES
25     //0:如果需要可以设置代理
26     self.scrollView1.delegate = self;
27 
28 }

 

 

 

 

2:多张图片的滚动

  实现多张图片的滚动跟实现一张图片的滚动很类似,只是多了一个必须实现的属性而已。也是三步:一是实例化UIScrollView和UIImageView并把imageView添加到scrollView上。二是设置必须设置的属性contentSize和pageEnable,一个是滚动范围,另一个是是否翻页,如果想一张一张展示的话,这两个属性必须设置,其他可以根据需要选择。三是把scrollView添加到父视图上。

  注意:

    1:当图片比较多的时候,最好使用for循环来创建,比较简单。使用for循环创建的时候注意添加到父视图scrollView的时候要放在for循环里面。

    2:pageEnable属性默认是NO,如果设置为YES,则会在有视图边界的地方停下来,比如我们设置的5张图片,每一张图片都有自己的边界,想要每次都向用户展示一张完整的图片,这个属性就必须设置,不然,就会把5张图片当成一张图片处理,停在哪完全靠用户滑动的力度了。这就跟第一种情况完全一样了。所以滚动一张图片和多张图片就差这一个属性。

    3:关于那两个滚动条,如果不需要最好关掉,apple在封装的时候把这两个条当成scrollView的子视图处理了,不关有时候就会出现问题,具体在第三种用法缩放图片的时候有所展现。    

 

 1 /**
 2  *  2:多张图片的滚动
 3  */
 4 - (void)scrollManyImages
 5 {
 6     //1:实例化scrollView和UIImageView,并把imageView添加到scrollView上面
 7     //注意scrollView的frame,就是展示给用户的大小。可以理解为一个窗口,后面有很多imageView待展示。
 8     self.scrollView2 = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 360, self.view.frame.size.width, self.view.frame.size.height - 360)];
 9     for (int i = 1; i <= 5; i++) {
10         NSString * imageName = [NSString stringWithFormat:@"scrollView%d.jpg", i];
11         UIImage * image = [UIImage imageNamed:imageName];
12         UIImageView * imageView = [[UIImageView alloc] initWithFrame:CGRectMake((i - 1) * self.view.frame.size.width, 0, self.view.frame.size.width, self.view.frame.size.height - 360)];
13         imageView.image = image;
14         [self.scrollView2 addSubview:imageView];
15     }
16     
17     //2:设置必须设置的属性
18     self.scrollView2.contentSize = CGSizeMake(self.view.frame.size.width * 5, 0);//滚动范围
19     //pagingEnabled属性意义是如果设置为YES,则在一个视图的边界或者倍数的时候会停下来,如果不设置,它就会把5张图片当成一张处理,停在哪看你滚动的力度。
20     self.scrollView2.pagingEnabled = YES;
21     
22     //3:父视图来添加
23     [self.view addSubview:self.scrollView2];
24 
25     //0:最好关掉的属性
26     self.scrollView2.showsHorizontalScrollIndicator = NO;
27     self.scrollView2.showsVerticalScrollIndicator = NO;
28     //0:如果需要可以设置代理
29     self.scrollView2.delegate = self;
30     
31 }

 

 

 

 

 

 

3:一张图片的缩放

  实现一张图片的缩放跟上面实现滚动类似,只是多了一步,必须通过代理方法来实现,分为四步:一是实例化UIScrollView和UIImageView并把UIImageView添加到UIScrollView上。二是设置必须设置的属性maximumZoomScale和minimumZoomScale(两个至少设置一个),一个是最大缩放比例,一个是最小缩放比例,这两个属性默认值都是1.0,不缩放,如果不设置这两个属性,图片大小就没法改变,也就不会执行协议方法,缩放也就无从谈起。三是设置代理,并实现代理方法viewForZoomingInScrollView:,这个方法返回值就是要缩放的视图。四是把scrollView添加到父视图上。

 

 1 /**
 2  *  3:缩放一张图片
 3  */
 4 - (void)scaleOneImage
 5 {
 6     //1:实例化scrollView和UIImageView,并把imageView添加到scrollView上面
 7     UIImage * image = [UIImage imageNamed:@"headImage"];//准备一张图片
 8     UIImageView * imageView = [[UIImageView alloc] initWithImage:image];
 9     self.scrollView3 = [[UIScrollView alloc] initWithFrame:CGRectMake(100, 200, 150, 150)];
10     [self.scrollView3 addSubview:imageView];
11     
12     //2:设置必须设置的属性
13     self.scrollView3.maximumZoomScale = 5;
14     self.scrollView3.minimumZoomScale = 0.5;
15     
16     //3:设置代理
17     self.scrollView3.delegate = self;
18     
19     //4:添加
20     [self.view addSubview:self.scrollView3];
21 
22     //0:如果代理中那么使用,这两个必须关掉
23     self.scrollView3.showsHorizontalScrollIndicator = NO;
24     self.scrollView3.showsVerticalScrollIndicator = NO;//这两个必须关掉,不然它是scrollView的子视图
25 }

 

遵守协议

1 @interface ViewController () <UIScrollViewDelegate>

实现协议方法

 1 /**
 2  *  当在scrollView的子view上使用捏合手势时,会自动调用这个方法
 3  *
 4  *  @param scrollView 如果有多个scrollView,这个参数就是在哪个scrollView上进行操作
 5  *
 6  *  @return 返回的就是要缩放的那张图片(imageView)
 7  */
 8 - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
 9 {
10     return self.scrollView3.subviews.lastObject;
11 }

 

 

 

4:协议方法

  UIScrollView的协议UIScrollViewDelegate里面的方法可谓十分丰富,基本涵盖了滚动过程中的各种状态,可以根据需要来调用。协议方法分为两大类。一类是滚动的时候的协议方法(1,2两种情况),一类是缩放图片的协议方法(第3种情况)。第三种实现缩放有一个必须实现的方法(是实现缩放功能必须实现,并不是遵守协议必须实现,这些协议方法都是可选的),还有就是缩放的各个状态。

  注意:

    1:如果一个视图控制器中同时有第一和第二两种滚动视图,都会调用这几个协议方法,那么可以根据协议方法中带的参数scrollView作出判断。

    2:第三种里面第一个方法对于要实现缩放效果来说是必须实现的,但是并不是遵守协议必须实现的,UIScrollViewDelegate里面的方法都是可选的(optional)。

    3:只要不设置maximumZoomScale和minimumZoomScale这两个属性(默认都是1.0不缩放),那么第三种情况的协议方法就不会执行。

 

 1 #pragma mark - UIScrollVIewDelegate
 2 
 3 //1:第一种用法和第二种用法的代理方法,实现一张图片的拖动,或者多张图片的滚动(本质一样)
 4 
 5 //将要开始拖动调用
 6 - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
 7 {
 8     NSLog(@"willBeginDrag");
 9 }
10 //拖动过程中调用
11 - (void)scrollViewDidScroll:(UIScrollView *)scrollView
12 {
13     NSLog(@"didScroll");
14 }
15 //将要结束拖动时调用
16 - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset
17 {
18     NSLog(@"willEndDrag");
19 }
20 //已经结束拖动时调用
21 - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
22 {
23     NSLog(@"didEndDrag");
24 }
25 
26 
27 
28 
29 //2:第三种用法的代理方法:实现图片的放大缩小
30 
31 /**
32  *  当在scrollView的子view上使用捏合手势时,会自动调用这个方法
33  *
34  *  @param scrollView 如果有多个scrollView,这个参数就是在哪个scrollView上进行操作
35  *
36  *  @return 返回的就是要缩放的那张图片(imageView)
37  */
38 - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
39 {
40     return self.scrollView3.subviews.lastObject;
41 }
42 
43 /**
44     开始缩放的时候调用此方法
45  */
46 - (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view
47 {
48     NSLog(@"willBeginZooming");
49 }
50 /**
51     缩放过程中调用此方法
52  */
53 - (void)scrollViewDidZoom:(UIScrollView *)scrollView
54 {
55     NSLog(@"didZoom");
56 }
57 
58 /**
59     结束缩放的时候调用此方法
60  */
61 - (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale
62 {
63     NSLog(@"didEndZooming");
64 }

 

UI基础视图----UIScrollView总结

标签:

原文地址:http://www.cnblogs.com/zhangys/p/5059979.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!