根据项目开发的需要,系统为的UIPageControl的样式可能并不是我们想要的,这个时候我们就需要根据自己实际需求情况自定义UIPageControl
例如:
那么这种效果怎么实现呢?别的不多说,我们上代码代码:
首先:我们自定义一个类:CustomPageControl类 其父类是UIView
.h
#import <UIKit/UIKit.h>
@interface CustomPageControl : UIView
typedef enum: NSInteger
{
//默认类型/圆形
PageControlStyleCircle = 0,
//正方形
PageControlStyleSquare,
//......
}PageControlStyle;
@property(nonatomic,assign)NSInteger numberOfPags; //点个数
@property(nonatomic,assign)NSInteger currentPags; //当前点位置
@property(nonatomic,strong)UIColor *selectedColor; //选中的色
@property(nonatomic,strong)UIColor *backPageColor; //背景色
@property(nonatomic,assign)PageControlStyle pageControlStyle;//类别
//自定义初始化方法
-(id)initWithFrame:(CGRect)frame pageControlStyle:(PageControlStyle)pageControlStyle ;
@end
.m
初始化
-(id)initWithFrame:(CGRect)frame pageControlStyle:(PageControlStyle)pageControlStyle{
if (self = [super initWithFrame:frame]) {
//默认设置
_backPageColor = [UIColor darkTextColor];
_selectedColor = [UIColor whiteColor];
_pageControlStyle = pageControlStyle;
_currentPags = 0;
}
return self;
}
设置PageView
-(void)setNumberOfPags:(NSInteger)numberOfPags{
if (_numberOfPags != numberOfPags) {
_numberOfPags = numberOfPags;
CGFloat margin = 10;
NSLog(@"%f",self.frame.size.width);
CGFloat width = self.frame.size.width - (numberOfPags - 1)*margin;
CGFloat pointWidth = width / numberOfPags;
for (int i = 0; i < numberOfPags; i++) {
UIView *aview = [[UIView alloc]init];
aview.frame = CGRectMake((margin + pointWidth) * i, 0, pointWidth, pointWidth);
aview.backgroundColor = _backPageColor;
switch (_pageControlStyle) {
case PageControlStyleCircle:
aview.layer.cornerRadius = pointWidth / 2 ;
aview.layer.masksToBounds = YES;
break;
case PageControlStyleSquare:
break;
default:
break;
}
[self addSubview:aview];
/**
* 设置cuurrentPag
*/
if (i == 0) {
if (_selectedColor) {
aview.backgroundColor = _selectedColor;
}
else
{
aview.backgroundColor = [UIColor whiteColor];
}
}
}
}
}
当前的currentPage
-(void)setCurrentPags:(NSInteger)currentPags{
if (_currentPags != currentPags) {
_currentPags = currentPags;
if (self.subviews.count) {
for (UIView *aView in self.subviews) {
aView.backgroundColor = _backPageColor;
}
UIView *aView = self.subviews[_currentPags];
aView.backgroundColor = _selectedColor;
}
}
}
设置选中的颜色
-(void)setSelectedColor:(UIColor *)selectedColor{
if (_selectedColor != selectedColor) {
_selectedColor = selectedColor;
if (self.subviews.count) {
UIView *aView = self.subviews[_currentPags];
aView.backgroundColor = _selectedColor;
}
}
}
设置背景色
-(void)setbackgroundColor:(UIColor *)backgroundColor{
if (_backPageColor != backgroundColor) {
_backPageColor = backgroundColor;
if (self.subviews.count != 0) {
for (UIView *aView in self.subviews) {
aView.backgroundColor = _backPageColor;
}
UIView *aView = self.subviews[_currentPags];
aView.backgroundColor = _selectedColor;
}
}
}
以上是对UIPageControl的自定义 那么使用起来就更简单了
我们导入头文件
#import "CustomPageControl.h"
@interface ViewController ()<UIScrollViewDelegate>
{
CustomPageControl *pageControl;
UIScrollView *scrollView;
}
@end
#define screenWidth self.view.frame.size.width
#define screenHeight self.view.frame.size.height
在viewDidLoad 中:
scrollView = [[UIScrollView alloc]init];
scrollView.frame= CGRectMake(0, 0, screenWidth, screenHeight);
scrollView.contentSize = CGSizeMake(5 * screenWidth, screenHeight);
scrollView.delegate =self;
scrollView.pagingEnabled = YES;
scrollView.bounces = NO;
[self.view addSubview:scrollView];
for (int i = 1; i <= 5; i++) {
UIImageView *aImageView = [[UIImageView alloc]init];
aImageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%d",i]];
aImageView.frame = CGRectMake((i - 1) * screenWidth, 0, screenWidth, screenHeight);
aImageView.contentMode = UIViewContentModeScaleAspectFit;
[scrollView addSubview:aImageView];
}
pageControl = [[CustomPageControl alloc]initWithFrame:CGRectMake(100, screenHeight - 50, screenWidth - 200, 35) pageControlStyle:PageControlStyleSquare];
// pageControl.backgroundColor = [UIColor redColor];
pageControl.backPageColor = [UIColor cyanColor];
pageControl.selectedColor = [UIColor blackColor];
pageControl.numberOfPags = 5;
[self.view addSubview:pageControl];
由于 scrollView.delegate =self; 我们实现UIScrollViewDelegate中的scrollViewDidScroll: 方法 用来监听在scrollView滚动的时候的偏移量 来改变pageControl的显示样式:
- (void)scrollViewDidScroll:(UIScrollView *)scrollVi
{
CGFloat size = scrollView.contentOffset.x;
NSInteger index = (size/scrollView.frame.size.width) + 0.5;
NSLog(@"%f-%ld",size,index);
pageControl.currentPags = index;
}
此时 运行程序 就是我们想要看到的效果了。。。