[How to] UIScrollView的使用方法

1.简介

代码

延续前一个博客使用Xib来创建view，本文我们创建一个带有PageControlView的ScrollView的table的headView，如下图：

具有自动滚动：

具有拖拽完毕后，自动滚动继续效果：

2.实现

本文中将在TableView的headView中增减一个scrollView和PageControl两个控件来展示你的热点商品信息。

同样的我们还是使用xib来包装这个局部。

1.按照如下新建xib文件，并设置Custom Class 为之后创建的自定义View类。

在这个xib设计中，两个View设定高度为1，作为两条分隔横线来使用。

需要特别注意的是：ScrollerView与PageControl一定要有一定要按照如图所示先定义ScrollView然后在定义PageControlView这样在实际云顶的时候ScrollView才不会覆盖掉PageControlView。在使用代码创建的时候也应该这种顺序进行addsubview操作。

2.定义完后需要定义xib对应的View class文件：

XFHeadView.h

#import <UIKit/UIKit.h>

@interface XFHeadView : UIView

// 需要显示的所有图片信息
@property (nonatomic, strong) NSArray *pictsList;

// 类创建方法
+(instancetype) headViewInit;
@end

XFHeadView.m

//
//  XFHeadView.m
//  How to create groupBuy page
//
//  Created by apple on 15/12/17.
//  Copyright © 2015年 apple. All rights reserved.
//

#import "XFHeadView.h"

@interface XFHeadView()<UIScrollViewDelegate>

@property (weak, nonatomic) IBOutlet UIScrollView *scrollerView;
@property (weak, nonatomic) IBOutlet UIPageControl *indexView;

// 计算使用变量
@property(nonatomic,assign) CGSize scrollViewSize;

// 自动滚动timer
@property(nonatomic, strong) NSTimer *timer;

@end

@implementation XFHeadView
+(instancetype) headViewInit;
{
    // 从xib文件中加载 view
    XFHeadView * headView = [[[NSBundle mainBundle] loadNibNamed:@"XFHeadView" owner:nil options:nil]lastObject];

    // 设定尺寸的计算变量
    headView.scrollViewSize = headView.scrollerView.bounds.size;

    // 设定scrollerView的代理为当前view对象
    headView.scrollerView.delegate = headView;

    // 设定一些固定的控件配置
    // 禁止纵向滚动
    headView.scrollerView.showsHorizontalScrollIndicator = NO;

    // 分页显示
    headView.scrollerView.pagingEnabled = YES;

    // 返回
    return headView;
}

-(void)addAutoNextPageTimer
{
    // 如果已有timer在运行则将其停止销毁
    if  (self.timer != nil && self.timer.isValid)
    {
        [self.timer invalidate];
        self.timer = nil;
    }

    // 新建timer
    NSTimer *timer = [NSTimer timerWithTimeInterval:2.0 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
    self.timer = timer;

    // 将此timer加入到主loop中去,并设定NSRunLoopCommonModes，防止在主loop中阻塞
    NSRunLoop *runLoop = [NSRunLoop currentRunLoop];
    [runLoop addTimer:timer forMode: NSRunLoopCommonModes];
}

/**
 *  滚动到下一页
 */
-(void)nextPage
{
    // 设定pageControl,在这里不这是pageControl变量的值，这个值到代理方法中计算
    NSInteger page = self.indexView.currentPage;
    ) {
        page = ;
    }
    else{
        page++;
    }

    /**
     *  根据当前页码来控制scroll的off位置，去显示正确的图片
     */
    CGFloat offsetX = page * self.scrollerView.frame.size.width;

    [UIView animateWithDuration:1.0 animations:^{
        self.scrollerView.contentOffset = CGPointMake(offsetX, );
    }];
}

/**
 *  设定图片信息
 *
 *  @param pictsList pictsList description
 */
-(void) setPictsList:(NSArray *)pictsList
{
    _pictsList = pictsList;

    // 设定UIPageControl
    self.indexView.numberOfPages = pictsList.count;
    self.indexView.currentPage = ;

    // 首先需要将将scrollView上所有字view，也就是全部图片清除
    [self.scrollerView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];

    // 设定需要加载的图片
    ; i < pictsList.count; i++)
    {
        // 创建图片空间
        UIImageView *imageView = [[UIImageView alloc] init];
        [self.scrollerView addSubview:imageView];

        // 设定图片
        NSString *imageName = pictsList[i];
        imageView.image = [UIImage imageNamed:imageName];

        // 设定在scrollView中每一张图的排版
        CGFloat x  = i * self.scrollViewSize.width;
        imageView.frame = CGRectMake(x, , self.scrollViewSize.width, self.scrollViewSize.height);
    }

    // 设置滚动空间的滚动范围,只有横向滚动，无纵向滚动
    self.scrollerView.contentSize = CGSizeMake(pictsList.count * self.scrollViewSize.width, );

    // 开始自动滚动
    [self addAutoNextPageTimer];
}

#pragma mark --scrollView的代理方法

// 正在滚动
- (void) scrollViewDidScroll:(UIScrollView *)scrollView
{
    // 计算pageControl的值
    ) / self.scrollerView.frame.size.width;
    self.indexView.currentPage = page;
}

// 当点住scrollView不让图片自动滚动的时候停止自动化timer
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    [self.timer invalidate];
    self.timer = nil;
}

-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    [self addAutoNextPageTimer];
}

@end

3.代码说明：

ScrollView拥有代理属性，将代理设置为本类：

    // 设定scrollerView的代理为当前view对象
    headView.scrollerView.delegate = headView;

4.使用自定义View

在controller中只要简单的将此View创建并赋值给headView属性即可：

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    XFHeadView *headView = [XFHeadView headViewInit];

    headView.pictsList = @[@"headimage_01", @"headimage_02", @"headimage_03", @"headimage_04"];

    self.goodsTableView.tableHeaderView = headView;
。。。。
。。。。
}

3.总结

ScrollView空间关键点在于设置内部图片的位置，你可以将ScrollView想象成一个潜水镜，在发生scrol的时候其实是scrollView这个潜水镜在移动，而内部内容并没有移动。