简介:
我们今天我们讲的是一个滚动屏幕的控件：UIScrollView
我们都知道我们的移动设备的屏幕大小是有限的，因此直接展示在用户眼前的内容也相当有限的
当我们的展示的内容较多，超出一个屏幕时，用户可以通过滚动收拾来查看屏幕以外的的内容
普通的UIView是不具备滚动的功能的，不能显示过多的内容

01程序介绍:

• 大图展示
• 喜马拉雅
• 图片缩放
• 图片轮播器

2. 展示效果:

**大图展示: **

Snip20160313_5.png

**喜马拉雅: **

Snip20160313_6.png

**图片缩放: **

Snip20160313_7.png

**图片轮播: **

Snip20160313_1.png

这个最上面的那个图片会每隔一段时间, 自动换成下一个图片, 这个就类似于我们手机中的APP某宝中最上面播放广告的程序一样

---

1. storyboard的设置

• ScrollView在这个位置, 只用将其拖入storyboard里面就行了
  Snip20160313_2.png

我们就直接利用这四个程序来介绍我们今天的关于ScrollView的新知识

1. 知识点介绍

• ScrollView的使用方法:

将需要展示的内容添加到UIScrollView中
设置UIScrollView的contentSize属性，告诉UIScrollView所有内容的尺寸，也就是告诉它滚动的范围（能滚多远，滚到哪里是尽头）

• 在我们的这个ScrollView中, 其实有很多的知识点:
  首先我们将要介绍的就是代理: UIScrollViewDelegate
  其实当用户在与手机屏幕交互的时候, 就是图片随着用户的手而改变的时候, 这个ScrollView的代理, 就会告诉他我们的图片已经到了那个位置,

Snip20160313_9.png

其中这里面也牵扯到了:

• 关于我们的ScrollView的坐标问题:

Snip20160313_11.png

@property(nonatomic)CGPointcontentOffset; 
这个属性用来表示UIScrollView滚动的位置

@property(nonatomic)CGSizecontentSize; 
这个属性用来表示UIScrollView内容的尺寸，滚动范围（能滚多远）

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

大图展示很简单

• 就是 直接将 我们的图片放到我们的storyboard里面

Snip20160313_8.png

• 代码编写:

#import "MJViewController.h"
@interface MJViewController () <UIScrollViewDelegate>

@property (weak, nonatomic) IBOutlet UIImageView *minionView;
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;

@end

@implementation MJViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
//    NSTimer
    self.scrollView.contentSize =     self.minionView.frame.size;
    self.scrollView.delegate = self;
}

@end

如果我们的图片无法滚动可能存在以下一个问题:

Snip20160313_13.png

2. 喜马拉雅:

关于喜马拉雅的程序其实是比较简单的

storyboard设置:

Snip20160313_22.png

**代码: **

#import "MJViewController.h"

@interface MJViewController ()
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;

@end

@implementation MJViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.scrollView.contentSize = CGSizeMake(0, 560);
    self.scrollView.contentInset = UIEdgeInsetsMake(64, 0, 44, 0);
    self.scrollView.contentOffset = CGPointMake(0, -64);
}

@end

然后, 就没有然后了, 其实就是这么简单.

3. 图片缩放

Snip20160313_23.png

**代码: **

#import "MJViewController.h"

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

@end

@implementation MJViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.scrollView.contentSize = self.minionView.frame.size;
    self.scrollView.maximumZoomScale = 2.0;
    self.scrollView.minimumZoomScale = 0.2;
}

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    return self.minionView;
}

@end

这里我们详细介绍一下代理

很多时候，我们想在UIScrollView正在滚动的 或者 滚动到某个位置 或者 停止滚动 时做一写特定的操作
但是想要完成上述的功能，前提条件就是能够监听到UIScrollView的整个滚动的过程
当我们的UIScrollView发生一系列的滚动操作时，会自动通知它的代理（delegate）对象，给它的代理发送相应的消息，让代理得知它的情况
我们的这个代理是我们这个UIScrollView自己含有的一个属性，而这个属性主要工作就是监听我们的UIScrollView的滚动情况
注意的是在我们以前就说过我们的代理是需要我们的协议的，这个协议里面放的方法就是这些：

Snip20160313_24.png

