最近看见有个APP的图片浏览页面的每个pageControl小圆点就是当前的scrollerview的一张图片,觉得很炫,于是就写了一个自定义的pageControl力求达到这样的效果,现在做完了,我想分享给大家,需要的朋友可以看看,好了,废话不多说,先上图.
狙击王,哈哈
这里我用了海贼王的7张图片,可以看见下面有7个pageControl,而且都是当前scrollerview的图片,怎么做呢?其实很简单,接下来上代码.
XMHPageControl.h
这个是我自定义的pageControl头文件.
#import
@interface XMHPageControl : UIView
//声明pageControl点的样式枚举
typedef enum : NSInteger{
/**
默认类型:圆形
*/
XMHPageControlStyleDefaoult = 0,
/**
正方形
*/
XMHPageControlStyleSquare,
/**
<<<缩略图>>>!!!
*/
XMHPageControlStyleImages,
}XMHPageControlStyle;
@property(nonatomic, assign)NSInteger pageNumber;//点的个数
@property(nonatomic, assign)CGFloat pageSpace;//点的间隔
@property(nonatomic, strong)UIColor *pageBackgroundColor;//点的背景颜色
@property(nonatomic, strong)UIColor *selectedColor;//选中的背景色
@property(nonatomic, assign)NSInteger currentPageNumber;//当前点击的pageNumber
@property(nonatomic, assign)XMHPageControlStyle pageStyle;//当前pageControl样式
@property(nonatomic, strong)NSMutableArray *imageArray;
//初始化方法
-(instancetype)initWithFrame:(CGRect)frame pageStyle:(XMHPageControlStyle)pageStyle withImageArray:(NSMutableArray *)imageArray;
@end
接下来是我自定义的.m文件
#import "XMHPageControl.h"
@implementation XMHPageControl
-(instancetype)initWithFrame:(CGRect)frame pageStyle:(XMHPageControlStyle)pageStyle withImageArray:(NSMutableArray *)imageArray
{
self = [super initWithFrame:frame];
if (self) {
_pageBackgroundColor = [UIColor grayColor];
_selectedColor = [UIColor blackColor];
_pageSpace = 10;//默认的点的空隙
_pageStyle = pageStyle;
_currentPageNumber = 0;
_imageArray = [NSMutableArray arrayWithArray:imageArray];
}
return self;
}
#pragma mark 重写pageNumber的setter方法
-(void)setPageNumber:(NSInteger)pageNumber
{
if (_pageNumber != pageNumber) {
_pageNumber = pageNumber;
//创建page小点
//1.获取当前对象的宽
CGFloat myWidth = self.frame.size.width;
CGFloat pointWidth = ( myWidth - (_pageNumber - 1) * _pageSpace) / _pageNumber;
//2.循环创建图片,添加到self上
for (NSInteger i = 0; i < _pageNumber; i++) {
//每个小点
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake((_pageSpace + pointWidth) * i, 0, pointWidth, pointWidth)];
switch (_pageStyle) {
case XMHPageControlStyleDefaoult:
imageView.layer.cornerRadius = pointWidth / 2.0;
imageView.layer.masksToBounds = YES;
imageView.image = _imageArray[i];
break;
case XMHPageControlStyleSquare:
break;
case XMHPageControlStyleImages:
break;
default:
break;
}
//为每张图添加tag值
[ imageView setTag:1000 + i ];
imageView.backgroundColor = _pageBackgroundColor;
[self addSubview:imageView];
}
//设置被选中的颜色和被选中的点
UIImageView *imageView = [self.subviews objectAtIndex:_currentPageNumber];
imageView.backgroundColor = _selectedColor;
}
}
#pragma mark 设置背景颜色方法
-(void)setPageBackgroundColor:(UIColor *)pageBackgroundColor
{
_pageBackgroundColor = pageBackgroundColor;
//子视图不空的情况下遍历修改每张图的颜色
if (self.subviews.count != 0) {
for (UIImageView *imageView in self.subviews) {
imageView.backgroundColor = _pageBackgroundColor;
}
//被选中的颜色,防止被覆盖
UIImageView *imageView = [self.subviews objectAtIndex:_currentPageNumber];
imageView.backgroundColor = _selectedColor;
}
}
#pragma mark 被选中的颜色
-(void)setSelectedColor:(UIColor *)selectedColor
{
if (_selectedColor != selectedColor) {
_selectedColor = selectedColor;
//有图的情况下
if (self.subviews.count) {
//修改被选中的那张图片的颜色
UIImageView *imageView = [self.subviews objectAtIndex:_currentPageNumber];
imageView.backgroundColor = _selectedColor;
}
}
}
#pragma mark 设置当前被选中的下标(currentPageNumber)
-(void)setCurrentPageNumber:(NSInteger)currentPageNumber
{
if (_currentPageNumber != currentPageNumber) {
_currentPageNumber = currentPageNumber;
//判断当前图片是否已经存在(即pageNumber是否为0)
if (self.subviews.count) {
//改变没有被选中的颜色
for (UIImageView *imageView in self.subviews) {
imageView.backgroundColor = _pageBackgroundColor;
}
UIImageView *imageView = [self.subviews objectAtIndex:_currentPageNumber];
imageView.backgroundColor = _selectedColor;
[UIView animateWithDuration:.3 animations:^{
imageView.transform = CGAffineTransformMakeScale(1.6, 1.6);
} completion:^(BOOL finished) {
imageView.transform = CGAffineTransformMakeScale(1.0, 1.0);
//当翻页的时候pageControl会有个放大缩小的动动画
}];
}
}
}
@end
在代码里都有详细的注释,相信大家可以理解吧
在viewcontroller里使用自定义的pageControl了
#import "ViewController.h"
#import "XMHPageControl.h"
@interface ViewController ()
@property(nonatomic, strong)XMHPageControl *pageControl;
@property(nonatomic, strong)UIScrollView *scrollView;
@property(nonatomic, strong)NSMutableArray *imageArray;
@end
@implementation ViewController
-(void)loadView
{
[super loadView];
_imageArray = [NSMutableArray array];
for (NSInteger i = 1; i < 8; i++) {
UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"h%ld.jpg",i]];
[_imageArray addObject:image];
}
//初始化滚动视图
_scrollView = [[UIScrollView alloc]initWithFrame:self.view.frame];
//1)设置滚动的范围(contentSize只负责大小)
_scrollView.contentSize = CGSizeMake(self.view.frame.size.width * 7, self.view.frame.size.height);
//2)设置初始的偏移量
_scrollView.contentOffset = CGPointMake(0, 0);//坐标是相对于滚动视图的
//3)设置整页滚动
_scrollView.pagingEnabled = YES;
//4)隐藏(显示)滚动条
_scrollView.showsHorizontalScrollIndicator = NO;//showsHorizontalScrollIndicator横向滚动条,showsVerticalScrollIndicator为纵向滚动条,默认值为yes,显示.
//5)关闭回弹
_scrollView.bounces = NO;//默认值为yes,允许回弹
//6)是否允许滚动
//_scrollView.scrollEnabled = NO;//停留在某一视图不能滚动
//7)设置代理
_scrollView.delegate = self;
//添加图片
for (NSInteger i = 1; i <= 7; i++) {
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake((i - 1) * self.view.frame.size.width, 0, self.view.frame.size.width, self.view.frame.size.height)];
//为每个imageView添加图片
imageView.image = _imageArray[i - 1];
[_scrollView addSubview:imageView];
}
[self.view addSubview:_scrollView];
}
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
_pageControl = [[XMHPageControl alloc]initWithFrame:CGRectMake(50, 600, 300, 20) pageStyle:XMHPageControlStyleDefaoult withImageArray:_imageArray];
_pageControl.selectedColor = [UIColor blackColor];
_pageControl.pageBackgroundColor = [UIColor brownColor];
_pageControl.pageNumber = 7;
_pageControl.currentPageNumber = 0;
[self.view addSubview:_pageControl];
}
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
_pageControl.currentPageNumber = _scrollView.contentOffset.x / self.view.frame.size.width;
}
-(void)changePage
{
if (_pageControl.currentPageNumber == _pageControl.pageNumber - 1) {
_pageControl.currentPageNumber = 0;
}
else
{
_pageControl.currentPageNumber++;
}
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
做的还是不太好,大家可以再改进改进.
我已经将代码上传到github上面了,有兴趣的朋友可以去下来看看.
以后如果遇到有需要分享的东西我会不定期给大家分享,谢谢支持!