21-UIScrollView 滑动视图

一、知识点简单介绍

1.UIScrollView控件是什么？

（1）移动设备的屏幕⼤大⼩小是极其有限的,因此直接展⽰示在⽤用户眼前的内容也相当有限

（2）当展⽰示的内容较多,超出⼀一个屏幕时,⽤用户可通过滚动⼿手势来查看屏幕以外的内容

（3）普通的UIView不具备滚动功能,不能显⽰示过多的内容

（4）UIScrollView是一个能够滚动的视图控件,可以⽤用来展⽰示⼤大量的内容,并且可以通过滚 动查看所有的内容

 (5)  举例:手机上的“设置”、其他⽰示例程序 

2.UIScrollView的简单使用

（1）将需要展⽰的内容添加到UIScrollView中 

（2）设置UIScrollView的contentSize属性,告诉UIScrollView所有内容的尺⼨寸,也就是告诉 它滚动的范围(能滚多远,滚到哪⾥里是尽头) 

3.属性

（1）常用属性：

1）@property(nonatomic)CGPoint contentOffset; 这个属性⽤用来表⽰示UIScrollView滚动的位置

2）@property(nonatomic)CGSize contentSize;这个属性⽤用来表⽰示UIScrollView内容的尺⼨寸,滚动范围(能滚多远)

3）@property(nonatomic)UIEdgeInsets contentInset; 这个属性能够在UIScrollView的4周增加额外的滚动区域 

（2）其他属性：

1）@property(nonatomic) BOOL bounces;  设置UIScrollView是否需要弹簧效果 

2）@property(nonatomic,getter=isScrollEnabled)BOOLscrollEnabled; 设置UIScrollView是否能滚动 

3）@property(nonatomic) BOOL showsHorizontalScrollIndicator; 是否显⽰示⽔水平滚动条 

4）@property(nonatomic) BOOL showsVerticalScrollIndicator; 是否显⽰示垂直滚动条 

4.注意点

• 如果UIScrollView⽆无法滚动,可能是以下原因: 

（1）没有设置contentSize

（2） scrollEnabled = NO

（3） 没有接收到触摸事件:userInteractionEnabled = NO

（4）没有取消autolayout功能(要想scrollView滚动,必须取消autolayout) 

//创建一个滑动视图
    UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 20, 375, 200)];
    [self.view addSubview:scrollView];
    scrollView.backgroundColor = [UIColor redColor];
   
    //子视图
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 375, 200)];
    [scrollView addSubview:view];
    view.backgroundColor = [UIColor grayColor];
   
    //子视图
    UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(0, 200, 375, 200)];
    [scrollView addSubview:view2];
    view2.backgroundColor = [UIColor blackColor];
   
    //滑动视图显示范围
    scrollView.contentSize = CGSizeMake(375, 200*2);

//水平滑动条
    scrollView.showsHorizontalScrollIndicator = NO;
   
    //垂直滑动条
    scrollView.showsVerticalScrollIndicator = YES;
   
    //设置滚动条风格
    scrollView.indicatorStyle = UIScrollViewIndicatorStyleBlack;
   
    //是否反弹
    scrollView.bounces = YES;
   
    //设置翻页效果
    scrollView.pagingEnabled = YES;

    //设置偏移量
    scrollView.contentOffset = CGPointMake(100, 20);

    /**放大倍数*/
    scroll.zoomScale = 2;
    scroll setZoomScale:<#(CGFloat)#> animated:<#(BOOL)#>
    

   //每次点击增加X值 设置位置
     - (void)action
     {
         CGPoint offset = scrollView.contentOffset;
   
         offset.x += 375;
   
         [scrollView setContentOffset:offset animated:YES];
   
     }

    // 增加额外的滚动区域（逆时针，上、左、下、右）
    // top  left  bottom  right
    scrollView.contentInset = UIEdgeInsetsMake(20, 20, 20, 20);

、、、、、、、、、、、、、、、实现右侧循环滑动、、、、、、、、、、、、、、、、、

//1.创建滑动视图
    UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 90, 375, 200)];
   
    //2.设置代理
    scrollView.delegate = self;
   
    //3.设置内容区域（大小）
    scrollView.contentSize = CGSizeMake(375*6, 200);
   
    //4.添加视图
    [self.view addSubview:scrollView];
   
    scrollView.pagingEnabled = YES;
   
   
    //5.添加图片
    for (int i=0; i<6; i++) {
        NSString *imgName = [NSString stringWithFormat:@"image%d.jpg",i+1];
        UIImageView *imgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:imgName]];
        imgView.frame = CGRectMake(0+375*i, 0, 375, 200);
        [scrollView addSubview:imgView];
    }
   
    //6.添加pageCtrl分页
    _pageCtrl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 260, 375, 30)];
    _pageCtrl.numberOfPages = 5;
    _pageCtrl.currentPage = 0;
    [self.view addSubview:_pageCtrl];

