ios-day05-04(图片轮播器 UIScrollView的分页、UIPageControl的使用、NSTimer(定时器)的使用)

本文介绍了一个简单的图片轮播器实现方案,通过UIScrollView展示图片并使用UIPageControl指示当前页数,同时通过定时器实现自动轮播效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

源码下载地址:http://download.youkuaiyun.com/detail/liu537192/8441465

效果图:

                                  

核心代码:

//
//  LiuJieViewController.m
//  04-图片轮播器
//
//  Created by Mac on 15-2-11.
//  Copyright (c) 2015年 vxinyou. All rights reserved.
//

#import "LiuJieViewController.h"

@interface LiuJieViewController () 
   
    
/**
 *  UIScrollView:用于显示图片,并且可以轮播图片
 */
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
/**
 *  UIPageControl
 */
@property (weak, nonatomic) IBOutlet UIPageControl *pageControll;
/**
 *  定时器
 */
@property (nonatomic, strong) NSTimer *timer;
@property (nonatomic,assign) int imageCount;

@end

@implementation LiuJieViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    // 为ScrollView设置代理
    self.scrollView.delegate = self;
    
    // 图片的宽高和Y值都是固定的
    CGFloat imageW = self.scrollView.frame.size.width;
    CGFloat imageH = self.scrollView.frame.size.height;
    CGFloat imageY = 0;
    
    self.imageCount = 5;
    // 1,添加图片到ScrollView中
    for (int i = 0; i < self.imageCount; i++) {
        UIImageView *imageView = [[UIImageView alloc] init];
        // 设置图片的frame
        CGFloat imageX = i * imageW;
        imageView.frame = CGRectMake(imageX, imageY, imageW, imageH);
        
        // 设置图片
        NSString *name = [NSString stringWithFormat:@"img_0%d", i + 1];
        imageView.image = [UIImage imageNamed:name];
        
        [self.scrollView addSubview:imageView];
    }
    // 2,设置ScrollView的内容尺寸
    CGFloat contentW = self.imageCount * imageW;
    self.scrollView.contentSize = CGSizeMake(contentW, 0);
    
    // 3,隐藏水平滚动条
    self.scrollView.showsHorizontalScrollIndicator = NO;
    
    // 4,分页
    self.scrollView.pagingEnabled = YES;
    
    // 5,设置pageControll的总页数
    self.pageControll.numberOfPages = self.imageCount;
    
    // 6.添加定时器(每隔2秒调用一次self 的nextImage方法)
    [self addTimer];
}

/**
 *  添加定时器
 */
- (void)addTimer
{
    // scheduledTimerWithTimeInterval:每隔多少秒执行nextImage方法
    // repeats:是否重复
    self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];
    
    // 这个方法的作用是什么呢?
    // 假设在self.view中还有一个UITextView控件,UITextView控件可以拖拽显示多行文本内容,
    // 如果没有下面这句代码,在拖拽UITextView的时候,UIScrollView将不会有任何变化
    // 也就是默认情况下只能执行一个操作,有了下面这句代码,在拖拽UITextView的时候,不会影响到UIScrollView的自动轮播
    [[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}
/**
 *  移除定时器
 */
- (void)removeTimer
{
    [self.timer invalidate];
    self.timer = nil;
}

- (void)nextImage
{
    // 1.增加pageControl的页码
    int page = 0;
    if (self.pageControll.currentPage == self.imageCount - 1) {
        page = 0;
    } else {
        page = self.pageControll.currentPage + 1;
    }
    
    // 2.计算scrollView滚动的位置
    CGFloat offsetX = page * self.scrollView.frame.size.width;
    CGPoint offset = CGPointMake(offsetX, 0);
    [self.scrollView setContentOffset:offset animated:YES];
}

/**
 *  开始拖拽的时候调用
 */
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    // 停止定时器(一旦定时器停止了,就不能再使用),为什么要停止?
    // 如果不停止,我们在手动拖拽图片的时候,计时器一直在计时,当我们松手时,会一次轮播多张图片
    [self removeTimer];
}

/**
 *  停止拖拽的时候调用
 */
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    // 开启定时器
    [self addTimer];
}

/**
 *  当scrollView正在滚动就会调用
 */
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // 根据scrollView的滚动位置决定pageControl显示第几页
    CGFloat scrollW = scrollView.frame.size.width;
    int page = (scrollView.contentOffset.x + scrollW * 0.5) / scrollW;
    self.pageControll.currentPage = page;
}
@end

   

本Demo使用UICollectionView实现自动无限轮播功能。 主要功能: 1.实现自动轮播,可修改轮播的时间 2.轮播图片可以来自本地,也可来自网络,通过单独的方法进行设置即可。对于加载网络图片时,Demo中使用了YYWebImage,也可自行替换成SDWebImage。 3.重写了和系统UIPageControl一样的功能,可用图片代替PageControl上的点点,也可自定义其颜色以及切换动画。 使用方法:使用方法比较简单。 /** * 加载本地图片Banner */ - (void)setupLocalBannerImageView { NSArray *array = @[@"1.png", @"2.png", @"3.png", @"4.png", @"5.png"]; FFBannerView *bannerVew = [FFBannerView bannerViewWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 200) locationImageArray:array]; bannerVew.timeInterval = 2.0; [self.view addSubview:bannerVew]; } /** * 加载网络图片Banner */ - (void)setupNetWorkBannerImageView { NSArray *array = @[@"http://i3.download.fd.pchome.net/t_960x600/g1/M00/07/09/oYYBAFMv8q2IQHunACi90oB0OHIAABbUQAAXO4AKL3q706.jpg", @"http://images.weiphone.net/attachments/photo/Day_120308/118871_91f6133116504086ed1b82e0eb951.jpg", @"http://benyouhuifile.it168.com/forum/macos/attachments/month_1104/110425215921926a173e0f728e.jpg", @"http://benyouhuifile.it168.com/forum/macos/attachments/month_1104/1104241737046031b3a754f783.jpg"]; FFBannerView *bannerVew = [FFBannerView bannerViewWithFrame:CGRectMake(0, 250, [UIScreen mainScreen].bounds.size.width, 200) netWorkImageArray:array placeHolderImage:nil]; bannerVew.timeInterval = 2.0; bannerVew.pageControlStyle = FFPageControlStyleMiddle; bannerVew.delegate = self; [self.view addSubview:bannerVew]; } 以上方式即可简单使用,如需自定义PageControl也可继承FFAbstractDotView,做些基本的设置即可。 gitHub下载地址:喜欢的朋友请给个星呗! 欢迎各位一起来讨论,有问题请发邮箱270452746@qq.com或者直接加我QQ:270452746进行讨论。谢谢!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值