iOS轮播图的实现

2016-08-16  本文已影响246人  MangoJ
首先要封装一个类,有了这个类,只要把类拖拽到你的工程,妈妈就再也不用担心你不会做轮播图了!(此文与之前发布的文章一致,仅改变了文本格式)

创建这个类如下:
类名: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
上一篇下一篇

猜你喜欢

热点阅读