UIScrollView、UIPageControl

**一、UIScrollView的常用属性

二、UIScrollView的常用代理⽅方法

三、UIPageControl的使用

四、UIPageControl与UIScrollView的结合使用**

UIScrollView

UIScrollView是可以滚动的view，UIView本身不能滚动，子类UIScrollview拓展了滚动方面的功能。

UIScrollView是所有滚动视图的基类。以后的UITableView，UITextView等视图都是继承于该类。

使⽤用场景：显示不下（单张大图）；内容太多（图文混排）；滚动头条（图片）；相册等

核心功能

滚动：contentSize大于frame.size的时候，能够滚动。

缩放：自带缩放，可以指定缩放倍数。

UIScrollView滚动相关属性

scrollEnabled //是否能够滚动

showsHorizontalScrollIndicator //控制是否显示水平方向的滚动条

showVerticalScrollIndicator //控制是否显⽰示垂直⽅方向的滚动条

alwaysBounceVertical //控制垂直方向遇到边框是否反弹

alwaysBounceHorizontal //控制水平方向遇到边框是否反弹

UIScrollView缩放相关属性

minimumZoomScale //缩小的最小比例

maximumZoomScale //放大的最大比例

zoomScale //设置变化比例

zooming //判断是否正在进行缩放反弹

bouncesZoom //控制缩放的时候是否会反弹

要实现缩放，还需要实现delegate，指定缩放的视图是谁

UIScrollView代理方法

滚动



缩放



UIPageControl

UIPageControl与UILabel相似

用于指示当前第几页（代码）

通常与UIScrollView配合使用

currentPage //当前页

numberOfPages //指定页面的个数

UIPageControl从类名中可以看出，其父类是UIControl。

所以可以像button一样添加事件，只不过事件触发使用的不是

UIControlEventsTouchUpInside而是UIControlEventsValueChanged

pageControl与scrollview合用

通常在Scrollview滚动的时候修改pageControl的currentPage。

场景：引导页，首页的轮播图

代码示例：

#import "RootViewController.h"

@interface RootViewController ()
@property(nonatomic,assign)UIScrollView * scrollView;

@end

@implementation RootViewController
- (void)dealloc
{
[_scrollView release];
[super  dealloc];
}

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.view.backgroundColor =[UIColor cyanColor];

#pragma mark-----scrollView
self.scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(100, 200, 200, 200)];
_scrollView.backgroundColor =[UIColor redColor];

[self.view addSubview:_scrollView];

#warning mark----contentsize表示的是scrollView里存放的内容区域的大小也可以理解成scrollView滚动的范围
//如果想让scrollView内容可以滚动，contentSize一定要比scrollView的frame.size大
_scrollView.contentSize =CGSizeMake(320, 480);
UIImage * image =[UIImage imageNamed:@"123.jpg"];

UIImageView * imageView =[[UIImageView alloc]initWithImage:image            ];
/*
UIImageView  *imageView =[[UIImageView alloc]init];
imageView.image = image;
CGRect frame =imageView.frame;
frame.size = image.size;
imageView.frame =frame;
//将结构体类型变量用字符串的形式输出
NSStringFromCGXXX
NSLog(@"%@",NSStringFromCGRect(imageView.frame));
//如果没有设置imageView大小的frame，想让imageView大小和image大小一致，要给imageView设置为image.size;
*/
[_scrollView addSubview:imageView];
//点击状态栏时，回到顶部
_scrollView.scrollsToTop = YES;
//边界是否回弹，默认回弹
_scrollView.bounces = NO   ;

//设置是否滚动，默认滚动
_scrollView.scrollEnabled = YES;
//设置滚动指示条是否显示
_scrollView.showsHorizontalScrollIndicator = NO;
_scrollView.showsVerticalScrollIndicator = NO;

//以下的两个属性使用有效，必须满足：1.bounces == YES,2.scrollView.contentSize <scrollView.frame.size
//以下两个属性默认值都为NO；

