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

目的:创建一个图片轮播器,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这个函数(修改页码号,更改显示图片),





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值