//视图停止滑动时切换page 实现右侧无限滑动
//视图停止的时候
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
                  
        //x偏移量除以图片的宽度等于5
    if (scrollView.contentOffset.x/375 == 5) {
        //滚动到第一页
        CGPoint point = CGPointMake(0, 0);
        [scrollView setContentOffset:point animated:NO];
        _pageCtrl.currentPage = 0;
    }else {
        //向右偏移的宽度X值除以375，第二个图就是2个375，第三个就是3个375，以此类推
        _pageCtrl.currentPage = scrollView.contentOffset.x/375;
    } 
}

、、、、、、、、、、、、、、、实现图片渐变显示、、、、、、、、、、、、、、、、、

- (void)viewDidLoad {
    [super viewDidLoad];

    imgView1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image1.jpg"]];
    imgView1.frame = CGRectMake(0, 90, 375, 200);
    imgView1.alpha = 1;
    [self.view addSubview:imgView1];
   
    imgView2 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image2.jpg"]];
    imgView2.frame = CGRectMake(0, 90, 375, 200);
    imgView2.alpha = 0;
    [self.view addSubview:imgView2];
   
    UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 90, 375, 200)];
    scrollView.delegate = self;
    scrollView.showsHorizontalScrollIndicator = NO;
    scrollView.backgroundColor = [UIColor clearColor];
    scrollView.contentSize = CGSizeMake(375*2, 200);
    [self.view addSubview:scrollView];
   
}

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

    imgView1.alpha = 1 - scrollView.contentOffset.x/375.0;
    imgView2.alpha = scrollView.contentOffset.x/375.0;
}

、、、、、、、、、、、代理方法UIScrollViewDelegate、、、、、、、、、、、、、

/**
 *  滑动时实时调用
 */
- (void)scrollViewDidScroll:(UIScrollView *)scrollView

/**结束拖拽时调用 可以使图片集中  具体参见代码示例  */
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset
{
    //计算X方向的偏移量
    CGFloat x = targetContentOffset->x;
   
    NSInteger page = (x + 200 * 0.5) / 200;
   
    targetContentOffset->x = 200 * page;
}

-(void)scrollViewDidScroll:(UIScrollView*)scrollView;
//会在视图滚动时收到通知。包括一个指向被滚动视图的指针，从中可以读取contentOffset属性以确定其滚动到的位置。

-(void)scrollViewWillBeginDragging:(UISCrollView*)scrollView;
//当用户首次在某个方向上进行拖动时得到通知。这个方法会得到被作为参数传递的滚动视图指针，也同样可以从中读取 contentOffset 属性。

-(void)scrollViewDidEndDragging:(UIScrollView*)scrollView willDecelerate:(BOOL)decelerate;
//当用户抬起拖动到手指时得到通知。还会得到一个布尔值，知名报告滚动视图最后位置之前，是否需要减速。

-(void)scrollViewWillBeginDecelerate:(UIScrollView*)scrollView;
//当用户抬起手指而视图需要继续移动时，会收到通知。这个方法可以用来读取 contentOffset属性，从而判断出当用户抬起手指钱最后一次滚动到的位置，虽然这个位置并不会使滚动条的最终停止位置。

-(void)scrollViewDidEndDecelerating:(UIScrollView*)scrollView;//当上面提到的减速完毕、滚动视图停止时得到通知。收到这个通知的时刻，滚动视图的contentOffset属性会反映出滚动条最终停止的位置。

-(void)scrollViewDidEndZooming:(UIScrollview*)scrollView withView:(UIView*)view atScale:(float)scale;//当用户对内容进行缩放时，会收到通知。缩放比例表示为一个浮点值，会作为参数传递进来。

-(BOOL)scrollViewShouldScrollToTop:(UIScrollView*)scrollView;
-(void)scrollViewDidScrollToTop:(UIScrollView*)scrollView;
//当用户点出iPhone状态条时，滚动视图委托可以决定视图是否滚动回到开头。

、、、、、、、、、、、、、、、、、图片放大缩小、、、、、、、、、、、、、、、、、

/**
 *  放大缩小时实时调用
 */
当用户在UIScrollView身上使用捏合手势时，UIScrollView会调用代理的viewForZoomingInScrollView:方法，这个方法返回的控件就是需要进行缩放的控件。
- (void)scrollViewDidZoom:(UIScrollView *)scrollView


//设置实现缩放
//设置代理scrollview的代理对象
_scrollview.delegate=self;
//设置最大伸缩比例
_scrollview.maximumZoomScale=2.0;
//设置最小伸缩比例
_scrollview.minimumZoomScale=0.5;
//告诉scrollview要缩放的是哪个子控件
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
     return _imageview; //图片对象名称
}

//开始放大或者缩小时会调用此方法
- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view{
    NSLog(@"开始缩放了");
}

- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale{
   
    NSLog(@"结束缩放了");
}


/**双击手势实现放大缩小图片  要遵守协议  并实现viewForZoomingInScrollView方法*/
- (void)doubleAction:(UITapGestureRecognizer *)tap
{
  
   
    if(_bgScrollView.zoomScale > 1)
    {
        [_bgScrollView setZoomScale:1.0 animated:YES];

    }else{
        [_bgScrollView setZoomScale:2.0 animated:YES];

    }
}