iOS个人整理11-UIControl与子类：UIScrollView滚动视图

一、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配合切换视图

这里总共有三张图片，加了第四张与第一张相同，用来模拟循环状态

//
//  SecondViewController.m
//  ui_homework_UIScrollViewAlbum
//
//  Created by wanghao on 16/1/18.
//  Copyright © 2016年 wanghao. All rights reserved.
//
#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

实现效果：