_scrollView.alwaysBounceVertical = YES;
_scrollView.alwaysBounceHorizontal = YES;

#warning mark-----contentoffset(内容偏移量）

//左偏移(正），右偏移（负），上偏移（正），下偏移（负）
_scrollView.contentOffset  = CGPointMake(-100, -100);

[self.view addSubview:_scrollView];

[_scrollView release];
[imageView release];

设置分页效果

self.scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(30, 100, 320, 480)];
_scrollView.backgroundColor =[UIColor redColor];
//设置分页效果
_scrollView.pagingEnabled = YES;
_scrollView.contentSize =CGSizeMake(19*_scrollView.frame.size.width, _scrollView.frame.size.height);
//设置scrollView的内容区域大小
for (int i = 0 ; i < 19; i++) {

NSString * imageName =[NSString stringWithFormat:@"image%d.jpg",i+1];
UIImage * image = [UIImage imageNamed:imageName ];

UIImageView * imageView =[[UIImageView alloc]initWithFrame:CGRectMake(Width * i , 0, Width, Height   )];

imageView.image =image ;

[_scrollView addSubview:imageView];
[imageView release];

}
[self.view addSubview:_scrollView];
[_scrollView release];
导入图片文件夹

页面缩放：

RootViewController.h
#import <UIKit/UIKit.h>
@interface RootViewController : UIViewController<UIScrollViewDelegate>
@end

RootViewController.m

#import "RootViewController.h"
#import "SmallScrollView.h"
@interface RootViewController ()
@property(nonatomic,retain)UIScrollView * scrollView;
@property(nonatomic,retain)UIPageControl * pageControl;
@end
@implementation RootViewController

- (void)dealloc
{
[_scrollView release];
[_pageControl release];
[super dealloc];

}

- (void)viewDidLoad {

[super viewDidLoad];
// Do any additional setup after loading the view.
self.view.backgroundColor  = [UIColor whiteColor];

#pragma mark ----UIScrollView

[self createScrollView] ;
#pragma mark----UIPageControl

[self createPageControl];
}

- (void)createPageControl
{
self.pageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(130, 600, 100, 30)];
_pageControl.backgroundColor =[UIColor redColor];
//设置有几个圆点
_pageControl.numberOfPages   = 3;
//设置未选中圆点的颜色
_pageControl.pageIndicatorTintColor = [UIColor grayColor];
//添加事件
[_pageControl addTarget:self action:@selector(clickPageControl:) forControlEvents:UIControlEventValueChanged];

[self.view addSubview:_pageControl];
[_pageControl release];
}

- (void)clickPageControl:(UIPageControl *)pageControl
{
//    _scrollView.contentOffset = CGPointMake( pageControl.currentPage* CGRectGetWidth(_scrollView.frame), 0);
[_scrollView setContentOffset:CGPointMake(_pageControl.currentPage *CGRectGetWidth(_scrollView.frame),0 ) animated:YES];
}
- (void)createScrollView
{
//CGRectGetWidth（self.view.frame)表示获取self.view.frame.size.width
self.scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(20, 20, CGRectGetWidth(self.view.frame)-40, CGRectGetHeight(self.view.frame)-40)];
_scrollView.backgroundColor =[UIColor redColor];
[self.view addSubview:_scrollView];
//设置scrollView内容区域的大小，可滚动的范围
_scrollView.contentSize =   CGSizeMake(3*CGRectGetWidth(_scrollView.frame), CGRectGetHeight(_scrollView.frame));

