美文网首页
UIScrollView - 图片轮播器(完整代码)

UIScrollView - 图片轮播器(完整代码)

作者: js_huh | 来源:发表于2017-08-28 22:36 被阅读70次

效果图

UIScrollView - 图片轮播.gif
#import "ViewController.h"

@interface ViewController ()<UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView; 
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;//分页指示器
@property (assign, nonatomic) int pageNo; //分页码 scrollOffset
@property(nonatomic) int  pageSum;// 总页数
@property (assign, nonatomic) CGFloat scrollMaxX; //scrollView最大x轴宽度
@property (assign, nonatomic) CGFloat scrollVisibleW;//scrollView可视区宽度
@property (assign, nonatomic) CGPoint scrollOffset;//scrollView的偏移量
@property (strong, nonatomic) NSTimer * timerImgScroll;//图片轮播定时器
@end


@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    UIImage *imageTemp;
    UIImageView *imgViewText;
    
    self.pageSum = 5;// 总页数
    CGFloat imgViewY = 0;
    CGFloat imgViewW = 375;
    CGFloat imgViewH = 260;
    
    for (int i=0; i<5; i++) {
        NSString *imgName = [NSString stringWithFormat:@"img_%02d",i+1];
        imageTemp = [UIImage imageNamed:imgName];
        imgViewText = [[UIImageView alloc]initWithImage:imageTemp];
        imgViewText.frame = CGRectMake(i*imgViewW, imgViewY, imgViewW, imgViewH);
        [self.scrollView addSubview:imgViewText];
    }
    //CGFloat imgViewMaxX = CGRectGetMaxX(imgViewText.frame);
    self.scrollMaxX = CGRectGetMaxX(imgViewText.frame);

    //告诉scrollView内容有多大
    self.scrollView.contentSize = CGSizeMake(self.scrollMaxX, 0);
    //不显示水平方向的滚动条
    self.scrollView.showsHorizontalScrollIndicator = NO;
    
    /*
     启用分页控件
        scrollView是以多少宽度,进行分页得?
        答:以scrollView自身的宽度为一页,进行分页得!
     */
    self.scrollView.pagingEnabled = YES;
    
    /*
     PageControl
     Tint Color (其它颜色) Current Color(现在颜色)
     numberOfPages (总共多少页) currentPage(现在是第几页)
     */
    self.pageControl.numberOfPages = self.pageSum;
    
    
    //设置代理对象
    self.scrollView.delegate = self;
    //设置scrollView可视区域的宽度
    CGSize imgViewSize = self.scrollView.frame.size;
    self.scrollVisibleW = imgViewSize.width;

    /*
     第一种方法
     NSTimeInterval 每隔多少时间
     target:  调用一次X的
     selector: XX方法
     userInfo: 发送XX消息
     repeats: 是否重复
     */
    self.timerImgScroll = [NSTimer scheduledTimerWithTimeInterval: 2.0 target:self selector: @selector(autoImgScoll) userInfo:nil repeats:YES];
    //获取当前运行的线程,将’计时器’添加到当前线程,调整当前线程的优先等级
    NSRunLoop *currentLoop = [NSRunLoop currentRunLoop];
    [currentLoop addTimer:self.timerImgScroll forMode:NSRunLoopCommonModes];
}

//自动实现轮播
-(void)autoImgScoll{
    self.pageNo ++;
    if(self.pageNo >= self.pageSum){
        self.pageNo = 0;
    }
    CGFloat  offsetScroll = (CGFloat)self.pageNo * self.scrollVisibleW;
    self.scrollView.contentOffset = CGPointMake(offsetScroll, 0);
}

/*
 开始拖动,(计时器销毁)
 */
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    NSLog(@"计时器销毁...");
    [self.timerImgScroll invalidate];
}

/*
 结束拖动
 */
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    NSLog(@"开启timerBlock计时器...");
    /*
     第二种,使用block方式
     当前的页数*scrollView可视宽度 = 需要移动的偏移量
     timer - block:满足block里面的条件,方执行timer! 不满足则不执行timer
     */
    self.timerImgScroll = [NSTimer scheduledTimerWithTimeInterval:2.0 repeats:YES block:^(NSTimer * _Nonnull timer) {
        self.pageNo++;
        if (self.pageNo >= self.pageSum) {
            self.pageNo = 0;
        }
        CGFloat  offsetScroll = (CGFloat)self.pageNo * self.scrollVisibleW;
        self.scrollView.contentOffset = CGPointMake(offsetScroll, 0);
    }];
    
    //获取当前运行的线程,将’计时器’添加到当前线程,调整当前线程的优先等级
    NSRunLoop *currentLoop = [NSRunLoop currentRunLoop];
    [currentLoop addTimer:self.timerImgScroll forMode:NSRunLoopCommonModes];
}

/*
 监听滚动事件
 通过偏移量,来计算出滚动到某个宽度,则PageControl跳转到下一个
    计算公式: (滚动的偏移量 + 每页宽度*0.5)/每页的宽度 = 第几页
    计算公式: 滚动的偏移量/每页的宽度 + 0.5 = 第几页
 */
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    
    NSLog(@"%@",NSStringFromCGPoint(self.scrollView.contentOffset));
    //获取滚动时的偏移量
    self.scrollOffset = self.scrollView.contentOffset;
    
    //self.pageNo = scrollOffset.x/self.scrollVisibleW;
    
    //最初方法没有*0.5,这样如果将图片滚动到中间位置,pageControl不会改变为下一页(就是那个点,不会改变)!
    //self.pageNo = self.scrollOffset.x /self.scrollVisibleW;
    self.pageNo = (self.scrollOffset.x + self.scrollVisibleW *0.5)/self.scrollVisibleW;
    self.pageControl.currentPage = self.pageNo;
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
}
@end

相关文章

网友评论

      本文标题:UIScrollView - 图片轮播器(完整代码)

      本文链接:https://www.haomeiwen.com/subject/bkrjdxtx.html