好久沒寫博客了，這段時(shí)間事情比較多，心情也不是很美妙，但是代碼還是要繼續(xù)啊！
今天分享的是自定義的一個(gè)ScrollView，也就是一般在首頁(yè)Banner都可以隨處可見的滑動(dòng)視圖，這里做了一個(gè)自動(dòng)滑動(dòng)和手動(dòng)滑動(dòng)平滑過度的demo。其實(shí)原理大家都知道的，以三張圖片為例，就是把第一張放在第三張的后面，這樣就有四個(gè)，已形成無限循環(huán)滑動(dòng)，下面看效果圖：

滑動(dòng)效果圖

1、使用

之前也見過網(wǎng)上的一些demo，這里只是自己封裝一下，代碼應(yīng)該還是比較清晰的，使用起來也非常簡(jiǎn)單，如下：

//
//  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(@"點(diǎn)擊了第 %ld 張",index);
    };
    [self.view addSubview:scrollV];
}

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

@end

這里只需要導(dǎo)入HWScrollView.h這個(gè)頭文件即可，然后創(chuàng)建一個(gè)HWScrollView，設(shè)置好frame、imageArray、placeHolderImage和PageControl的位置即可，直接調(diào)用以下這個(gè)類方法即可

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

然后就是點(diǎn)擊了每個(gè)imageView后的回調(diào)

    scrollV.callBackBlock = ^(NSInteger index, NSString *imageURL) {
        NSLog(@"點(diǎn)擊了第 %ld 張",index);
    };

使用上面callBackBlock回調(diào)，得到index和imageURL然后就可以做你想做的事情了。

2、分析

進(jìn)入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
/**
 *  自動(dòng)滑動(dòng)的時(shí)間間隔
 */
@property (assign, nonatomic) NSTimeInterval scrollTime;
/**
 *  是否允許自動(dòng)滑動(dòng)
 */
@property (assign, nonatomic) BOOL isAllowAutoScroll;
/**
 *  PageControl的位置
 */
@property (assign, nonatomic) PageControlShowStyle pageControlShowStyle;
/**
 *  點(diǎn)擊后的回調(diào)
 */
@property (copy, nonatomic) tapCallBackBlock callBackBlock;
/**
 *  創(chuàng)建一個(gè)新的HWScrollView
 *
 *  @param frame                frame
 *  @param imageURLArray        要展示的圖片鏈接的數(shù)組
 *  @param placeHolder          未加載完成時(shí)的替代圖片
 *  @param pageControlShowStyle PageControl的顯示位置
 *
 *  @return HWScrollView
 */
+ (instancetype)scrollViewWithFrame:(CGRect)frame imageURLArray:(NSArray *)imageURLArray placeHolderImage:(NSString *)placeHolder pageControlShowStyle:(PageControlShowStyle)pageControlShowStyle;

@end

這里所有的屬性都注釋的比較清楚，用起來會(huì)比較方便。

進(jìn)入HWScrollView.m你可以看到

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

這里加載網(wǎng)絡(luò)圖片的時(shí)候我使用的是YYWebImage，在demo里面可以看見，如果你的工程中使用的是SDWebImage你也可以把YYWebImage換成SDWebImage，并把方法替換一下即可

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

3、關(guān)于自定義PageControl

上面效果圖我們可以看到，使用的PageControl是自定義的，

未選中狀態(tài)

選中狀態(tài)

@interface HWPageControl : UIPageControl
/**
 *  當(dāng)前選中的pageControl
 */
@property (strong, nonatomic) UIImage *activeImage;
/**
 *  沒有選中的pageControl
 */
@property (strong, nonatomic) UIImage *inactiveImage;

@end

然后實(shí)現(xiàn)的時(shí)候

@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的子視圖上加一個(gè)imageView，然后找到這個(gè)imageView添加自定義的圖片，就實(shí)現(xiàn)了自定義效果

4、最后

這里使用的是YYWebImage，關(guān)于使用方法（手動(dòng)添加和cocoaPods添加）可以在 這里 YYWebImage 查看，這里使用的是手動(dòng)添加的方法。
以上所有的代碼都可以在HWScrollViewDemo看到。

未經(jīng)作者許可請(qǐng)勿轉(zhuǎn)載！