//设置是否有分页效果
_scrollView.pagingEnabled = YES;
//scroll内容区域添加图片内容
for (int i = 0; i < 3; i++) {

NSString * imageName =[NSString stringWithFormat:@"image%d.jpg",i+1];

UIImage  * image =[UIImage imageNamed:imageName];
/*
UIImageView  * imageView = [[UIImageView alloc]initWithFrame:

CGRectMake(0, 0, CGRectGetWidth(_scrollView.frame)  , CGRectGetHeight(_scrollView.frame))];
imageView.image = image;
//给每个imageView设置tag值
imageView.tag = 100 + i ;
#warning mark ------创建小ScrollView
UIScrollView * smallScroll = [[UIScrollView alloc]initWithFrame:CGRectMake(i*CGRectGetWidth(_scrollView.frame), 0, CGRectGetWidth(_scrollView.frame)  , CGRectGetHeight(_scrollView.frame))];

*/
SmallScrollView * smallScroll = [[SmallScrollView alloc]initWithFrame:CGRectMake(i*CGRectGetWidth(_scrollView.frame), 0, CGRectGetWidth(_scrollView.frame), CGRectGetHeight(_scrollView.frame))image:image];
//设置tag值

smallScroll.tag = 100+i;

[_scrollView addSubview:smallScroll];

[smallScroll release];

//[smallScroll addSubview:imageView];

//[_scrollView addSubview:imageView];

//[imageView release];

}
//设置缩放的最大和最小比例
_scrollView.minimumZoomScale = 0.5;
_scrollView.maximumZoomScale = 2.0;

//设置代理
_scrollView.delegate = self ;

[_scrollView release];
}

#pragma mark-----实现UIScrollViewDelegate协议中的方法

//实现与滚动相关的方法
//1.当contentoffset值发生变化的时候触发；

- (void)scrollViewDidScroll:(UIScrollView*)scrollView
{
NSLog(@"%s",__FUNCTION__);

}

- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView
{
NSLog(@"%s",__FUNCTION__);
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{

NSLog(@"%s",__FUNCTION__);
NSUInteger number =scrollView .contentOffset.x/CGRectGetWidth(scrollView.frame);
_pageControl.currentPage = number   ;
}

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{

NSLog(@"++++++%s",__FUNCTION__);
}
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset
{
NSLog(@"++++++%s",__FUNCTION__);
}
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
NSLog(@"+++++%s",__FUNCTION__);
}
//实现与缩放相关的方法
//1.当zoom发声任何变化时，会触发
- (void)scrollViewDidZoom:(UIScrollView *)scrollView
{
NSLog(@"%@",NSStringFromCGSize(scrollView.contentSize));
UIView * imageView1 =[scrollView viewWithTag:100];
imageView1.center = CGPointMake(scrollView.center.x -20 , scrollView.center.y -20);
NSLog(@"-------%s",__FUNCTION__);

}

- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view
{

}

//4.指定被缩放的视图
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
NSLog(@"-----%s",__FUNCTION__);
UIView * imageView1 =[scrollView viewWithTag:100];
return imageView1 ;
}

smallScrollView.h
#import <UIKit/UIKit.h>
@interface SmallScrollView : UIScrollView<UIScrollViewDelegate>
@property(nonatomic,retain)UIImageView*  imgView;
- (instancetype)initWithFrame:(CGRect)frame image:(UIImage *)image;
@end

smallScrollView.m

#import "SmallScrollView.h"

@implementation SmallScrollView
- (void)dealloc
{
[_imgView release];
[super dealloc];
}

- (instancetype)initWithFrame:(CGRect)frame image:(UIImage *)image
{
self = [super initWithFrame:frame];
if (self) {
self.imgView =[[UIImageView alloc]initWithFrame:CGRectMake(0, 0, CGRectGetWidth(frame), CGRectGetHeight(frame))];
_imgView.image = image;
//设置缩放比例
self.minimumZoomScale    = 0.5;
self.maximumZoomScale    =2.0;
//设置代理
self.delegate = self;
[self addSubview:_imgView ];
[_imgView release];
}
return self;
}

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return _imgView;
}

- (void)scrollViewDidZoom:(UIScrollView *)scrollView
{

_imgView.center = CGPointMake(self.superview.center.x-20, self.superview.center.y-20);
}