关闭

iOS UIScrollView 实现轮播图

标签: uiscrollviewimageviewios动画
2918人阅读 评论(0) 收藏 举报
分类:

利用UIScrollView实现轮播图 , 需要三个ImageView轮流切换,具体原理就不讲解了.




具体实现代码如下:


<span style="font-size:24px;">//
//  ViewController.m
//  PhotosShowDemo
//
//  Created by 帝炎魔 on 16/5/29.
//  Copyright © 2016年 帝炎魔. All rights reserved.
//

#import "ViewController.h"

#define kWidth [UIScreen mainScreen].bounds.size.width
#define kHeitht [UIScreen mainScreen].bounds.size.height

#define kRedColor [UIColor redColor]
#define kWhitColor [UIColor yellowColor]
#define kBlueColor [UIColor blueColor]
#define kGreenColor [UIColor greenColor]
#define kBrownColor [UIColor brownColor]



@interface ViewController () <UIScrollViewDelegate>


@property (nonatomic, strong) UIScrollView *scrollView;

@property (nonatomic, strong) UIPageControl *pageControl;

@property (nonatomic, strong) UIView *leftView;

@property (nonatomic, strong) UIView *currentView;

@property (nonatomic, strong) UIView *rightView;

@property (nonatomic, assign) int viewCount;

@property (nonatomic, assign) int currentViewIndex;

@property (nonatomic, copy) NSArray *viewColorArray;

@property (nonatomic, copy) NSTimer *timer;

@property (nonatomic, assign) BOOL isScroll;



@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.viewColorArray = @[kRedColor, kBlueColor, kBrownColor, kWhitColor, kGreenColor ];
    
    
    
    // 添加scrollView
    [self.view addSubview:self.scrollView];
    [self.view addSubview:self.pageControl];
    
    [self loadImageView];
    
    // 创建定时器 实现轮播
    [self zidong];
    // Do any additional setup after loading the view, typically from a nib.

}

// 开启定时器
- (void)zidong
{
    _timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(nextPage) userInfo:NULL repeats:YES];
}

// 定时器的方法
-(void)nextPage
{
    _isScroll = YES;
    int rightCout;

    [_scrollView setContentOffset:CGPointMake(kWidth * 2, 0)animated:YES];
   
    
    _currentViewIndex = (_currentViewIndex + 1) % 5;
    _currentView.backgroundColor = _viewColorArray[_currentViewIndex];
   
    rightCout = (_currentViewIndex + 1) % 5;
    
    
    _rightView.backgroundColor = _viewColorArray[rightCout];
   
    _pageControl.currentPage = _currentViewIndex;
    [_scrollView setContentOffset:CGPointMake(kWidth, 0) animated:NO];

    
    


}

// 添加滑动视图
- (UIScrollView *)scrollView
{
    if (!_scrollView) {
        _scrollView = [[UIScrollView alloc] init];
        
        _scrollView.frame = CGRectMake(0, 0, kWidth, kHeitht);
        
        _scrollView.contentSize = CGSizeMake(kWidth * 3, kHeitht);
        _scrollView.pagingEnabled = YES;
        
        _scrollView.delegate = self;
       [_scrollView setContentOffset:CGPointMake(kWidth, 0)];
        _scrollView.showsVerticalScrollIndicator = NO;
        _scrollView.showsHorizontalScrollIndicator = NO;
    }
    return _scrollView;
}

// 添加按钮
-(UIPageControl *)pageControl
{
    if (!_pageControl) {
        _pageControl = [[UIPageControl alloc] init];
        _pageControl.frame = CGRectMake(0, kHeitht - 100, kWidth, 30);
        _pageControl.currentPage = _currentViewIndex;
        _pageControl.numberOfPages = 5;
        _pageControl.pageIndicatorTintColor = kBlueColor;
        _pageControl.currentPageIndicatorTintColor = kWhitColor;
    }
    return _pageControl;
}

// 加载图片
- (void)loadImageView
{
    _leftView = [[UIView alloc] init];
    _leftView.backgroundColor = _viewColorArray[4];
    _leftView.frame = CGRectMake(0, 0, kWidth, kHeitht);
    [_scrollView addSubview:_leftView];
    
    _currentView = [[UIView alloc] initWithFrame:CGRectMake(kWidth, 0, kWidth, kHeitht)];
    _currentView.backgroundColor = _viewColorArray[0];
    [_scrollView addSubview:_currentView];
    

    _rightView = [[UIView alloc] initWithFrame:CGRectMake(2 * kWidth, 0, kWidth, kHeitht)];
    _rightView.backgroundColor = _viewColorArray[1];
    [_scrollView addSubview:_rightView];
    
    _currentViewIndex = 0;
    
}


