您的位置:首页 > 产品设计 > UI/UE

iOS中UIScrollView和UIPageControl以及NSTimer的综合使用

2015-11-17 14:39 609 查看
在iOS开发中,我们经常会用到UISCrollView和UIPageControl

下面的demo实现了两者加上NSTimer定时器之后的功能

//
//  ViewController.m
//  UI_ScrollView_PageControllDemo
//
//  Created by Devin on 15/11/17.
//  Copyright © 2015年 Devin. All rights reserved.
//

#import "ViewController.h"

// 将我们会用到的数据定义好,方便代码的书写
#define kScreenHeight [UIScreen mainScreen].bounds.size.height
#define kScreenWidth [UIScreen mainScreen].bounds.size.width
CGFloat kImageCount = 10;
CGFloat scrollY = 20;
CGFloat pageCtrlWidth = 200;

@interface ViewController ()<UIScrollViewDelegate>

@property (nonatomic, strong) UIScrollView *scrollView;
@property (nonatomic, strong) UIPageControl *pageCtr;

@property (nonatomic, strong) NSTimer *timer; // 声明一个定时器
@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
[self initScrollView];
[self initPageControl];
[self addTimer];
}

// 初始化scrollView并添加图片
- (void)initScrollView{

self.scrollView = [[UIScrollView alloc] initWithFrame:(CGRectMake(0, scrollY, kScreenWidth, kScreenHeight - scrollY))];
self.scrollView.delegate = self;
// 如果没下面这行代码,程序在第一次运行的时候就会出现bug,第一张图和第二张图的改变不会影响pagecontrol的改变,所以需要让第一次运行从第二张图开始
self.scrollView.contentOffset = CGPointMake(kScreenWidth, 0);

// 共有11张图,最后两张一样,作为假图,并且我们把最后一张放在第一张,原来的第一张实际上在第二张,所以需要程序从第二张开始运行
for (int i = 1; i < kImageCount + 2; i ++) {

CGFloat x = kScreenWidth * i;
if (i == kImageCount + 1) {

x = 0;
}

UIImageView *imageView = [[UIImageView alloc] initWithFrame:(CGRectMake(x, scrollY, kScreenWidth, kScreenHeight - scrollY))];

imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"huoying%d", i]];
[self.scrollView addSubview:imageView];
}

self.scrollView.contentSize = CGSizeMake(kScreenWidth * (kImageCount + 1), kScreenHeight - scrollY);
self.scrollView.pagingEnabled = YES;
[self.view addSubview:self.scrollView];
}

// 创建UIPageControl
- (void)initPageControl{

self.pageCtr = [[UIPageControl alloc] initWithFrame:(CGRectMake((kScreenWidth - pageCtrlWidth) / 2, kScreenHeight - scrollY, pageCtrlWidth, scrollY))];
self.pageCtr.numberOfPages = kImageCount;

self.pageCtr.pageIndicatorTintColor = [UIColor greenColor];
self.pageCtr.currentPageIndicatorTintColor = [UIColor yellowColor];

// 把pageControl插在scrollView的上面
[self.view insertSubview:self.pageCtr aboveSubview:self.scrollView];
}

#pragma mark --- initTimer
// 创建定时器
- (void)addTimer{

// 定时器创建类方法
self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];

// NSRunLoop 是消息机制,只有把定时器放在消息机制里面,才会通过多线程一直执行
[[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}
- (void)nextPage{

CGPoint offset = self.scrollView.contentOffset;

if (offset.x + kScreenWidth == kScreenWidth * (kImageCount + 1)) {

[self.scrollView setContentOffset:CGPointZero animated:NO];
[self.scrollView setContentOffset:CGPointMake(kScreenWidth, 0) animated:YES];
}else{

[self.scrollView setContentOffset:CGPointMake(offset.x + kScreenWidth, 0) animated:YES];
}

offset = self.scrollView.contentOffset;
self.pageCtr.currentPage = offset.x / kScreenWidth;
NSLog(@"%ld", self.pageCtr.currentPage);

}

#pragma mark --- UIScrollView delegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{

NSInteger page = scrollView.contentOffset.x / kScreenWidth + 0.5; // 当滑动视图超过屏幕一半的时候,page就会+1
// 因为程序从第二张图开始运行,已经有了偏移量,所以page需要-1
self.pageCtr.currentPage = page - 1;
}

// 当视图将要拖动的时候
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{

[self removeTimer];
}

// 当视图停止拖曳的时候
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{

// GCD,添加等待时间
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(3.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

[self addTimer];
});
}

//关闭计时器
- (void)removeTimer{

[self.timer invalidate];
self.timer = nil;
}

- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

@end


运行后的效果是这样的

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: