美文网首页
iOS轮播图的实现

iOS轮播图的实现

作者: MangoJ | 来源:发表于2016-08-16 17:11 被阅读246次
    首先要封装一个类,有了这个类,只要把类拖拽到你的工程,妈妈就再也不用担心你不会做轮播图了!(此文与之前发布的文章一致,仅改变了文本格式)

    创建这个类如下:
    类名:MGJScrollView 继承UIView

    // MGJScrollView.h

    @interface MGJScrollView : UIView
    -(void)setImageByIndex(long)
    currentIndex;
    - (void)refreshImage;//刷新图片
    @end
    
    
    
    //
    

    // MGJScrollView.m

    #import "MGJScrollView.h"
    
    #define imageX  0
    
    #define imageY  0
    
    #define imageW  self.frame.size.width
    
    #define imageH  self.frame.size.height
    
    #define kImageCount self.imageArray.count
    
    #define kTimeChange 3.0f
    
    @interface MGJScrollView ()
    
    @property (nonatomic, strong) UIScrollView *scrollView;//滚动视图控件
    
    @property (nonatomic, strong) UIPageControl *pageControl;//页码指示视图控件
    
    @property (nonatomic, strong) NSTimer *timer;//定时器
    
    @property (nonatomic, strong) UIImageView *leftImageView;//显示左边图片的控件
    
    @property (nonatomic, strong) UIImageView *centerImageView;//显示中间图片的控件
    
    @property (nonatomic, strong) UIImageView *rightImageView;//显示右边图片的控件
    
    @property (nonatomic, strong) NSArray *imageArray;//保存图片的数组
    
    @property (nonatomic, assign) long currentIndex;//图片当前的下标索引
    
    @property (nonatomic, assign) BOOL isTimeUp;
    
    @end
    
    
    
    @implementation MGJScrollView
    
    
    
    - (id)initWithFrame:(CGRect)frame
    
    {
    
       if ([super initWithFrame:frame])
    
     {
    
       self.currentIndex = 0;
    
       [self layoutScrollView];
    
       [self layoutImages];
    
       [self layoutPageControl];
    
       [self layoutImageView];
    
       [self setImageByIndex:self.currentIndex];
    
       }
    
     return self;
    
    }
    
    
    
    //自定义ScrollView
    
    - (void)layoutScrollView
    
    {
    
     self.scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(imageX, imageY,imageW , imageH)];
    
     self.scrollView.contentOffset = CGPointMake(imageW, 0);
    
     self.scrollView.contentSize = CGSizeMake(imageW * 3, 0);
    
     //[self.scrollView setContentOffset:CGPointMake(imageW, 0) animated:NO];
    
     self.scrollView.pagingEnabled = YES;
    
     self.scrollView.delegate = self;
    
     self.scrollView.bounces= NO;
    
     self.scrollView.showsHorizontalScrollIndicator = NO;
    
     [self addSubview:self.scrollView];
    
    
    
    }
     //图片数组
    - (void)layoutImages
    
    {
    
     self.imageArray = @[@"h0.jpg",@"h1.jpg",@"h2.jpg",@"h3.jpg",@"h4.jpg",@"h5.jpg",@"h6.jpg",@"h7.jpg"];
    
    }
    
    
    
    //自定义添加PageControl
    
    - (void)layoutPageControl
    
    {
    
     self.pageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(imageX, imageY, imageW, 30)];
    
     self.pageControl.center = CGPointMake(imageW / 2, imageH / 10 * 9);
    
     self.pageControl.currentPageIndicatorTintColor = [UIColor purpleColor];//当前点的颜色
    
     self.pageControl.pageIndicatorTintColor = [UIColor whiteColor];//其他点的颜色
    
     self.pageControl.enabled = NO;
    
     self.pageControl.numberOfPages = kImageCount;//page数
    
     [self addSubview:self.pageControl];
    
    }
    
    
    
    //自定义添加ImageView
    
    - (void)layoutImageView
    
    {
    
    self.leftImageView = [[UIImageView   alloc]initWithFrame:CGRectMake(imageX, imageY, imageW, imageH)];
    
    [self.scrollView addSubview:self.leftImageView];
    
    
    
    self.centerImageView = [[UIImageView alloc]initWithFrame:CGRectMake(imageW, imageY, imageW, imageH)];
    
    [self.scrollView addSubview:self.centerImageView];
    
    
    
    self.rightImageView = [[UIImageView alloc]initWithFrame:CGRectMake(imageW *2, imageY, imageW, imageH)];
    
    [self.scrollView addSubview:self.rightImageView];
    
    
    
    self.timer = [NSTimer scheduledTimerWithTimeInterval:kTimeChange target:self selector:@selector(timerAction) userInfo:nil repeats:YES];
    
    
    
    _isTimeUp = NO;
    
    }
    
    
    
    //刷新图片
    
    - (void)refreshImage
    
    {
    
     if (self.scrollView.contentOffset.x > imageW)
    
       {
    
       self.currentIndex = ((self.currentIndex + 1) % kImageCount);
    
     }else if(self.scrollView.contentOffset.x < imageW)
    
     {
    
       self.currentIndex = ((self.currentIndex - 1 + kImageCount) % kImageCount);
    
     }
    
     [self setImageByIndex:self.currentIndex];
    
    }
    
    
    
    //根据传回的下标设置三个ImageView的图片
    
    - (void)setImageByIndex:(long)currentIndex
    
    {
    
       NSString *curruntImageName = [NSString stringWithFormat:@"h%ld.jpg",currentIndex];
    
       //NSLog(@"———————————%ld",currentIndex);
    
       self.centerImageView.image = [UIImage imageNamed:curruntImageName];
    
       NSLog(@"当前页的名字是:%@",curruntImageName);
    
    
    
    self.leftImageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"h%ld.jpg",((self.currentIndex - 1 + kImageCount) % kImageCount)]];
    
    NSLog(@"左边的图片名字是:%@",[NSString stringWithFormat:@"%ld.jpg",
    
    ((self.currentIndex - 1 + kImageCount)% self.kImageCount)]);
    
    
    
    self.rightImageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"h%ld.jpg",((self.currentIndex + 1) % kImageCount)]];
    
    NSLog(@"右边的图片名字是:%@",[NSString stringWithFormat:@"%ld.jpg",((self.currentIndex + 1) % kImageCount)]);
    
    
    
    self.pageControl.currentPage = currentIndex;
    
    }
    
    
    
    - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
    
    {
    
       [self refreshImage];
    
       self.scrollView.contentOffset = CGPointMake(imageW, 0);
    
       self.pageControl.currentPage = self.currentIndex ;
    
       NSLog(@"停止了加速,停在第%ld页",self.pageControl.currentPage+1);
    
    
    
       //手动控制图片滚动应该取消那个三秒的计时器
    
       if (!_isTimeUp)
    
       {
    
       [_timer setFireDate:[NSDate dateWithTimeIntervalSinceNow:kTimeChange]];
    
       }
    
       _isTimeUp = NO;
    
    }
    
    
    
    //计时器到时,系统滚动图片
    
    - (void)timerAction
    
    {
    
       [self.scrollView setContentOffset:CGPointMake(imageW * 2, 0) animated:YES];
    
       _isTimeUp = YES;
    
       [NSTimer scheduledTimerWithTimeInterval:0.4f target:self selector:@selector(scrollViewDidEndDecelerating:) userInfo:nil repeats:NO];
    
    }
    @end
    
    在视图控制器内直接调用上面创建好的类方法即可实现轮播图效果

    调用方法如下:

    // MGJViewController.h

    @interface MGJViewController : UIViewController
    
    @end
    

    //
    // MGJViewController.m

    #import "MGJViewController.h"
    
    #import "MGJScrollView.h"
    
    @interface MGJViewController ()
    
    @end
    
    @implementation MGJViewController
    
    - (void)viewDidLoad {
    
       [super viewDidLoad];
    
       MGJScrollView *scrollView = [[MGJScrollView alloc]initWithFrame:CGRectMake(0, 100,[UIScreen mainScreen].bounds.size.width, 200)];
    
       [self.view addSubview:scrollView];
    
    }
    
    - (void)didReceiveMemoryWarning {
    
       [super didReceiveMemoryWarning];
    
    }
    
    @end
    

    相关文章

      网友评论

          本文标题:iOS轮播图的实现

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