1. UIScrollView的建立和常用的屬性
1> 概述
UIScrollView 是 UIView 的子類, 是以我們可以仿照 UIView 的建立步驟建立一個 UIScrollView
UIScrollView 作為所有的滾動視圖的基類, 所有學好 UIScrollView 也成為學好 UITableView 和 UICollectionView等滾動視圖的前提
UIScrollView 主要使用在滾動頭條(輪播圖),相冊等常見的功能裡
2> 常用的屬性
1 // 建立對象
2 self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, WIDTH, HEIGHT)];
3
4 /**
5 * 設定
6 */
7 self.scrollView.backgroundColor = [UIColor purpleColor];
8
9 // 滾動範圍
10 // 橫向滾動
11 self.scrollView.contentSize = CGSizeMake(WIDTH * 3, HEIGHT * 3);
12 // 縱向滾動
13 // self.scrollView.contentSize = CGSizeMake(0, HEIGHT * 3);
14
15 // 設定3張圖檔
16 for (NSInteger i = 0; i < 3; i++) {
17 UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(i * WIDTH, 0, WIDTH, HEIGHT)];
18
19 imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%ld.jpg", i + 1]];
20
21 [self.scrollView addSubview:imageView];
22 }
23
24 // contentOffset偏移量 想讓哪張圖檔最先顯示通過設定偏移量完成 直接設定第二個視圖顯示在螢幕上
25 self.scrollView.contentOffset = CGPointMake(WIDTH, 0);
26
27 // 可以讓ScrollView按頁來滾動
28 self.scrollView.pagingEnabled = YES;
29
30 // 關閉水準方向滾動條
31 self.scrollView.showsHorizontalScrollIndicator = NO;
32 // 關閉垂直方向滾動條
33 self.scrollView.showsVerticalScrollIndicator = NO;
34
35 // 關閉邊界回彈效果
36 self.scrollView.bounces = NO;
37
38 [self addSubview:self.scrollView]; 2. UIScrollView的協定方法
UIScrollViewDelegate
當我們簽好協定,設定好代理人之後,我們就可以使用 UIScrollView 的協定方法了,他的協定方法分為兩部分:
① 監控滾動時候的狀态
1 #pragma mark 監測滾動狀态
2
3 // 即将開始滾動的方法
4 - (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView
5 {
6 NSLog(@"開始滾動了");
7 }
8
9 // 已經結束滾動
10 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
11 {
12 NSLog(@"滾動結束");
13 }
14
15 // 即将開始手動拖拽
16 - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
17 {
18 NSLog(@"開始拖拽");
19 }
20
21 // 手動拖拽完成
22 - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
23 {
24 NSLog(@"手動拖拽完成");
25 }
26
27 // 隻要滾動就會觸發這個方法
28 - (void)scrollViewDidScroll:(UIScrollView *)scrollView
29 {
30 NSLog(@"一直滾動%f", scrollView.contentOffset.x);
31 } ② 控制視圖的縮放
1 #pragma mark 視圖縮放
2
3 - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
4 {
5 // 傳回縮放的視圖
6 return self.rootView.imageView;
7 }
8
9 // 縮放完成代理方法,把圖檔置為中間位置
10 - (void)scrollViewDidZoom:(UIScrollView *)scrollView
11 {
12 self.rootView.imageView.center = self.view.center;
13 } 3. UIScrollView 和 UIPageControl 的結合使用
代碼
RootView.h 主要用于聲明 UIScrollView 和 UIPageControl 視圖
1 #import <UIKit/UIKit.h>
2
3 @interface RootView : UIView
4
5 @property (nonatomic, strong) UIScrollView *scrollView;
6 @property (nonatomic, strong) UIPageControl *pageControl;
7
8 @end RootView.m 主要是顯示的視圖,也就是一個 UIScrollView 和 UIPageControl 視圖
1 #import "RootView.h"
2
3 #define kWidth CGRectGetWidth(self.frame)
4 #define kHeight CGRectGetHeight(self.frame)
5
6 @implementation RootView
7
8 - (instancetype)initWithFrame:(CGRect)frame
9 {
10 self = [super initWithFrame:frame];
11 if (self) {
12 // 添加子視圖
13 [self addAllViews];
14 }
15 return self;
16 }
17
18 - (void)addAllViews
19 {
20 // 布局scrollView
21
22 // 1.建立對像
23 self.scrollView = [[UIScrollView alloc] initWithFrame:self.frame];
24
25 // 2.定義屬性
26 // 設定滾動範圍
27 self.scrollView.contentSize = CGSizeMake(kWidth * 5, 0);
28 // 顯示5張圖檔
29 for (int i = 0; i < 5; i++) {
30 UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(i * kWidth, 20, kWidth, kHeight)];
31
32 NSString *image = [NSString stringWithFormat:@"%d.jpg", i + 1];
33
34 imageView.image = [UIImage imageNamed:image];
35
36 [self.scrollView addSubview:imageView];
37 }
38
39 // 隐藏水準滾動條
40 self.scrollView.showsHorizontalScrollIndicator = NO;
41
42 // 使一頁一頁的滾動
43 self.scrollView.pagingEnabled = YES;
44
45 // 防止回彈
46 self.scrollView.bounces = NO;
47
48 // 3.添加到父視圖
49 [self addSubview:self.scrollView];
50
51 // 布局pageControl
52 self.pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, CGRectGetHeight(self.frame) - 40, kWidth, 40)];
53
54 self.pageControl.currentPage = 0;
55
56 self.pageControl.numberOfPages = 5;
57
58 self.pageControl.backgroundColor = [UIColor grayColor];
59
60 [self addSubview:self.pageControl];
61 }
62 @end RootViewController.m 主要是處理事件,比如 UIScrollView 的代理事件 , UIPageControl 的點選事件 和 添加計時器實作自動播放的效果
1 #import "RootViewController.h"
2 #import "RootView.h"
3
4 #define kWidth self.view.frame.size.width
5
6 @interface RootViewController ()<UIScrollViewDelegate>
7
8 @property (nonatomic, strong) RootView *rootView;
9
10 @end
11
12 @implementation RootViewController
13
14 - (void)loadView
15 {
16 self.rootView = [[RootView alloc] initWithFrame:[UIScreen mainScreen].bounds];
17
18 self.view = self.rootView;
19 }
20
21
22 - (void)viewDidLoad {
23 [super viewDidLoad];
24 // Do any additional setup after loading the view.
25
26 // 4.ScrollView設定代理
27 self.rootView.scrollView.delegate = self;
28
29 // 添加點選事件
30 [self.rootView.pageControl addTarget:self action:@selector(pageControlAction:) forControlEvents:UIControlEventValueChanged];
31
32 // 添加計時器,實作自動滾動
33 // TimeInterval 時間戳 ,
34 [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(timerAction:) userInfo:nil repeats:YES];
35 }
36
37 // 實作定時方法
38 - (void)timerAction:(NSTimer *)timer
39 {
40 NSInteger index = self.rootView.pageControl.currentPage;
41
42 // 如果不是最後一頁,向後移動一頁
43 if (self.rootView.pageControl.numberOfPages - 1 != index) {
44 index++;
45
46 } else { // 如果是最後一頁,跳到第一頁
47 index = 0;
48 }
49
50 // 通過index修改scrollView的偏移量
51 // self.rootView.scrollView.contentOffset = CGPointMake(index * kWidth, 0);
52
53 [self.rootView.scrollView setContentOffset:CGPointMake(index * kWidth, 0) animated:YES];
54
55 // 通過index修改pageControl的值
56 self.rootView.pageControl.currentPage = index;
57 }
58
59 // 點選事件方法
60 - (void)pageControlAction:(UIPageControl *)pageControl
61 {
62 [UIView animateWithDuration:1 animations:^{
63 self.rootView.scrollView.contentOffset = CGPointMake(kWidth * pageControl.currentPage, 0);
64 }];
65 }
66
67 // 實作代理方法
68 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
69 {
70 // 改變pageControl的目前顯示的位置
71
72 // 擷取目前顯示的位置
73 CGFloat currentX = self.rootView.scrollView.contentOffset.x;
74
75 self.rootView.pageControl.currentPage = currentX / kWidth;
76 } ![Windows phone開發初體驗之-基本概念的了解[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)