您的位置：首页 > 产品设计 > UI/UE

uiscrollView 原理详解

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



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

view source

001
//
002
//ScrollViewController.m
003
//ScrollView
004
//
005
//Created by 雨松MOMO on 12-8-23.
006
//Copyright (c) 2012年 雨松MOMO. All rights reserved.
007
//
008
009
#import "ScrollViewController.h"
010
011
@interface ScrollViewController ()
012
013
@end
014
015
@implementation ScrollViewController
016
017
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
018
{
019
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
020
if
 
(self) {
021
022
}
023
return
 
self;
024
}
025
026
- (
void
)viewDidLoad
027
{
028
[super viewDidLoad];
029
030
//设置ScrollView的整体触摸与显示区域
031
//注意 宽 高不要超过 320X480
032
//否则会出现无法滚动的情况
033
_scrollView = [[[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320,440)] autorelease];
034
035
//设置ScrollView滚动内容的区域
036
//它通常是需要大于ScrollerView的显示区域的
037
//这样才有必要在ScrollerView中滚动它
038
[_scrollView setContentSize:CGSizeMake(320 * 5, 240)];
039
040
//开启滚动分页功能，如果不需要这个功能关闭即可
041
[_scrollView setPagingEnabled:YES];
042
043
//隐藏横向与纵向的滚动条
044
[_scrollView setShowsVerticalScrollIndicator:NO];
045
[_scrollView setShowsHorizontalScrollIndicator:NO];
046
047
//在本类中代理scrollView的整体事件
048
[_scrollView setDelegate:self];
049
050
//如果你打开横向或纵向的滚动条，这里可以设置滚动条的风格
051
// UIScrollViewIndicatorStyleDefault, 默认风格
052
// UIScrollViewIndicatorStyleBlack,黑色风格
053
// UIScrollViewIndicatorStyleWhite白色风格
054
//[_scrollView setIndicatorStyle:UIScrollViewIndicatorStyleBlack]
055
056
for
 
(
int
 
i
=0; i<5; i++)
057
{
058
059
//在这里给每一个ScrollView添加一个图片 和一个按钮
060
UIImageView *imageView= [[[UIImageView alloc] initWithFrame:CGRectMake(i * 320,0,320,440)] autorelease];
061
[imageView setImage:[UIImage imageNamed:@
"image.png"
]];
062
063
UIButton * button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
064
button.frame = CGRectMake(i * 320, 10, 100, 30);
065
066
[button setTitle:@
"这是一个按钮"
 
forState:UIControlStateNormal];
067
068
[button addTarget:self action:@selector(buttonClick) forControlEvents:UIControlEventTouchUpInside];
069
070
//把每页需要显示的VIEW添加进ScrollerView中
071
[_scrollView addSubview:imageView];
072
[_scrollView addSubview:button];
073
}
074
075
//整体再将ScrollerView显示在窗口中
076
[self.view addSubview:_scrollView];
077
078
//页面控制小工具
079
//它会在底部绘制小圆点标志当前显示页面
080
_pageControl = [[[UIPageControl alloc] initWithFrame:CGRectMake(0, 440,self.view.frame.size.width, 20)]autorelease];
081
//设置页面的数量
082
[_pageControl setNumberOfPages:5];
083
//监听页面是否发生改变
084
[_pageControl addTarget:self action:@selector(changePage:) forControlEvents:UIControlEventValueChanged];
085
[self.view addSubview:_pageControl];
086
087
}
088
089
- (
void
)changePage:(id)sender
090
{
091
//得到当前页面的ID
092
//int page = [sender currentPage];
093
094
//在这里写你需要执行的代码
095
//......
096
}
097
098
//手指离开屏幕后ScrollView还会继续滚动一段时间只到停止
099
- (
void
)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
100
{
101
102
NSLog(@
"结束滚动后缓冲滚动彻底结束时调用"
);
103
}
104
105
-(
void
) scrollViewWillBeginDecelerating:(UIScrollView *)scrollView
106
{
107
108
NSLog(@
"结束滚动后开始缓冲滚动时调用"
);
109
}
110
111
-(
void
)scrollViewDidScroll:(UIScrollView*)scrollView
112
113
{
114
 
//页面滚动时调用，设置当前页面的ID
115
 
[_pageControl setCurrentPage:
fabs
(scrollView.contentOffset.x/self.view.frame.size.width)];
116
NSLog(@
"视图滚动中X轴坐标%f"
,scrollView.contentOffset.x);
117
NSLog(@
"视图滚动中X轴坐标%f"
,scrollView.contentOffset.y);
118
}
119
120
-(
void
)scrollViewWillBeginDragging:(UIScrollView*)scrollView
121
{
122
NSLog(@
"滚动视图开始滚动，它只调用一次"
);
123
}
124
125
-(
void
)scrollViewDidEndDragging:(UIScrollView*)scrollView willDecelerate:(
BOOL
)decelerate
126
{
127
NSLog(@
"滚动视图结束滚动，它只调用一次"
);
128
129
}
130
131
-(
void
)buttonClick
132
{
133
NSLog(@
"按钮点击了"
);
134
135
}
136
137
- (
void
)viewDidUnload
138
{
139
[super viewDidUnload];
140
}
141
142
- (
BOOL
)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
143
{
144
return
 
(interfaceOrientation == UIInterfaceOrientationPortrait);
145
}
146
147
@end

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航