好久沒寫博客了，這段時間事情比較多，心情也不是很美妙往踢，但是代碼還是要繼續(xù)啊徘层！
今天分享的是自定義的一個ScrollView峻呕，也就是一般在首頁Banner都可以隨處可見的滑動視圖，這里做了一個自動滑動和手動滑動平滑過度的demo趣效。其實原理大家都知道的瘦癌，以三張圖片為例，就是把第一張放在第三張的后面跷敬，這樣就有四個佩憾，已形成無限循環(huán)滑動，下面看效果圖：
滑動效果圖
1干花、使用
之前也見過網(wǎng)上的一些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這個頭文件即可鬼廓，然后創(chuàng)建一個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;
/**
* 創(chuàng)建一個新的HWScrollView
*
* @param frame frame
* @param imageURLArray 要展示的圖片鏈接的數(shù)組
* @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"
這里加載網(wǎng)絡圖片的時候我使用的是YYWebImage责蝠，在demo里面可以看見党巾，如果你的工程中使用的是SDWebImage你也可以把YYWebImage換成SDWebImage，并把方法替換一下即可
[_leftImageView yy_setImageWithURL:[NSURL URLWithString:_imageURLArray[_leftImageIndex]] placeholder:_placeHolderImage];
3霜医、關于自定義PageControl
上面效果圖我們可以看到齿拂，使用的PageControl是自定義的，
未選中狀態(tài)
選中狀態(tài)
使用的是上面這兩個圖片來自定義的
PageControl肴敛，查看代碼我是這樣寫的
@interface HWPageControl : UIPageControl
/**
* 當前選中的pageControl
*/
@property (strong, nonatomic) UIImage *activeImage;
/**
* 沒有選中的pageControl
*/
@property (strong, nonatomic) UIImage *inactiveImage;
@end
然后實現(xiàn)的時候
@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添加自定義的圖片，就實現(xiàn)了自定義效果
4医男、最后
這里使用的是YYWebImage砸狞，關于使用方法（手動添加和cocoaPods添加）可以在 這里 YYWebImage 查看，這里使用的是手動添加的方法昨登。
以上所有的代碼都可以在HWScrollViewDemo看到趾代。
未經(jīng)作者許可請勿轉載！