如果有人不大清楚代理模式（详见我的文集OC学习笔记）里面有关于我们的代理模式的笔记
一般我们都是用我们的控制器做我们的UIScrollView代理
协议的命名规范：一般是以我们的这个代理者的名称开头
三个步骤：
1、遵守协议：

  @interface MJViewController () <UIScrollViewDelegate>

2、设置控制器ScrollView的delegate：

Snip20160313_25.png

3、实现代理的协议里面的方法。
作用：1、监听（监听我们任何时间的任何事件监听）让一个对象A监听另一个对象B的行为
2、通知思想（一个对象做了某件事情通知另一个对象)

所以以上就是关于代理的知识点, 和他的使用方法

重点: 图片轮播器

注意：我们的这个图片轮播器将我们的图片一张一张的显示出来
我们如果是直接将我们的UIView拖进去的话，我们不好控制，而且以后我们的图片增加的时候，我们不容易改变
所以我们分几步：
1、将一个UIScrollView放到我们的storyboard里面
2、我们利用我们的代码将我们的图片添加到这个里面
2.1、注意下面的代码中有一个控件：这个是我们分页的时候，当用户翻到多少页的时候的一个索引(Page Control)

Snip20160313_26.png

2.2、我们的分页功能是怎么做出来的？
就是我们的代码中没有告诉我们的控制器在何时、何处分页，他是怎么做到分页的？
我们的分页这个操作，我们的控制器是按照我们的UIScrollView的尺寸选择何处分页的，所以一般我们在给我们的UIScrollView设置尺寸的时候一定要按照我们的图片的尺寸来

即: 我们的scrollView每一次分页都是按照自己的尺寸来的, 所以我们将scrollView的尺寸设置的和我们所要播放的图片的尺寸大小一致, 就可以完成我们想要的效果

3、让我们的小按钮（索引）监听我们的图片的滚动

其他的麻烦大家看我自己原来的笔记吧, 抱歉, 我真的是混乱的不行了, 对不起了各位:

Snip20160313_40.png Snip20160313_41.png Snip20160313_41.png Snip20160313_42.png

抱歉了, 各位. 我现在真的有点混乱了, 我会将代码全部写出来的, 大家, 看着代码理解吧. 真的很抱歉

图片轮播器的storyboard:

Snip20160313_43.png

代码:

#import "MJViewController.h"

const int MJImageCount = 5;

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

@implementation MJViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    // 1.添加图片
    CGFloat imageW = 300;
    CGFloat imageH = 130;
    CGFloat imageY = 0;
    for (int index = 1; index <= MJImageCount; index++) {
        CGFloat imageX = (index - 1) * imageW;
    
        UIImageView *imageView = [[UIImageView alloc] init];
        imageView.frame = CGRectMake(imageX, imageY, imageW, imageH);
        imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"img_%02d", index]];
    
        [self.scrollView addSubview:imageView];
    }

    // 2.设置内容尺寸
    self.scrollView.contentSize = CGSizeMake(imageW * MJImageCount, 0);
    self.scrollView.pagingEnabled = YES;

    // 3.分页
    self.pageControl.numberOfPages = MJImageCount;

    // 4.定时器
    self.timer = [NSTimer timerWithTimeInterval:1.5 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];
    [[NSRunLoop mainRunLoop] addTimer:self.timer     forMode:NSRunLoopCommonModes];
}

- (void)nextImage
{
    // 1.下一页
    if (self.pageControl.currentPage == MJImageCount - 1) {
        self.pageControl.currentPage = 0;
    } else {
        self.pageControl.currentPage++;
    }

    // 2.设置滚动
    CGPoint offset = CGPointMake(self.scrollView.frame.size.width * self.pageControl.currentPage, 0);
    [self.scrollView setContentOffset:offset animated:YES];
}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    self.timer = [NSTimer timerWithTimeInterval:1.5 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];
    [[NSRunLoop mainRunLoop] addTimer:self.timer     forMode:NSRunLoopCommonModes];
}

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    [self.timer invalidate];
    self.timer = nil;
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    if (self.timer) return;
    self.pageControl.currentPage =     (scrollView.contentOffset.x +     scrollView.frame.size.width * 0.5) / scrollView.frame.size.width;
}
@end

作者说:

抱歉了各位, 真的很抱歉, 如果你点开了这篇文章, 如果你感觉浪费了你的流量, 真的很抱歉, 在写这篇文章的时候, 脑子确实有点乱, 真的很抱歉...
下一次,讲的是我这学期刚学的TableView, 那个文章会有条理一点. 这次真的很抱歉