UIScrollView&UIPageControl的使用

UIScrollView是内容滚动视图，作为父视图时，可以添加多个视图控件，然后通过设置其特有的 contentSize 属性，以便控制进行水平方向，或垂直方向的滚动。

水平方向滚动时，只需要设置对应的宽度；垂直方向滚动时，只需要设置对应的高度。

[objc]  view plain  copy

 

1. // 水平方向滚动的scrollview  
2. UIScrollView *scrollview001 = [[UIScrollView alloc] init];  
3. [self.view addSubview:scrollview001];  
4. scrollview001.backgroundColor = [UIColor redColor];  
5. scrollview001.frame = CGRectMake(0.0, 0.0, CGRectGetWidth(self.view.bounds), 200.0);  
6. // 添加子视图控件  
7. NSInteger count001 = 10;  
8. CGFloat originX = 0.0;  
9. for (NSInteger index = 0; index < count001; index++)  
10. {  
11.         NSString *text = [NSString stringWithFormat:@"第 %@ 个label", @(index + 1)];  
12.           
13.         UILabel *label = [[UILabel alloc] init];  
14.         [scrollview001 addSubview:label];  
15.         label.frame = CGRectMake(originX, 0.0, CGRectGetWidth(scrollview001.bounds), CGRectGetHeight(scrollview001.bounds));  
16.         label.text = text;  
17.         label.textAlignment = NSTextAlignmentCenter;  
18.         label.backgroundColor = [UIColor colorWithWhite:(random() % 255) alpha:((random() % 10) / 10)];  
19.         <span style="font-family: 'PingFang SC';">originX += CGRectGetWidth(label.bounds);</span>  
20. }  
21.       
22. // 重要属性，控制内容大小，设置后可水平方向，或垂直方向进行滚动显示更多内容控件  
23. // 水平方向滚动时，只需要设置对应的宽度；垂直方向滚动时，只需要设置对应的高度；  
24. scrollview001.contentSize = CGSizeMake(CGRectGetWidth(self.view.bounds) * count001, 200.0);  
25. // 是否整页显示效果，默认为NO，即关闭  
26. scrollview001.pagingEnabled = YES;  
27. // 是否显示水平，或垂直滚动条，默认为YES，即显示  
28. scrollview001.showsHorizontalScrollIndicator = NO;  
29. // 是否可通过手势进行水平，或垂直进行滚动，默认为YEW，即可以  
30. scrollview001.scrollEnabled = YES;  
31. // tag设置，区别不同的scrollview  
32. scrollview001.tag = 1000;  
33.       
34. // 显示指定页，如显示第二页  
35. [scrollview001 setContentOffset:CGPointMake(320.0, 0.0) animated:YES];  
36.       
37. // 代理  
38. /* 
39. 1 设置代理方法的实现对象 
40. 2 添加协议 
41. 3 实现代理方法 
42. */  
43. scrollview001.delegate = self;  

[objc]  view plain  copy

 

1. // 垂直方向滚动的scrollview  
2. UIScrollView *scrollview002 = [[UIScrollView alloc] initWithFrame:CGRectMake(0.0, 210.0, CGRectGetWidth(self.view.bounds), 200.0)];  
3. [self.view addSubview:scrollview002];  
4. // 添加子视图控件  
5. NSInteger count002 = 10;  
6. CGFloat originY = 0.0;  
7. for (NSInteger index = 0; index < count002; index++)  
8. {  
9.         NSString *text = [NSString stringWithFormat:@"第 %@ 个label", @(index + 1)];  
10.           
11.         UILabel *label = [[UILabel alloc] init];  
12.         [scrollview002 addSubview:label];  
13.         label.frame = CGRectMake(0.0, originY, CGRectGetWidth(scrollview002.bounds), CGRectGetHeight(scrollview002.bounds));  
14.         label.text = text;  
15.         label.textAlignment = NSTextAlignmentCenter;  
16.         label.backgroundColor = [UIColor colorWithWhite:0.5 alpha:0.3];  
17.           
18.         originY += CGRectGetHeight(label.bounds);  
19. }  
20.       
21. // 重要属性，控制内容大小，设置后可水平方向，或垂直方向进行滚动显示更多内容控件  
22. // 水平方向滚动时，只需要设置对应的宽度；垂直方向滚动时，只需要设置对应的高度；  
23. scrollview002.contentSize = CGSizeMake(CGRectGetWidth(self.view.bounds), (CGRectGetHeight(scrollview002.bounds) * count002));  
24. // 是否整页显示效果，默认为NO，即关闭  
25. scrollview002.pagingEnabled = YES;  
26. // tag设置，区别不同的scrollview  
27. scrollview002.tag = 2000;  
28. // 代理  
29. scrollview002.delegate = self;  

