iOS简单自定义滑动视图（UIScrollView）

好久没写博客了，这段时间事情比较多，心情也不是很美妙，但是代码还是要继续啊！
今天分享的是自定义的一个ScrollView，也就是一般在首页Banner都可以随处可见的滑动视图，这里做了一个自动滑动和手动滑动平滑过度的demo。其实原理大家都知道的，以三张图片为例，就是把第一张放在第三张的后面，这样就有四个，已形成无限循环滑动，下面看效果图：

滑动效果图

1、使用

---

之前也见过网上的一些demo，这里只是自己封装一下，代码应该还是比较清晰的，使用起来也非常简单，如下：

//
//  ViewController.m
//  HWScrollViewDemo
//
//  Created by HenryCheng on 16/1/22.
//  Copyright © 2016年 www.igancao.com. All rights reserved.
//

#import "ViewController.h"
#import "HWScrollView.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    NSArray *imageArray = @[
                            @"https://d13yacurqjgara.cloudfront.net/users/26059/screenshots/2047158/beerhenge.jpg",
                            @"https://d13yacurqjgara.cloudfront.net/users/26059/screenshots/2016158/avalanche.jpg",
                            @"https://d13yacurqjgara.cloudfront.net/users/26059/screenshots/1839353/pilsner.jpg",
                            @"https://d13yacurqjgara.cloudfront.net/users/26059/screenshots/1833469/porter.jpg",
                            ];
 
    HWScrollView *scrollV = [HWScrollView scrollViewWithFrame:CGRectMake(0, 64, CGRectGetWidth(self.view.frame), 120)  imageURLArray:imageArray placeHolderImage:@"pictureHolder" pageControlShowStyle:PageControlShowStyleCenter];
    self.automaticallyAdjustsScrollViewInsets = NO;
    scrollV.callBackBlock = ^(NSInteger index, NSString *imageURL) {
        NSLog(@"点击了第 %ld 张",index);
    };
    [self.view addSubview:scrollV];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

这里只需要导入HWScrollView.h这个头文件即可，然后创建一个HWScrollView，设置好frame、imageArray、placeHolderImage和PageControl的位置即可，直接调用以下这个类方法即可

+ (instancetype)scrollViewWithFrame:(CGRect)frame imageURLArray:(NSArray *)imageURLArray placeHolderImage:(NSString *)placeHolder pageControlShowStyle:(PageControlShowStyle)pageControlShowStyle;

然后就是点击了每个imageView后的回调

    scrollV.callBackBlock = ^(NSInteger index, NSString *imageURL) {
        NSLog(@"点击了第 %ld 张",index);
    };

使用上面callBackBlock回调，得到index和imageURL然后就可以做你想做的事情了。

2、分析

---

进入HWScrollView.h你可以看到

//
//  HWScrollView.h
//  HWScrollViewDemo
//
//  Created by HenryCheng on 16/1/22.
//  Copyright © 2016年 www.igancao.com. All rights reserved.
//

#import <UIKit/UIKit.h>

typedef NS_ENUM(NSUInteger, PageControlShowStyle) {
    
    PageControlShowStyleNone        = 0,
    PageControlShowStyleBottomLeft  = 1 << 0,
    PageControlShowStyleCenter      = 1 << 1,
    PageControlShowStyleBottomRight = 1 << 2,
    PageControlShowStyleTopLeft     = 1 << 3,
    PageControlShowStyleTopRight    = 1 << 4
    
};

typedef void(^tapCallBackBlock)(NSInteger index, NSString *imageURL);

@interface HWScrollView : UIView
/**
 *  自动滑动的时间间隔
 */
@property (assign, nonatomic) NSTimeInterval scrollTime;
/**
 *  是否允许自动滑动
 */
@property (assign, nonatomic) BOOL isAllowAutoScroll;
/**
 *  PageControl的位置
 */
@property (assign, nonatomic) PageControlShowStyle pageControlShowStyle;
/**
 *  点击后的回调
 */
@property (copy, nonatomic) tapCallBackBlock callBackBlock;
/**
 *  创建一个新的HWScrollView
 *
 *  @param frame                frame
 *  @param imageURLArray        要展示的图片链接的数组
 *  @param placeHolder          未加载完成时的替代图片
 *  @param pageControlShowStyle PageControl的显示位置
 *
 *  @return HWScrollView
 */
+ (instancetype)scrollViewWithFrame:(CGRect)frame imageURLArray:(NSArray *)imageURLArray placeHolderImage:(NSString *)placeHolder pageControlShowStyle:(PageControlShowStyle)pageControlShowStyle;

@end

这里所有的属性都注释的比较清楚，用起来会比较方便。

进入HWScrollView.m你可以看到

#import "HWScrollView.h"
#import "UIImageView+YYWebImage.h"

这里加载网络图片的时候我使用的是YYWebImage，在demo里面可以看见，如果你的工程中使用的是SDWebImage你也可以把YYWebImage换成SDWebImage，并把方法替换一下即可

    [_leftImageView yy_setImageWithURL:[NSURL URLWithString:_imageURLArray[_leftImageIndex]] placeholder:_placeHolderImage];

3、关于自定义PageControl

---

上面效果图我们可以看到，使用的PageControl是自定义的，

未选中状态 选中状态
使用的是上面这两个图片来自定义的PageControl，查看代码我是这样写的

@interface HWPageControl : UIPageControl
/**
 *  当前选中的pageControl
 */
@property (strong, nonatomic) UIImage *activeImage;
/**
 *  没有选中的pageControl
 */
@property (strong, nonatomic) UIImage *inactiveImage;

@end

然后实现的时候

@implementation HWPageControl

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        self.activeImage = [UIImage imageNamed:@"all_yellow_circle"];
        self.inactiveImage = [UIImage imageNamed:@"border_yellow_circle"];
    }
    return self;
}
- (void)updateDots {
    for (int i = 0; i < [self.subviews count]; i++) {
        UIImageView *imageV = [[UIImageView alloc]initWithFrame:self.subviews[i].bounds];
        [self.subviews[i] addSubview:imageV];
    }
    for (int i = 0; i < [self.subviews count]; i++) {
        UIImageView *imagev = (UIImageView *)self.subviews[i].subviews[0];
        if ([imagev isKindOfClass:[UIImageView class]]) {
            if (i == self.currentPage) {
                imagev.image = _activeImage;
            } else {
                imagev.image = _inactiveImage;
            }
        }
    }
}
- (void)setCurrentPage:(NSInteger)page {
    [super setCurrentPage:page];
    [self updateDots];
}

@end

在PageControl的子视图上加一个imageView，然后找到这个imageView添加自定义的图片，就实现了自定义效果

4、最后

---

这里使用的是YYWebImage，关于使用方法（手动添加和cocoaPods添加）可以在 这里 YYWebImage 查看，这里使用的是手动添加的方法。
以上所有的代码都可以在HWScrollViewDemo看到。

未经作者许可请勿转载！