IOS UIScrollView详解 & 图片缩放功能

IOS UIScrollView详解 & 图片缩放功能

一 UIScrollView 简介
UIScrollView是能滚动的视图控件，可以通过滚动的方式来展示类容。

二 UIScrollView常见属性
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20	//设置UIScrollView滚动的位置
@property(nonatomic)?CGPoint?contentOffset;?
?
//设置UIScrollView内容的尺寸，滚动范围
@property(nonatomic)?CGSize?contentSize;?
?
//设置UIScrollView的4周增加额外的滚动区域
@property(nonatomic)?UIEdgeInsets?contentInset;?
?
//设置UIScrollView是否需要弹簧效果
@property(nonatomic)?BOOL?bounces;
?
//设置UIScrollView是否能滚动
@property(nonatomic,getter=isScrollEnabled)?BOOL?scrollEnabled;?
?
//设置UIScrollView是否显示水平滚动条
@property(nonatomic)?BOOL?showsHorizontalScrollIndicator;
?
//设置UIScrollView是否显示垂直滚动条
@property(nonatomic)?BOOL?showsVerticalScrollIndicator;

三 UIScrollView 代理（delegate）
UIScrollView在滚动过程中 或者 停止滚动 时，如果需要做一些特定的操作，可用通过设置代理的方式（delegate）来监听UIScrollView的整个滚动过程，当UIScrollView发生一系列的滚动操作时， 会自动通知它的代理（delegate）对象，然后通过代理来监听UIScrollView的滚动过程。
UIScrollView将delegate需要实现的方法都定义在UIScrollViewDelegate协议中，因此UIScrollView的delegate必须遵守UIScrollViewDelegate协议，然后实现协议中相应的方法，就可以监听UIScrollView的滚动过程
?
1
2
3
4
5
6
7
8	//?用户开始拖拽时调用
-?(void)scrollViewWillBeginDragging:(UIScrollView?*)scrollView;
?
//?滚动到某个位置时调用
-?(void)scrollViewDidScroll:(UIScrollView?*)scrollView;
?
//?用户结束拖拽时调用
-?(void)scrollViewDidEndDragging:(UIScrollView?*)scrollView?willDecelerate:(BOOL)decelerate;

四 内容缩放
UIScrollView不仅能滚动显示大量内容，还能对其内容进行缩放处理
当在UIScrollView身上使用捏合手势时，UIScrollView会调用代理（delegate）的viewForZoomingInScrollView方法，这个方法返回的控件就是需要进行缩放的控件，缩放涉及的属性和方法
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18	/****属性****/
//缩小的对小比例
@property(nonatomic)?CGFloat?minimumZoomScale;
?
//放大的较大比例
@property(nonatomic)?CGFloat?maximumZoomScale;????
?
?
?
/****方法****/
//缩放时调用
-?(UIView?*)viewForZoomingInScrollView:(UIScrollView?*)scrollView;
?
//开始缩放的时候调用?
-?(void)scrollViewWillBeginZooming:(UIScrollView?*)scrollView?withView:(UIView?*)view
?
//正在缩放的时候调用
-?(void)scrollViewDidZoom:(UIScrollView?*)scrollView

五 UIScrollView无法滚动的解决办法
如果UIScrollView无法滚动，可能是以下原因：
5.1 没有设置contentSize属性
5.2 设置属性scrollEnabled = NO
5.3 没有接收到触摸事件（userInteractionEnabled = NO）
5.4 取消autolayout功能,要想scrollView滚动，必须取消autolayout

六 代码区
6.1 代码
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155	#import?"ViewController.h"
?
@interface?ViewController?()
/**
?*UIScrollView
?*/
@property(nonatomic,strong)UIScrollView?*scrollView;
?
/**
?*??UIImageView
?*/
@property(nonatomic,strong)UIImageView?*imageView;
@end
?
@implementation?ViewController
-?(void)viewDidLoad?{
?????
????//2.设置?UIImageView
?
????UIImage?*image?=?[UIImage?imageNamed:@"scroll.jpg"];
????self.imageView.image?=?image;
?????
????//2.1?设置图片范围
????CGFloat?imageH?=?image.size.height;
????CGFloat?imageW?=?image.size.width;
????CGFloat?imageX?=?0;
????CGFloat?imageY?=?0;
????self.imageView.frame?=?CGRectMake(imageX,?imageY,?imageW,?imageH);
?????
?????
?
????//3?设置UIScrollView?属性
?????
????//3.2?设置UIScrollView内容的尺寸，滚动范围
????self.scrollView.contentSize=CGSizeMake(imageW,?imageH);
?????
????//3.2?设置UIScrollView的4周增加额外的滚动区域
????CGFloat?distance?=?100.0f;
????self.scrollView.contentInset?=?UIEdgeInsetsMake(distance,?distance,?distance,?distance);
?????
????//3.3?设置弹簧效果
????self.scrollView.bounces?=?YES;
?????
????//3.4?设置滚动不显示
????self.scrollView.showsHorizontalScrollIndicator=NO;
????self.scrollView.showsVerticalScrollIndicator=NO;
?????
?????
?????
?????
????//4?UIImageView?添加到?UIScrollView?中
????[self.scrollView?addSubview:self.imageView];
?????
????//5?UIScrollView
????[self.view?addSubview:self.scrollView];
?????
?????
????//6?设置代理
????self.scrollView.delegate?=?self;
?????
?????
????//7?缩放
????self.scrollView.minimumZoomScale=0.2f;
????self.scrollView.maximumZoomScale=2.0f;
?????
}
?
#pragma?mark?代理方法
//?用户开始拖拽时调用
-?(void)scrollViewWillBeginDragging:(UIScrollView?*)scrollView
{
????NSLog(@"开始拖拽");
}
?
//?滚动到某个位置时调用
-?(void)scrollViewDidScroll:(UIScrollView?*)scrollView
{
????NSLog(@"拖拽中");
}
?
//?用户结束拖拽时调用
-?(void)scrollViewDidEndDragging:(UIScrollView?*)scrollView?willDecelerate:(BOOL)decelerate
{
????NSLog(@"结束拖拽");
}
?
?
?
?
#pragma?mark?缩放
/**
?*??缩放结束时调用
?*
?*??@param?scrollView?
?*
?*??@return?
?*/
-?(UIView?*)viewForZoomingInScrollView:(UIScrollView?*)scrollView
{
????NSLog(@"开始缩放");
????return?self.imageView;
}
?
?
/**
?*??缩放过程中调用
?*
?*??@param?scrollView?
?*/
-?(void)scrollViewDidZoom:(UIScrollView?*)scrollView
{
????NSLog(@"正在缩放");
}
?
?
?
/**
?*??缩放结束时调用
?*
?*??@param?scrollView?
?*??@param?view???????
?*??@param?scale??????
?*/
-?(void)scrollViewDidEndZooming:(UIScrollView?*)scrollView?withView:(UIView?*)view?atScale:(CGFloat)scale
{
????NSLog(@"缩放结束");
}
?
?
?
?
?
#pragma?mark?属性get方法
?
-?(UIScrollView?*)scrollView
{
????if?(!_scrollView)?{
????????_scrollView?=?[[UIScrollView?alloc]?initWithFrame:self.view.frame];
????}
????return?_scrollView;
}
?
?
?
-?(UIImageView?*)imageView
{
????if?(!_imageView)?{
????????_imageView?=?[[UIImageView?alloc]?init];
????}
????return?_imageView;
}
?
?
?
@end

6.2 展示
缩放前 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?缩放后
?? ? ? ??
学习链接/ios/?tg=5009295340
学习交流群：317140762