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
           

实现效果：