UIPageControl是页码控件，通常结合scro使用，用来页码，即当前页面，或总页面数。

[objc]  view plain  copy

 

1. UIPageControl *pagecontroll = [[UIPageControl alloc] init];  
2.     [self.view addSubview:pagecontroll];  
3.     pagecontroll.backgroundColor = [UIColor clearColor];  
4.     pagecontroll.frame = CGRectMake(((CGRectGetWidth(self.view.bounds) - 200.0) / 2), (200.0 - 20.0 - 10.0), 200.0, 20.0);  
5.       
6.     // 设置总页码数量  
7.     pagecontroll.numberOfPages = count001;  
8.     // 设置当前页码，即指定页面，默认从0开始，即0~n  
9.     pagecontroll.currentPage = 1;  
10.     // 设置当前页码控件的颜色  
11.     pagecontroll.currentPageIndicatorTintColor = [UIColor greenColor];  
12.     // 设置非当前页码控件的颜色  
13.     pagecontroll.pageIndicatorTintColor = [UIColor whiteColor];  
14.     // 设置tag值  
15.     pagecontroll.tag = 3000;  

[objc]  view plain  copy

 

1. @interface ViewController () <UIScrollViewDelegate>  
2.   
3. @end  

[objc]  view plain  copy

 

1. // UIScrollViewDelegate  
2.   
3. - (void)scrollViewDidScroll:(UIScrollView *)scrollView  
4. {  
5.     NSInteger tag = scrollView.tag;  
6.     if (1000 == tag)  
7.     {  
8.         // 内容滚动变化间距，水平方向  
9.         CGFloat offsetX = scrollView.contentOffset.x;  
10.         // 通过水平滚动变化间距与页面宽度计算出当前滚动后的页面  
11.         NSInteger page = offsetX / CGRectGetWidth(self.view.bounds);  
12.         NSLog(@"offsetX=%@,第 %@ 页", @(offsetX), @(page + 1));  
13.           
14.         // 控件页码的当前页码  
15.         UIPageControl *pagecontroll = (UIPageControl *)[self.view viewWithTag:3000];  
16.         pagecontroll.currentPage = page;  
17.           
18.         // 无限循环效果，即滑到指定范围后回到第一页  
19.         // 内容滚动变化间距  
20.         CGFloat offsetChange = (CGRectGetWidth(self.view.bounds) * (10 - 1) + 40.0);  
21.         NSLog(@"offsetChange=%@", @(offsetChange));  
22.         if (offsetX >= offsetChange)  
23.         {  
24.             // 从最后一页跳到第一页  
25.             [scrollView setContentOffset:CGPointMake(0.0, 0.0) animated:NO];  
26.             // 控件页码的当前页码  
27.             pagecontroll.currentPage = 0;  
28.         }  
29.         else if (offsetX <= -40.0)  
30.         {  
31.             // 从第一页跳到最后一页  
32.             [scrollView setContentOffset:CGPointMake((CGRectGetWidth(self.view.bounds) * (10 - 1)), 0.0) animated:NO];  
33.             // 控件页码的当前页码  
34.             pagecontroll.currentPage = 9;  
35.         }  
36.     }  
37.     else if (2000 == tag)  
38.     {  
39.         // 内容滚动变化间距，垂直方向  
40.         CGFloat offsetY = scrollView.contentOffset.y;  
41.         // 通过水平滚动变化间距与页面宽度计算出当前滚动后的页面  
42.         NSInteger page = offsetY / CGRectGetHeight(scrollView.bounds);  
43.         NSLog(@"offsetY=%@,第 %@ 页", @(offsetY), @(page + 1));  
44.     }  
45.       
46.     NSLog(@"滚动");  
47. }  
48.   
49. // called on start of dragging (may require some time and or distance to move)  
50. - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView  
51. {  
52.     NSLog(@"即将开始拖动");  
53. }  
54.   
55. // called on finger up if the user dragged. velocity is in points/millisecond. targetContentOffset may be changed to adjust where the scroll view comes to rest  
56. - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset  
57. {  
58.     NSLog(@"即将结束拖动");  
59. }  
60.   
61. // called on finger up if the user dragged. decelerate is true if it will continue moving afterwards  
62. - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate  
63. {  
64.     NSLog(@"结束拖动");  
65. }  
66.   
67. // called on finger up as we are moving  
68. - (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView  
69. {  
70.     NSLog(@"拖动即将释放");  
71. }  
72.   
73. // called when scroll view grinds to a halt  
74. - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView  
75. {  
76.     NSLog(@"拖动已经释放");  
77.       
78.     NSInteger tag = scrollView.tag;  
79.     if (1000 == tag)  
80.     {  
81.         // 内容滚动变化间距，水平方向  
82.         CGFloat offsetX = scrollView.contentOffset.x;  
83.         // 通过水平滚动变化间距与页面宽度计算出当前滚动后的页面  
84.         NSInteger page = offsetX / CGRectGetWidth(self.view.bounds);  
85.         NSLog(@"offsetX=%@,第 %@ 页", @(offsetX), @(page + 1));  
86.           
87.         // 控件页码的当前页码  
88.         UIPageControl *pagecontroll = (UIPageControl *)[self.view viewWithTag:3000];  
89.         pagecontroll.currentPage = page;  
90.           
91.         // 无限循环效果，即滑到指定范围后回到第一页  
92.         // 内容滚动变化间距  
93.         CGFloat offsetChange = (CGRectGetWidth(self.view.bounds) * (10 - 1) + 40.0);  
94.         NSLog(@"offsetChange=%@", @(offsetChange));  
95.         if (offsetX >= offsetChange)  
96.         {  
97.             // 从最后一页跳到第一页  
98.             [scrollView setContentOffset:CGPointMake(0.0, 0.0) animated:NO];  
99.             // 控件页码的当前页码  
100.             pagecontroll.currentPage = 0;  
101.         }  
102.         else if (offsetX <= -40.0)  
103.         {  
104.             // 从第一页跳到最后一页  
105.             [scrollView setContentOffset:CGPointMake((CGRectGetWidth(self.view.bounds) * (10 - 1)), 0.0) animated:NO];  
106.             // 控件页码的当前页码  
107.             pagecontroll.currentPage = 9;  
108.         }  
109.     }  
110.     else if (2000 == tag)  
111.     {  
112.         // 内容滚动变化间距，垂直方向  
113.         CGFloat offsetY = scrollView.contentOffset.y;  
114.         // 通过水平滚动变化间距与页面宽度计算出当前滚动后的页面  
115.         NSInteger page = offsetY / CGRectGetHeight(scrollView.bounds);  
116.         NSLog(@"offsetY=%@,第 %@ 页", @(offsetY), @(page + 1));  
117.     }  
118.   
119. }  
120.   
121. // called when setContentOffset/scrollRectVisible:animated: finishes. not called if not animating  
122. - (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView  
123. {  
124.       
125. }  
126.   
127. // any offset changes  
128. - (void)scrollViewDidZoom:(UIScrollView *)scrollView  
129. {  
130.       
131. }  
132.   
133. // return a view that will be scaled. if delegate returns nil, nothing happens  
134. - (nullable UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView  
135. {  
136.     return nil;  
137. }  
138.   
139. // called before the scroll view begins zooming its content  
140. - (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(nullable UIView *)view  
141. {  
142.       
143. }  
144.   
145. // scale between minimum and maximum. called after any 'bounce' animations  
146. - (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(nullable UIView *)view atScale:(CGFloat)scale  
147. {  
148.       
149. }  
150.   
151. // return a yes if you want to scroll to the top. if not defined, assumes YES  
152. - (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView  
153. {  
154.     return YES;  
155. }  
156.   
157. // called when scrolling animation finished. may be called immediately if already at top  
158. - (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView  
159. {  
160.       
161. }