首页 > IOS频道 > 【IOS研究院之应用开发】 > IOS研究院之滚动视图UIScrollView的简单应用（九）
2012
08-23

IOS研究院之滚动视图UIScrollView的简单应用（九）

           最近MOMO需要搞一个IOS软件的项目，搞了几天感觉还不错，进度挺快的，哇咔咔。Unity3D游戏开发暂时先告一段落，这段时间写一些IOS软件相关的东东，也算是给工作的一个总结。好啦现学现卖啦！！HOHO～～ 

           UIScrollView在软件开发中是很常见的控件，总体来说ScrollView又可以分为两种：第一种是根据手指滑动的力度计算滚动的距离。第二种时以页面为单位一次滑动切换一页，这和IOS桌面左右滑动类似。 有了IOS提供的UIScrollView控件实现这些都不是什么难事。如下图所示，MOMO一共给页面中加载了5个View，通过手指左右滑动喔。

 

IOS研究院之滚动视图UIScrollView的简单应用（九） - 雨松MOMO程序研究院 - 1

 

不知道说什么，直接上代码吧。

C#
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
 
//
//  ScrollViewController.m
//  ScrollView
//
//  Created by 雨松MOMO on 12-8-23.
//  Copyright (c) 2012年 雨松MOMO. All rights reserved.
//
 
#import "ScrollViewController.h"
 
@interface ScrollViewController ()
 
@end
 
@implementation ScrollViewController
 
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
 
    }
    return self;
}
 
- (void)viewDidLoad
{
    [super viewDidLoad];
 
    //设置ScrollView的整体触摸与显示区域
    //注意 宽 高不要超过 320X480
    //否则会出现无法滚动的情况
    _scrollView = [[[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320,440)] autorelease];
 
    //设置ScrollView滚动内容的区域
    //它通常是需要大于ScrollerView的显示区域的
    //这样才有必要在ScrollerView中滚动它
    [_scrollView setContentSize:CGSizeMake(320 * 5, 240)];
 
    //开启滚动分页功能，如果不需要这个功能关闭即可
    [_scrollView setPagingEnabled:YES];
 
    //隐藏横向与纵向的滚动条
    [_scrollView setShowsVerticalScrollIndicator:NO];
    [_scrollView setShowsHorizontalScrollIndicator:NO];
 
    //在本类中代理scrollView的整体事件
    [_scrollView setDelegate:self];
 
    //如果你打开横向或纵向的滚动条，这里可以设置滚动条的风格
    // UIScrollViewIndicatorStyleDefault, 默认风格
    // UIScrollViewIndicatorStyleBlack,   黑色风格
    // UIScrollViewIndicatorStyleWhite    白色风格
    //[_scrollView setIndicatorStyle:UIScrollViewIndicatorStyleBlack]
 
    for (int i =0; i<5; i++)
    {
 
        //在这里给每一个ScrollView添加一个图片 和一个按钮
        UIImageView *imageView= [[[UIImageView alloc] initWithFrame:CGRectMake(i * 320,0,320,440)] autorelease];
        [imageView setImage:[UIImage imageNamed:@"image.png"]];
 
        UIButton * button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        button.frame = CGRectMake(i * 320, 10, 100, 30);
 
        [button setTitle:@"这是一个按钮" forState:UIControlStateNormal];
 
        [button addTarget:self action:@selector(buttonClick) forControlEvents:UIControlEventTouchUpInside];
 
        //把每页需要显示的VIEW添加进ScrollerView中
        [_scrollView addSubview:imageView];
        [_scrollView addSubview:button];
    }
 
    //整体再将ScrollerView显示在窗口中
    [self.view addSubview:_scrollView];
 
    //页面控制小工具
    //它会在底部绘制小圆点标志当前显示页面
    _pageControl = [[[UIPageControl alloc] initWithFrame:CGRectMake(0, 440,self.view.frame.size.width, 20)]autorelease];
    //设置页面的数量
    [_pageControl setNumberOfPages:5];
    //监听页面是否发生改变
    [_pageControl addTarget:self action:@selector(changePage:) forControlEvents:UIControlEventValueChanged];
    [self.view addSubview:_pageControl];
 
}
 
