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

时间:2022-05-26 02:49:51

  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的属性

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

1:一张图片的滚动

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

  注意:

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

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

2:多张图片的滚动

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

  注意:

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

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

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

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

3:一张图片的缩放

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

 /**
* 3:缩放一张图片
*/
- (void)scaleOneImage
{
//1:实例化scrollView和UIImageView,并把imageView添加到scrollView上面
UIImage * image = [UIImage imageNamed:@"headImage"];//准备一张图片
UIImageView * imageView = [[UIImageView alloc] initWithImage:image];
self.scrollView3 = [[UIScrollView alloc] initWithFrame:CGRectMake(, , , )];
[self.scrollView3 addSubview:imageView]; //2:设置必须设置的属性
self.scrollView3.maximumZoomScale = ;
self.scrollView3.minimumZoomScale = 0.5; //3:设置代理
self.scrollView3.delegate = self; //4:添加
[self.view addSubview:self.scrollView3]; //0:如果代理中那么使用,这两个必须关掉
self.scrollView3.showsHorizontalScrollIndicator = NO;
self.scrollView3.showsVerticalScrollIndicator = NO;//这两个必须关掉,不然它是scrollView的子视图
}

遵守协议

 @interface ViewController () <UIScrollViewDelegate>

实现协议方法

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

4:协议方法

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

  注意:

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

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

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

 #pragma mark - UIScrollVIewDelegate

 //1:第一种用法和第二种用法的代理方法,实现一张图片的拖动,或者多张图片的滚动(本质一样)

 //将要开始拖动调用
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
NSLog(@"willBeginDrag");
}
//拖动过程中调用
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
NSLog(@"didScroll");
}
//将要结束拖动时调用
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset
{
NSLog(@"willEndDrag");
}
//已经结束拖动时调用
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
NSLog(@"didEndDrag");
} //2:第三种用法的代理方法:实现图片的放大缩小 /**
* 当在scrollView的子view上使用捏合手势时,会自动调用这个方法
*
* @param scrollView 如果有多个scrollView,这个参数就是在哪个scrollView上进行操作
*
* @return 返回的就是要缩放的那张图片(imageView)
*/
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return self.scrollView3.subviews.lastObject;
} /**
开始缩放的时候调用此方法
*/
- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view
{
NSLog(@"willBeginZooming");
}
/**
缩放过程中调用此方法
*/
- (void)scrollViewDidZoom:(UIScrollView *)scrollView
{
NSLog(@"didZoom");
} /**
结束缩放的时候调用此方法
*/
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale
{
NSLog(@"didEndZooming");
}