Step1、自定义一个view,如下:
@interface ACPageControlView : UIView
@property (nonatomic, assign) NSInteger currentPage;
@property (nonatomic, strong) UIColor *currentColor;
@property (nonatomic, strong) UIColor *otherColor;
- (instancetype)initWithFrameOriginY:(CGFloat)senderY pageCount:(NSInteger)senderPageCount currentColor:(UIColor *)senderCurrentColor otherColor:(UIColor *)senderOtherColor ;
@end
@implementation ACPageControlView
- (instancetype)initWithFrameOriginY:(CGFloat)senderY pageCount:(NSInteger)senderPageCount currentColor:(UIColor *)senderCurrentColor otherColor:(UIColor *)senderOtherColor {
CGFloat perItemWidth = 14;
CGFloat perItemHeight = 2;
CGFloat perItemSpace = 4;
CGFloat totalWidth = perItemWidth * senderPageCount + perItemSpace * (senderPageCount - 1);
CGFloat pageX = ([UIScreen mainScreen].bounds.size.width - totalWidth) * 0.5;
CGRect frame = CGRectMake(pageX, senderY, totalWidth, perItemHeight);
self = [super initWithFrame:frame];
if (self) {
self.backgroundColor = [UIColor clearColor];
self.currentColor = senderCurrentColor;
self.otherColor = senderOtherColor;
for (NSInteger i = 0; i < senderPageCount; i++) {
UIView *itemView = [[UIView alloc] initWithFrame:CGRectMake(i * (perItemWidth + perItemSpace), 0, perItemWidth, perItemHeight)];
itemView.backgroundColor = (i == 0) ? senderCurrentColor : senderOtherColor;
itemView.tag = i;
[self addSubview:itemView];
}
}
return self;
}
- (void)setCurrentPage:(NSInteger)currentPage {
_currentPage = currentPage;
for (UIView *itemView in self.subviews) {
itemView.backgroundColor = (itemView.tag == currentPage) ? self.currentColor : self.otherColor;
}
}
@end
Step2、在需要使用的地方导入头文件:
#import "ACPageControlView.h"
Step3、初始化以及结合UIScrolView使用:
@interface ViewController ()
@property (nonatomic, strong) UIScrollView *scrollView;
@property (nonatomic, strong) ACPageControlView *pageControlView;
@end
@implementation ViewController
#pragma mark - 生命周期
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
[self configUIAction];
}
#pragma mark - 初始化
- (void)configUIAction {
self.scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
self.scrollView.pagingEnabled = YES;
self.scrollView.showsHorizontalScrollIndicator = NO;
[self.view addSubview:self.scrollView];
UIView *page1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.scrollView.bounds.size.width, self.scrollView.bounds.size.height)];
UIView *page2 = [[UIView alloc] initWithFrame:CGRectMake(self.scrollView.bounds.size.width, 0, self.scrollView.bounds.size.width, self.scrollView.bounds.size.height)];
CGFloat rectY= 100;
// 创建矩形视图并添加到页面中
UIView *rect1 = [[UIView alloc] initWithFrame:CGRectMake(10, rectY, 100, 100)];
rect1.backgroundColor = [UIColor blueColor];
[page1 addSubview:rect1];
UIView *rect2 = [[UIView alloc] initWithFrame:CGRectMake(120, rectY, 100, 100)];
rect2.backgroundColor = [UIColor greenColor];
[page1 addSubview:rect2];
UIView *rect3 = [[UIView alloc] initWithFrame:CGRectMake(230, rectY, 100, 100)];
rect3.backgroundColor = [UIColor yellowColor];
[page1 addSubview:rect3];
UIView *rect4 = [[UIView alloc] initWithFrame:CGRectMake(10, rectY, 100, 100)];
rect4.backgroundColor = [UIColor purpleColor];
[page2 addSubview:rect4];
// 将页面添加到scrollView中
[self.scrollView addSubview:page1];
[self.scrollView addSubview:page2];
// 设置scrollView的内容大小
self.scrollView.contentSize = CGSizeMake(self.scrollView.bounds.size.width * 2, self.scrollView.bounds.size.height);
self.scrollView.delegate = self;
[self configACPageControlViewUIAction];
}
- (void)configACPageControlViewUIAction {
if (!self.pageControlView) {
self.pageControlView = [[ACPageControlView alloc] initWithFrameOriginY:CGRectGetHeight(self.view.bounds) - 200 pageCount:2 currentColor:[UIColor redColor] otherColor:[UIColor grayColor]];
[self.view addSubview:self.pageControlView];
}
}
#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
CGFloat pageWidth = scrollView.bounds.size.width;
int currentPage = floor((scrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
NSLog(@"----currentPage------(%d)", currentPage);
self.pageControlView.currentPage = currentPage;
}
@end