iOS轮播图的实现

96
MangoJ
2015.11.27 00:04* 字数 881

首先要封装一个类,有了这个类,只要把类拖拽到你的工程,妈妈就再也不用担心你不会做轮播图了!


创建这个类如下:

类名: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

功能实现
Web note ad 1