#pragma mark ---- 滚动将要停止的时候
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    // 滚动视图停止减速
    // contentOffset 偏移量
    // 开启定时器
    if (_isScroll == NO) {
        [self zidong];
        _isScroll = YES;
    }
    
    
    [self loadData];
    
    _pageControl.currentPage = _currentViewIndex;
    [_scrollView setContentOffset:CGPointMake(kWidth, 0)];
    
    
    // UIControl 响应的控件 的父类
   //  UIControl
    
    
}

-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    // 移除定时器
    
     [self.timer invalidate];
    if (_isScroll == YES) {
         scrollView.contentOffset = CGPointMake(kWidth, 0);
        _currentView.backgroundColor = _viewColorArray[_currentViewIndex];
    }
    _isScroll = NO;
   
    // _currentView = _viewColorArray[_currentViewIndex];
}



- (void)loadData
{
    if (_scrollView.contentOffset.x > kWidth) {
        NSLog(@"右滑动");
        _currentViewIndex = (_currentViewIndex + 1) % 5;
        
    } else if (_scrollView.contentOffset.x < kWidth) {
        NSLog(@"左滑动");
        _currentViewIndex = (_currentViewIndex + 4 ) % 5;
    }
    _currentView.backgroundColor = _viewColorArray[_currentViewIndex];
    _leftView.backgroundColor = _viewColorArray[(_currentViewIndex + 4) % 5];
    _rightView.backgroundColor = _viewColorArray[(_currentViewIndex + 1) % 5];
    
}

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

@end
</span>


0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

UIScrollView实现图片轮播器的无限滚动

简介在现在的一些App中常常见到图片轮播器,一般用于展示广告、新闻等数据,在iOS内并没有现成的控件直接实现这种功能,但是通过UIScrollView的允许分页设置,可以实现滚动轮播的功能。轮播原理U...
  • xyt8023y
  • xyt8023y
  • 2015-11-30 18:00
  • 3375

iOS 利用UISCrollView作广告自动轮播效果

NSTimer 使用的好处就是当你在滑动如tableview界面是它任然可以实时轮播, 但是如果是开启一个后台线程让它轮播时,活动如tableview时,它就会暂停轮播 在日常开发中,我们...
  • yishengzhiai005
  • yishengzhiai005
  • 2016-03-09 15:49
  • 1789

scrollView ——自动轮播并且设置图片底部小圆点

设置图片的自动轮播效果和对pageControl的最浅显使用
  • xuanai_xue123
  • xuanai_xue123
  • 2016-08-13 16:24
  • 2116

【学习ios之路:UI系列】实现轮播图效果(UIImageView,UIScrollView,UIPageControl,NSTimer相结合)

实现效果,在不点击的情况下,自定滚动,点击时,停止.如下图 部分代码如下: //调用NSTimer方法,自定计时 - (void)autoScroll { self.timer = [NS...
  • ZFX5130
  • ZFX5130
  • 2015-01-29 21:15
  • 1465

iOS UIScrollView实现图片轮播器注意点

UIScrollView实现图片轮播器注意点 具体代码如下: // ViewController.m// AZScrollViewTest//// Created by azhang on ...
  • azhang_coder
  • azhang_coder
  • 2016-11-20 19:35
  • 740

iOS开发UI基础—29UIScrollView控件实现图片轮播

iOS开发UI篇—UIScrollView控件实现图片轮播 一、实现效果 实现图片的自动轮播            二、实现代码 storyboard中布局 代码: ...
  • gaojq_ios
  • gaojq_ios
  • 2015-06-03 13:48
  • 336

iOS开发UI篇—UIScrollView控件实现图片轮播

一、实现效果 实现图片的自动轮播            二、实现代码 storyboard中布局 代码: 1 #import "YYViewController.h" ...
  • a454431208
  • a454431208
  • 2015-09-29 12:28
  • 200

iOS开发UI篇—UIScrollView控件实现图片轮播

一、实现效果 实现图片的自动轮播            二、实现代码 storyboard中布局 代码: 1 #import "YYViewController.h" ...
  • tik11
  • tik11
  • 2015-03-11 11:33
  • 258

ios图片轮播 (基础篇——UIScrollView实现方式)

人生不发返程的车票,一旦出发了,决不能返回。         人生只有一次,无悔的人生才是成功的人生,不要期待与奢望 “下一次” 如何。       &...
  • zl18603543572
  • zl18603543572
  • 2016-11-01 01:01
  • 731

IOS开发实现 UIScrollView 的循环轮播功能

这个控件类主要是实现 UIScrollView 的图片循环播放。主要的实现思路是首先在 UIScrollView 内添加三张视图 view,然后根据滑动和切换的需要更换这三张视图 view 上面的图片...
  • He_jiabin
  • He_jiabin
  • 2015-01-08 20:50
  • 1334
    个人资料
    • 访问:139564次
    • 积分:2026
    • 等级:
    • 排名:千里之外
    • 原创:65篇
    • 转载:15篇
    • 译文:0篇
    • 评论:24条
    博客专栏
    微信思密达
    最新评论