- (void)changePage:(id)sender
{
    //得到当前页面的ID
   //int page = [sender currentPage];
 
    //在这里写你需要执行的代码
    //......
}
 
//手指离开屏幕后ScrollView还会继续滚动一段时间只到停止
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
 
   NSLog(@"结束滚动后缓冲滚动彻底结束时调用");
}
 
-(void) scrollViewWillBeginDecelerating:(UIScrollView *)scrollView
{
 
  NSLog(@"结束滚动后开始缓冲滚动时调用");
}
 
-(void)scrollViewDidScroll:(UIScrollView*)scrollView
 
{
     //页面滚动时调用，设置当前页面的ID
     [_pageControl setCurrentPage:fabs(scrollView.contentOffset.x/self.view.frame.size.width)];
    NSLog(@"视图滚动中X轴坐标%f",scrollView.contentOffset.x);
    NSLog(@"视图滚动中X轴坐标%f",scrollView.contentOffset.y);
}
 
-(void)scrollViewWillBeginDragging:(UIScrollView*)scrollView
{
    NSLog(@"滚动视图开始滚动，它只调用一次");
}
 
-(void)scrollViewDidEndDragging:(UIScrollView*)scrollView willDecelerate:(BOOL)decelerate
{
   NSLog(@"滚动视图结束滚动，它只调用一次");
 
}
 
-(void)buttonClick
{
    NSLog(@"按钮点击了");
 
}
 
- (void)viewDidUnload
{
    [super viewDidUnload];
}
 
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}
 
@end
 

 

后天就要坐上火车去成都了，然后去九寨沟旅游啦。希望这是一趟美好的旅途，一周后北京再见！！

源码下载地址：http://vdisk.weibo.com/s/b4W2a

最后编辑：
作者：雨松MOMO
专注移动互联网，Unity3D游戏开发
站内专栏 QQ交谈 腾讯微博 新浪微博
捐 赠写博客不易，如果您想请我喝一杯星巴克的话？就进来看吧!

您可能还会对这些文章感兴趣！

《IOS研究院之滚动视图UIScrollView的简单应用（九）》有 12 条评论

  1. 严喆 说：
    2014 年 11 月 19 日下午 3:09

    希望有空讲解一下ngui或ugui的uiscorllview

    回复
  2. weight loss pills 说：
    2014 年 2 月 24 日上午 12:21

    weight loss before and after pictures…

    If you drink a full glass of water before beginning your meal, your stomach simply doesn?t hold as much food. No, you will not gain weight from drinking a lot of water….

    回复
  3. alex 说：
    2013 年 5 月 9 日下午 4:41

    楼主，你好，中间[_scrollView setContentSize:CGSizeMake(320 * 5, 240)];应该是[_scrollView setContentSize:CGSizeMake(320 * 5, 440)];吧，240的话好像不执行代理中的方法

    回复
  4. phylony 说：
    2013 年 3 月 24 日上午 9:47

    这个最好还是不要这样写,毕竟海量图片,uiscrollerview不做重用机制是很悲剧的事情,以前是要自己写reusable的,现在直接用uicollectionview就很轻松了,arc,轻松搞定几十上百个的uiviewcontroller.

    回复
  5. 楼主幸苦 说：
    2012 年 12 月 26 日上午 8:04

    请问下楼主 scrollview 图片切换 中间一张完整的 两边各半张的 用cliptobounds = NO 实现后 怎样添加两个超出去的半张的响应？

    回复
  6. 鲸的鱼跃 说：
    2012 年 10 月 16 日上午 12:19

    很有用 谢谢你 希望多多更新啊 我经常来

    回复
  7. 婀娜007 说：
    2012 年 8 月 28 日上午 2:23

    真心滴感谢雨松MOMO，你写的有关IOS的博文我都看了一边，很基础，很实用，纯代码，让我更好滴理解了IOS中的种种关系，期待您的新文噢

    回复

留下一个回复

你的email不会被公开。