美文网首页UI基础UIScrollView
图片自动播放(UIScrollView+UIPageContro

图片自动播放(UIScrollView+UIPageContro

作者: 952625a28d0d | 来源:发表于2016-03-16 18:25 被阅读89次
  • 创建UIScrollView UIPageControl
  • 添加定时器
  • 手动滑动与自动滑动的互相转换(UIScrollViewDelegate)
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #d12f1b}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; min-height: 21.0px}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #008400}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #78492a}p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo}p.p6 {margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #703daa}p.p7 {margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #bb2ca2}p.p8 {margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #3d1d81}p.p9 {margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #31595d}p.p10 {margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #4f8187}p.p11 {margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px 'Heiti SC Light'; color: #78492a}p.p12 {margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px 'Heiti SC Light'; color: #008400}span.s1 {font-variant-ligatures: no-common-ligatures; color: #78492a}span.s2 {font-variant-ligatures: no-common-ligatures}span.s3 {font: 18.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures}span.s4 {font-variant-ligatures: no-common-ligatures; color: #703daa}span.s5 {font-variant-ligatures: no-common-ligatures; color: #272ad8}span.s6 {font-variant-ligatures: no-common-ligatures; color: #bb2ca2}span.s7 {font-variant-ligatures: no-common-ligatures; color: #000000}span.s8 {font-variant-ligatures: no-common-ligatures; color: #4f8187}span.s9 {font-variant-ligatures: no-common-ligatures; color: #31595d}span.s10 {font-variant-ligatures: no-common-ligatures; color: #3d1d81}span.s11 {font-variant-ligatures: no-common-ligatures; color: #d12f1b}span.s12 {font: 18.0px Menlo; font-variant-ligatures: no-common-ligatures}span.s13 {font: 18.0px 'Heiti SC Light'; font-variant-ligatures: no-common-ligatures; color: #d12f1b}span.s14 {font: 18.0px Menlo; font-variant-ligatures: no-common-ligatures; color: #000000}

#import "ViewController.h"

// 宏定义
#define screenWidth [UIScreen mainScreen].bounds.size.width
#define screenHeight [UIScreen mainScreen].bounds.size.height

// 数量 隔离状态栏 pageControl宽度
CGFloat ImageCount = 10;
CGFloat scrollY = 20;
CGFloat pageControlWidth = 200;

@interface ViewController ()<UIScrollViewDelegate>

@property(nonatomic, strong) UIScrollView * scrollView;
@property(nonatomic, strong) UIPageControl * pageControl;

@property (nonatomic, strong) NSTimer *timer;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    // 初始化ScrollView PageControl NSTimer
    [self initScrollView];
    
    [self initPageControl];
    
    [self addTimer];
}

#pragma mark - 创建UIScrollView
- (void)initScrollView{
    self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, scrollY, screenWidth, screenHeight - scrollY)];
    self.scrollView.delegate = self;
    for (int i = 0; i < ImageCount; i++) {
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(screenWidth * i, scrollY, screenWidth, screenHeight - scrollY)];
        imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"huoying%d.jpg",i+1]];
        if (i == 7) {
            imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"huoying8.png"]];
        }
        [self.scrollView addSubview:imageView];
    }
    
    self.scrollView.contentSize = CGSizeMake(screenWidth * ImageCount, screenHeight - 20);
    self.scrollView.pagingEnabled = YES;
    [self.view addSubview:self.scrollView];
}

#pragma mark - 创建UIPageControl
- (void)initPageControl{
    self.pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake((screenWidth - pageControlWidth)/2, screenHeight - scrollY, pageControlWidth, scrollY)];
    self.pageControl.numberOfPages = ImageCount;
    self.pageControl.pageIndicatorTintColor = [UIColor greenColor];
    self.pageControl.currentPageIndicatorTintColor = [UIColor yellowColor];
    
#warning 注意 这里 一定要插到最上面的视图上面才能够显示
    [self.view insertSubview:self.pageControl aboveSubview:self.scrollView];
}

- (void)addTimer{
    self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
#warning 加入Runloop 消息机制  只有把NSTimer加入Runloop才能被调用
    [[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}

#pragma mark - NNSTimer调用的方法 获取当前页码 +1 如果等于图片总数量 回归0 设置偏移量
- (void)nextPage{
    NSInteger page = self.pageControl.currentPage;
    page++;
    if (page == ImageCount) {
        page = 0;
    }
    NSLog(@"page为%ld",(long)page);
    CGPoint point = CGPointMake(screenWidth * page, 0);
    [self.scrollView setContentOffset:point animated:YES];
}

#pragma mark - UIScrollView Delegate 结束滚动获取偏移量计算出页码 赋值给PageControl
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    NSInteger page = scrollView.contentOffset.x/screenWidth;
    self.pageControl.currentPage = page;
}

#pragma mark - 视图将要拖动的时候,处理手动拖动与自动滚动的冲突
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    // 关掉定时器
    [self removeTimer];
    NSLog(@"brginDragging");
}

// 停止拖拽 重新开始定时器
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    // 采用GCD的方式 在视图停止拖拽后的2秒之后 重新添加定时器
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [self addTimer];
    });
    NSLog(@"endDragging");
}

#pragma mark - 移除定时器
- (void)removeTimer{
    [self.timer invalidate];
    self.timer = nil;
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end```


###效果

![picture.gif](http:https://img.haomeiwen.com/i189984/83c61df7a717c9f2.gif?imageMogr2/auto-orient/strip)

相关文章

  • 图片自动播放(UIScrollView+UIPageContro

    创建UIScrollView UIPageControl 添加定时器 手动滑动与自动滑动的互相转换(UIScrol...

  • 会发出声音的商标?

    请您接收以下图片!会自动播放声音哦! 看见这些图片,脑海中就会“自动播放”与之相符的声音。然而,你知道吗?这些声音...

  • video 属性

    autoplay 自动播放 controls 播放控制按钮 poster 视频没有播放等待的图片...

  • JQ实现左右轮播效果

    这篇文章主要是实现图片左右轮播效果,功能:进入页面自动播放图片,鼠标悬浮,暂停图片轮播,鼠标离开,继续图片轮播,点...

  • 第二周第一天图片自动变化

    图片自动变化 图片自动播放 先往工程里拖几张照片 1,通过名字加载图片,图片内容加载到内存。下次加载不需要去资源包...

  • 微信小程序之图片轮播

    业务需求:图片轮番播放,可以左右滑动,点击指示点可以切换图片 这里使用小程序提供的 组件autoplay:自动播放...

  • 用原生js生成轮播图

    轮播图有几大要点,点击左右的尖角号,可以进行图片的切换,点击圆点,可以获取圆点对应的图片,可以自动播放图片,鼠标悬...

  • 无缝轮播的实现思路

    先从普通轮播说起(自动播放功能后面实现) 最简单的点击按钮切换图片很简单 给按钮添加click事件监听,改变图片的...

  • 仙剑轮播

    一、轮播介绍: 该仙剑轮播能够通过动画自动播放图片,当鼠标悬停在图片上时停止播放。当鼠标单机左、右的按钮时可以向前...

  • autoplay自动播放策略

    autoplay自动播放策略 chrome66以及更高的版本不允许媒体自动播放。 safari 阻止自动播放视频。...

网友评论

    本文标题:图片自动播放(UIScrollView+UIPageContro

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