好久没写博客了，这段时间事情比较多，心情也不是很美妙，但是代码还是要继续啊！
今天分享的是自定义的一个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
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看到。
未经作者许可请勿转载！