首页 > 代码库 > UIScrollView实现图片轮播

UIScrollView实现图片轮播

2024-08-08 18:36:48   220人阅读

UIScrollView实现图片轮播

- (UIScrollView*)scrollView
{
   

{
    if (_scrollView== nil) {
        _scrollView = [[UIScrollViewalloc]initWithFrame:CGRectMake(10,20,300,130)];
        _scrollView.backgroundColor= [UIColorredColor];
       
        [self.viewaddSubview:_scrollView];
       
        // 取消弹簧效果
        _scrollView.bounces= NO;
       
        // 取消水平滚动条
        _scrollView.showsHorizontalScrollIndicator= NO;
        _scrollView.showsVerticalScrollIndicator= NO;
       
        // 要分页
        _scrollView.pagingEnabled= YES;
       
        // contentSize
        _scrollView.contentSize= CGSizeMake(kImageCount* _scrollView.bounds.size.width,0);
       
        // 设置代理
        _scrollView.delegate= self;
    }
    return _scrollView;
}

- (UIPageControl*)pageControl
{
    if (_pageControl== nil) {
        // 分页控件，本质上和scrollView没有任何关系，是两个独立的控件
        _pageControl = [[UIPageControlalloc]init];
        // 总页数
        _pageControl.numberOfPages= kImageCount;
        // 控件尺寸
        CGSize size = [_pageControlsizeForNumberOfPages:kImageCount];
       
        _pageControl.bounds= CGRectMake(0,0, size.width, size.height);
        _pageControl.center= CGPointMake(self.view.center.x,130);
       
        // 设置颜色
        _pageControl.pageIndicatorTintColor= [UIColorredColor];
        _pageControl.currentPageIndicatorTintColor= [UIColorblackColor];
       
        [self.viewaddSubview:_pageControl];
       
        // 添加监听方法
        /** 在OC中，绝大多数"控件"，都可以监听UIControlEventValueChanged事件，button除外" */
        [_pageControladdTarget:selfaction:@selector(pageChanged:)forControlEvents:UIControlEventValueChanged];
    }
    return _pageControl;
}

//分页控件的监听方法
- (void)pageChanged:(UIPageControl*)page
{
    NSLog(@"%d", page.currentPage);
   
    // 根据页数，调整滚动视图中的图片位置 contentOffset
    CGFloat x = page.currentPage* self.scrollView.bounds.size.width;
    [self.scrollViewsetContentOffset:CGPointMake(x,0)animated:YES];
}

//视图加载完成调用，通常用来设置数据
- (void)viewDidLoad
{
    [superviewDidLoad];

    // 设置图片
    for (inti = 0; i < kImageCount; i++) {
        NSString *imageName = [NSStringstringWithFormat:@"img_%02d", i + 1];
        UIImage *image = [UIImageimageNamed:imageName];
       
        UIImageView *imageView = [[UIImageViewalloc]initWithFrame:self.scrollView.bounds];
        imageView.image= image;
       
        [self.scrollViewaddSubview:imageView];
    }
   
    // 计算imageView的位置
    [self.scrollView.subviewsenumerateObjectsUsingBlock:^(UIImageView*imageView, NSUInteger idx,BOOL *stop) {
       
        // 调整x => origin => frame
        CGRect frame = imageView.frame;
        frame.origin.x= idx * frame.size.width;
       
        imageView.frame= frame;
    }];
   
    // 分页初始页数为0
    self.pageControl.currentPage= 0;
   
    // 启动时钟
    [selfstartTimer];
}

- (void)startTimer
{
    self.timer= [NSTimertimerWithTimeInterval:2.0target:selfselector:@selector(updateTimer)userInfo:nilrepeats:YES];
    // 添加到运行循环
    [[NSRunLoopcurrentRunLoop]addTimer:self.timerforMode:NSRunLoopCommonModes];
}

- (void)updateTimer
{
    // 页号发生变化
    // (当前的页数+ 1) %总页数
    int page = (self.pageControl.currentPage+ 1) % kImageCount;
    self.pageControl.currentPage= page;
   
    NSLog(@"%d",self.pageControl.currentPage);
    // 调用监听方法，让滚动视图滚动
    [selfpageChanged:self.pageControl];
}

#pragma mark - ScrollView的代理方法
//滚动视图停下来，修改页面控件的小点（页数）
- (void)scrollViewDidEndDecelerating:(UIScrollView*)scrollView
{
    // 停下来的当前页数
    NSLog(@"%@",NSStringFromCGPoint(scrollView.contentOffset));
   
    // 计算页数
    int page = scrollView.contentOffset.x/ scrollView.bounds.size.width;
   
    self.pageControl.currentPage= page;
}

/**
 修改时钟所在的运行循环的模式后，抓不住图片
 
 解决方法：抓住图片时，停止时钟，送售后，开启时钟
 */
- (void)scrollViewWillBeginDragging:(UIScrollView*)scrollView
{
    NSLog(@"%s", __func__);
    // 停止时钟，停止之后就不能再使用，如果要启用时钟，需要重新实例化
    [self.timerinvalidate];
}

- (void)scrollViewDidEndDragging:(UIScrollView*)scrollView willDecelerate:(BOOL)decelerate
{
    NSLog(@"%s", __func__);
    [selfstartTimer];
}

UIScrollView实现图片轮播


联系
我们