UI基础之UIScrollView的使用

一：ScrollView属性应用

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

2，UIScrollView 的使用步骤：

     1>添加scrollView的滚动内容

     2>设置scrollView的滚动范围，属性值contentSize，告诉scrollView滚动内容的范围。

3，属性：

  1>contentOffset; 这个属性⽤用来表⽰示UIScrollView滚动的位置

   2>contentSize;这个属性⽤用来表⽰示UIScrollView内容的尺⼨寸

    3>contentInset; 这个属性能够在UIScrollView的4周增加额外的滚动区域 ,也就是说让scrollView的边界增加一定的内边距。

     contentOffset属性值位置是一个相对位置用来记录ScrollView的滚动位置，它是scrollView相对内容的滚动位置，我们可以这样理解：屏幕中的内容不变，scrollView滚动位置跟内容边界的距离x,y

4> bounces;  设置UIScrollView是否需要弹簧效果

5>scrollEnabled; 设置UIScrollView是否能滚动 

 

6>showsHorizontalScrollIndicator; 是否显⽰示⽔水平滚动条 

    showsVerticalScrollIndicator; 是否显⽰示垂直滚动条

如果scrollView设置后不能滚动原因：*没有设置滚动内容的范围:contentSize; *scrollView的enable为NO; *scrollView的userInteractionEnable为NO；

 

补充：UIScrollView的frame为它的可视范围大小，而UIScrollView的contentSize是它可滚动的范围

 

4，UIScrollView实现图片的缩放功能

     1>缩放原理：当用户在UIScrollView身上使用捏合手势时，UIScrollView会给代理发送一条消息，询问代理究竟要缩放自己内部的哪一个子控件（哪一块内容）

5,UIScrollView的方法：

当UIScrollView发生一系列的滚动操作时， 会自动通知它的代理（delegate）对象，给它的代理发送相应的消息，让代理得知它的滚动情况

也就是说，要想监听UIScrollView的滚动过程，就必须先给UIScrollView设置一个代理对象，然后通过代理得知UIScrollView的滚动过程

1> 实现缩放的步骤：

设置代理

设置minimumZoomScale ：缩小的最小比例

设置maximumZoomScale ：放大的最大比例

让代理对象实现下面的方法，返回需要缩放的视图控件

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;

2>- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;

 将要滚动

3>- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate;

结束滚动

4>- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;     

缩放哪个UIView

5>- (void)setContentOffset:(CGPoint)contentOffset animated:(BOOL)animated;  设置scrollView的滚动位置

 

补充：1，UIPageControl

 两个属性：numberOfPage

                currentPage

         2，UIScrollView的属性值contentOffSet和ContentInSet的配合使用让UIScrollView中的内容进入视图范围内就有一个边距

  // 设置scrollView的位置    self.scrollView.contentOffset = CGPointMake(-40, -40)

    // scrollView只有当用户拖动才会有内边距 所以先设置contentOffSet的位置

    // 设置scrollView的内边距

    self.scrollView.contentInset = UIEdgeInsetsMake(40, 50, 60, 70);

        3,当用静态方式添加控件到storyBoard上，控制scrollView时，注意：查看该控件是否添加到了scrollView上，这样该控件就会跟scrollView一起滚动

二：简单实例代码

缩放功能:

#import "ViewController.h"

@interface ViewController ()<UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (weak, nonatomic) IBOutlet UIImageView *imageView;

@end

@implementation ViewController

- (void)viewDidLoad {
    
    [super viewDidLoad];
    
//    // 设置scrollView的滚动范围
    self.scrollView.contentSize = self.imageView.image.size;
//
//    // 设置scrollView的位置
//    self.scrollView.contentOffset = CGPointMake(-40, -40);
//    
//    // scrollView只有当用户拖动才会有内边距 所以先设置contentOffSet的位置
//    // 设置scrollView的内边距
//    self.scrollView.contentInset = UIEdgeInsetsMake(40, 50, 60, 70);
//    
//    // 设置scrollView的弹簧
//    self.scrollView.bounces = NO;
//    
//    // 设置scrollView的水平垂直属性
//    self.scrollView.showsHorizontalScrollIndicator = NO;
//    self.scrollView.showsVerticalScrollIndicator = NO;
    
     //scrollView的缩放
    self.scrollView.minimumZoomScale = 0.2;
    self.scrollView.maximumZoomScale = 2;
    self.scrollView.delegate = self; // 设置代理
    
    
}

// 代理方法
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    return self.imageView;
}


@end

效果

UIScrollView属性的应用

#import "ViewController.h"

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (weak, nonatomic) IBOutlet UIView *footerView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    // 1，设置scrollView的滚动范围
    CGFloat heigth = CGRectGetMaxY(self.footerView.frame);
    self.scrollView.contentSize = CGSizeMake(0,heigth);
    
    // 2,设置scrollView的contentOffSet的位置
    self.scrollView.contentOffset = CGPointMake(0, -64);
    
    // 3,设置scrollView的内边距
    self.scrollView.contentInset = UIEdgeInsetsMake(64, 0, 120, 0);
}

@end

效果：

#import "ViewController.h"

@interface ViewController ()<UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (nonatomic, weak) UIPageControl *pageControl;
@property (nonatomic, strong) NSTimer *timer;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    int count = 5;
    CGFloat imageW = 300;
    CGFloat imageY = 0;
    CGFloat imageH = 130;

    for (int i = 0; i<count; i++) {
        
        UIImageView *imageView = [[UIImageView alloc] init];
        [self.scrollView addSubview:imageView];
        CGFloat imageX = i * imageW;
        
        imageView.frame = CGRectMake(imageX, imageY, imageW, imageH);
        
        NSString *imageName = [NSString stringWithFormat:@"img_0%d", i+1];
        
        imageView.image = [UIImage imageNamed:imageName];
        
    }
    
    // 创建scrollView的滚动范围
    self.scrollView.contentSize = CGSizeMake(count * imageW , 0);
    self.scrollView.showsHorizontalScrollIndicator = NO;
    
    // 开启分页功能
    self.scrollView.pagingEnabled = YES;
    
    UIPageControl *pageControl = [[UIPageControl alloc] init];
    [self.view addSubview:pageControl];
    self.pageControl = pageControl;
    pageControl.frame = CGRectMake(85, 140, 150, 20);
    // 设置pageControl的属性
    pageControl.numberOfPages = count;
    pageControl.currentPageIndicatorTintColor = [UIColor blueColor];
    pageControl.pageIndicatorTintColor = [UIColor redColor];
    
    self.scrollView.delegate = self;
    
    NSTimer *timer = [NSTimer timerWithTimeInterval:1.0 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];
//    self.timer = timer;
//     [timer fire];
    NSRunLoop *runLoop = [NSRunLoop currentRunLoop];
    [runLoop addTimer:timer forMode:NSRunLoopCommonModes];
}

- (void)nextImage
{
    NSInteger page = self.pageControl.currentPage;
    if (page == self.pageControl.numberOfPages - 1) {
        page = 0;
    } else {
        
        page++;
    }

    [self.scrollView setContentOffset:CGPointMake(page * self.scrollView.frame.size.width, 0) animated:YES];
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGPoint point = self.scrollView.contentOffset;
    NSInteger page = (point.x + self.scrollView.frame.size.width * 0.5)/self.scrollView.frame.size.width;
    
    self.pageControl.currentPage = page;
    
}


@end

效果：