一、UIScrollView
UIScrollView是所有滚动视图的基础，很重要，主要用于轮播图，相册等功能
当内容超过一个屏幕时，为了将内容完整呈现，就可以使用UIScrollView
重要属性
1.设置滚动范围：contentSize：返回值为CGSize
2.设置分页效果：(BOOL)pagingEnabled
3.偏移量：contentOffset：返回值为CGPoint，改变偏移量可以切换子视图
4.设置滚动条是否显示：
showsHorizontalScrollIndicator 水平方向
showsVerticallndicator 垂直方向
5.反弹效果：(BOOL)bounces
和缩放相关的属性
1.最小缩放比例：minimumZoomScale：返回值CGFloat
2.最大缩放比例：maximumZoomScale：返回值CGFloat
3.当前的缩放比例：zoomScale
重要的位置属性：automaticallyAdjustsScrollViewInsets
当视图上有导航栏的时候，会比较麻烦，这个属性不是ScrollView的属性，是视图控制器的属性
当 automaticallyAdjustsScrollViewInsets 为 NO 时，滚动视图就不会随便延展
automaticallyAdjustsScrollViewInsets为 YES 时，滚动视图会自动延伸
#define WIDTH self.view.frame.size.width
#define HEIGHT self.view.frame.size.height
-(void)viewDidLoad
{
#pragma mark UIScroll
//滚动视图学习，当内容超过一个屏幕时，为了将内容完整呈现
UIScrollView *myScrollView = [[UIScrollView alloc]initWithFrame:self.view.frame];
//设置滚动区域，这个属性控制着能滚动的服务，这里设置为3倍屏幕宽度
myScrollView.contentSize = CGSizeMake(WIDTH*3, HEIGHT);
//设置分页效果
myScrollView.pagingEnabled = YES;
//滚动条样式
myScrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;
//隐藏水平/垂直滚动条
myScrollView.showsHorizontalScrollIndicator = NO;
myScrollView.showsVerticalScrollIndicator = NO;
//设置tag
myScrollView.tag = 1001;
//设置反弹效果
myScrollView.bounces = YES;
//设置代理
myScrollView.delegate = self;
//偏移量,相对滚动视图的原点的位置，屏幕从偏移量这个点开始显示滚动视图的内容
myScrollView.contentOffset = CGPointMake(WIDTH,0);
//为滚动视图添加子视图
for (int i = 0; i < 3; i++) {
UIView *myView = [[UIView alloc]initWithFrame:CGRectMake(WIDTH*i, 0, WIDTH, HEIGHT)];
myView.backgroundColor = [UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0 blue:arc4random()%256/255.0 alpha:1];
// [myScrollView addSubview:myView];
}
for (int i = 0; i < 3; i++) {
UILabel *myLabel = [[UILabel alloc]initWithFrame:CGRectMake(WIDTH*i, 0, WIDTH, HEIGHT)];
myLabel.font = [UIFont systemFontOfSize:220];
myLabel.text = [NSString stringWithFormat:@"第%d页",i];
//让字体根据Label的width适应大小
myLabel.adjustsFontSizeToFitWidth = YES;
//颜色随机
myLabel.backgroundColor = [UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0 blue:arc4random()%256/255.0 alpha:1];
[myScrollView addSubview:myLabel];
}
//添加滚动视图到父视图
[self.view addSubview:myScrollView];
}
这样就生成了三个页面UILabel，可以通过手势拖拽进行交换
二、UIScrollView的代理方法
UIScrollView的代理方法主要实现两部分内容：
1.监视视图的滚动状态
首先看看监视视图的缩放
//开始拖拽视图，只有触摸对象滑动才会触发
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
// NSLog(@"开始拖拽");
}
//停止拖拽
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
// NSLog(@"拖拽停止");
}
//拖拽结束，松开的时候
-(void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset
//正在滚动
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
//视图结束减速
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
//将要开始减速
-(void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView
//拖动到了顶端
-(void)scrollViewDidScrollToTop:(UIScrollView *)scrollView
2.控制视图的缩放
//返回需要缩放的视图，必须为scrollView的子视图
-(UIView*)viewForZoominglnScrollView:(UIScrollView*)scrollView：
//缩放结束
-(void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale
//变换中
-(void)scrollViewDidZoom:(UIScrollView *)scrollView
//将要开始变形
-(void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view
三、一个比较复杂的实例
现在要实现一个简单的相册功能，每个照片还可以通过捏合来进行缩放，切换图片之后之前的图片要恢复原比例
同时添加了一个UIPageControl控件，与UIScrollView配合切换视图
这里总共有三张图片，加了第四张与第一张相同，用来模拟循环状态
#define WIDTH (self.view.frame.size.width)
#define HEIGHT (self.view.frame.size.height)
#import "SecondViewController.h"
#import "PhotoScrollView.h"
@interface SecondViewController ()<UIScrollViewDelegate>
@property (nonatomic,retain)UIScrollView *albumScrollView;//相册滚动视图
@property (nonatomic,retain)UIPageControl *albunPageControl;//页数小白点
@property (nonatomic,retain)NSMutableArray *photoArray;//照片数组
@end
@implementation SecondViewController
//_albumScrollView懒加载
-(UIScrollView *)albumScrollView
{
if (!_albumScrollView) {
_albumScrollView = [[UIScrollView alloc]initWithFrame:self.view.frame];
_albumScrollView.contentSize = CGSizeMake(WIDTH*5, HEIGHT);
//翻页设置
_albumScrollView.pagingEnabled = YES;
}
return _albumScrollView;
}
-(UIPageControl *)albunPageControl
{
if (!_albunPageControl) {
_albunPageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(0, 600, WIDTH, 50)];
//添加方法
// [_albunPageControl addTarget:self action:@selector(pageControlChangeView:) forControlEvents:UIControlEventValueChanged];
}
return _albunPageControl;
}
//数组懒加载
-(NSMutableArray *)photoArray
{
if (!_photoArray) {
_photoArray = [[NSMutableArray alloc]initWithCapacity:2];
}
return _photoArray;
}
-(void)viewDidLoad
{
//添加滚动图并设置代理
[self.view addSubview:self.albumScrollView];
_albumScrollView.delegate = self;
//添加PageControl
[self.view addSubview:self.albunPageControl];
//设置PageControl的页数
_albunPageControl.numberOfPages = 3;
//给pageControl添加方法
[_albunPageControl addTarget:self action:@selector(pageControlChangeView:) forControlEvents:UIControlEventValueChanged];
//添加三张图片
[self.photoArray addObject:[self addPhoto:CGRectMake(0, 0, WIDTH, HEIGHT) Image:[UIImage imageNamed:@"s1.png"]Tag:1000]];
[self.photoArray addObject:[self addPhoto:CGRectMake(WIDTH, 0, WIDTH, HEIGHT) Image:[UIImage imageNamed:@"s2.png"]Tag:1001]];
[self.photoArray addObject:[self addPhoto:CGRectMake(WIDTH*2, 0, WIDTH, HEIGHT) Image:[UIImage imageNamed:@"s3.png"]Tag:1002]];
//添加一张与第一张重复的图片，制造循环效果
[self addPhoto:CGRectMake(WIDTH*3, 0, WIDTH, HEIGHT) Image:[UIImage imageNamed:@"s1.png"]Tag:1003];
}
//添加图片函数
-(UIScrollView*)addPhoto:(CGRect)frame Image:(UIImage*)image Tag:(NSInteger)tag
{
//创建UIScrollView
UIScrollView *photoScrollView =[[UIScrollView alloc]initWithFrame:frame];
//创建UIimageView
UIImageView *photoImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, WIDTH, HEIGHT)];
photoImageView.image = image;
//设置代理
photoScrollView.delegate = self;
//添加视图缩放范围，没有这个缩放不了 找了半天。。。。。。。。。。。。。。。。。。。。。。。
photoScrollView.minimumZoomScale = 0.3;
photoScrollView.maximumZoomScale = 3;
//添加到父视图
[photoScrollView addSubview:photoImageView];
[self.albumScrollView addSubview:photoScrollView];
return photoScrollView;
}
//pageControl点击时进行滚动
-(void)pageControlChangeView:(UIPageControl*)sender
{
//根据页数设置偏移量，加动画
[_albumScrollView setContentOffset:CGPointMake(sender.currentPage*WIDTH, 0)animated:YES];
}
#pragma mark 代理
//实现代理缩放方法
-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
for (id item in scrollView.subviews) {
if ([item isKindOfClass:[UIImageView class]]) {
return item;
}
}
return nil;
}
//在左右拖拽时实现方法
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
//1.进行循环设置
//得到当前的偏移量
CGFloat offset_X = _albumScrollView.contentOffset.x;
//偏移到第四张之后，手动设置偏移量为0
if (offset_X >= WIDTH*3) {
_albumScrollView.contentOffset = CGPointMake(0, 0);
_albunPageControl.currentPage = 0;
}
else
{
//使PageControl与Scroll同步
_albunPageControl.currentPage = offset_X/WIDTH;
}
//在切换图片的时候使照片恢复原来大小
//找到当前偏移值对应的数组index,但是向左右拨动又不一样，有点麻烦
int index = (int)(offset_X/WIDTH)-1;
NSLog(@"index = %d",index);
// PhotoView *tempView = _photoArray[index];
//遍历数组全修改了
for (UIScrollView *tempView in _photoArray) {
tempView.transform = CGAffineTransformMakeScale(1, 1);
}
//2.进行缩放恢复设置
//根据偏移量得到当前page
int numPage = offset_X/WIDTH;
//用数组要考虑越界问题
if (numPage > 0 && numPage < 2) {
UIScrollView *leftScrollView = _photoArray[numPage-1];
UIScrollView *rightScrollView = _photoArray[numPage+1];
//恢复比例
leftScrollView.zoomScale = 1.0;
rightScrollView.zoomScale = 1.0;
}
else if (numPage == 0)
{
UIScrollView *rightScrollView = _photoArray[numPage+1];
rightScrollView.zoomScale = 1.0;
}
else if (numPage == 2)
{
UIScrollView *leftScrollView = _photoArray[numPage-1];
//恢复比例
leftScrollView.zoomScale = 1.0;
}
}
//缩放时保持图片在中央
-(void)scrollViewDidZoom:(UIScrollView *)scrollView
{
UIImageView *myImageView = scrollView.subviews[0];
float contentX = scrollView.contentSize.width;
float contentY = scrollView.contentSize.height;
//如果放大没有超出边界
if (contentX < WIDTH && contentY <HEIGHT) {
myImageView.center = self.view.center;
NSLog(@"w = %f,h = %f",contentX,contentY);
}
else //如果放大超出了屏幕frame
{
myImageView.center = CGPointMake(contentX/2, contentY/2);
}
for (id item in scrollView.subviews) {
NSLog(@"zssm = %@",item);
}
}
@end
实现效果：
