5.图片轮播器(scrollView的使用)

来源:互联网 发布:知寻淘宝教程 编辑:程序博客网 时间:2024/05/26 12:07

目的:创建一个图片轮播器,2s自动跳转到下一个图片,另外用手势可以控制图片的跳转。

分析思路

    scrollViewgetter方法懒加载只指定了大小,添加到视图。接着在 viewDidLoad中添加图像,并且计算位 。 运行观察效果,修改scrollView的属性。然后实例化UIPageControl。由于分页控件和滚动视图是分离的,因此监听滚动停止代理方法,过程为设置代理、遵守协议、实现代理,修改分页控件的页数。接着将UIPageControl定义成属性,并且添加监听方法, 实现监听方法,页数变化后,修改scrollView的位置,最后添加时钟,调用分页控件的监听方法,实现图片自动轮播。

效果:


1.代码

#import "ViewController.h"#define kImageCount 5 // 图片数@interface ViewController () <UIScrollViewDelegate> // 遵守代理的协议@property(nonatomic, strong) UIScrollView *scrollView;@property (nonatomic, strong) UIPageControl *pageControl;@property (nonatomic, strong) NSTimer *timer;@end@implementation ViewController- (UIScrollView *)scrollView{    int width = (self.view.bounds.size.width -300)/2 ;    if (_scrollView == nil) {        _scrollView = [[UIScrollView alloc ]initWithFrame:CGRectMake(width, 30, 300, 130)];                [self.view addSubview:_scrollView];                // 按页码滚动        _scrollView.pagingEnabled = YES;                // 设置横向滚动条不显示        _scrollView.showsHorizontalScrollIndicator = NO;        _scrollView.showsVerticalScrollIndicator = NO;                // 滚动起来         self.scrollView.contentSize = CGSizeMake(kImageCount * _scrollView.bounds.size.width, 0);               // 设置代理        _scrollView.delegate = self;    }    return _scrollView;}// 实例化分页控件- (UIPageControl *)pageControl{    if (_pageControl == nil)    {    // 分页控件,本质上和ScrollView没有任何关系    _pageControl = [[UIPageControl alloc]init];        // 总页数    _pageControl.numberOfPages = kImageCount;    // 控件尺寸    CGSize size = [_pageControl sizeForNumberOfPages:kImageCount]; // 自动计算自己的大小        _pageControl.bounds = CGRectMake(0, 0, size.width, size.height);        _pageControl.center = CGPointMake(self.view.center.x, 140);        // 设置颜色    _pageControl.pageIndicatorTintColor = [UIColor blackColor]; // 未选择的颜色    _pageControl.currentPageIndicatorTintColor = [UIColor redColor]; // 当前颜色        // 加载当前page;    self.pageControl = _pageControl;        [self.view addSubview:_pageControl];        // 添加监听方法    // 在OC中 绝大多数控件都可以监听UIControlEventValueChanged事件,button除外    [_pageControl addTarget:self action:@selector(pageChanged:) forControlEvents:UIControlEventValueChanged];    }        return _pageControl;}// 分页控件的监听方法- (void)pageChanged:(UIPageControl *)page{       // 根据页数 调整滚动视图中得图片位置 contentOffset    CGFloat x = page.currentPage * self.scrollView.bounds.size.width;    [self.scrollView setContentOffset:CGPointMake(x, 0) animated:YES];    }- (void)viewDidLoad {    [super viewDidLoad];        for (int i = 0; i < kImageCount ; i++) {        NSString *imageName = [NSString stringWithFormat:@"img_%02d",i+1];        UIImage *image = [UIImage imageNamed:imageName];                UIImageView *imageView = [[UIImageView alloc]initWithFrame:self.scrollView.bounds];        imageView.image = image;                [self.scrollView addSubview:imageView];            }       // 计算imageView的位置 (包含动画)    [self.scrollView.subviews enumerateObjectsUsingBlock:^(UIImageView *imageView, NSUInteger idx, BOOL *stop) {               // 调整X =》origin = frame        CGRect frame = imageView.frame;        frame.origin.x = idx * frame.size.width;                imageView.frame = frame;    }];        self.pageControl.currentPage = 0; // 分页初始设置 0    // 启动始终    [self startTimer];    }- (void)startTimer{    self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(updateTimer) userInfo:nil repeats:YES];       // 添加到运行循环 (调试好像没什么用)    [[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];}- (void)updateTimer{    // 页号发生变换    // 当前的页数加1 %总页数  防止溢出    int page = (self.pageControl.currentPage + 1 ) % kImageCount;        self.pageControl.currentPage = page;        [self pageChanged:self.pageControl];        }// 抓住图片的时候 时钟停止- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{    [self.timer invalidate]; // invalidate  停止时钟    NSLog(@"%s",__func__);}// 不抓得时候开始时钟- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{    [self startTimer];    NSLog(@"%s",__func__);}// ScrollView的代理方法// 滚动视图停下来 修改页面控件的小点-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{//    NSLog(@"%@",NSStringFromCGPoint(scrollView.contentOffset)); // 当前停下来的坐标 打印值{300, 0}        int page = (scrollView.contentOffset.x) / scrollView.bounds.size.width;        self.pageControl.currentPage = page; // 设置当前页数}

2.个人感想总结

1.代码中使用了代理这个方法,方法:

// 设置代理 _scrollView.delegate = self;// 遵守代理的协议@interface ViewController () <UIScrollViewDelegate> // 监听代理 滚动视图停下来的时候修改控件的小点位置-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView


2.在 实例化 pageControl 中使用到的函数

[_pageControl sizeForNumberOfPages:kImageCount] 可以根据后面传入的参数自动生成自己的size值。根据scrollView的位置信息确定pageControl的位置。设置监听pageControl的UIControlEventValueChanged值来设置图片的滚动。

3. 对时钟的方法:

[NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(updateTimer) userInfo:nil repeats:YES];

每经过2.0s的时间去执行updateTimer这个函数(修改页码号,更改显示图片),





0 0
原创粉丝点击