IOS開發輪播圖Banner
阿新 • • 發佈:2018-12-22
一:首先我們要建立一個繼承於UIView的類
我們在.h裡新增拓展
#import <UIKit/UIKit.h> @class BannerView; @protocol BannerViewDelegate <NSObject> @optional //可選 - (void)selectImage:(BannerView *)bannerView currentImage:(NSInteger )currentImage; @end @interface BannerView : UIView @property (nonatomic , weak) id <BannerViewDelegate> delegate; //自定義init方法 - (id)initWithFrame:(CGRect)frame addImageArray:(NSMutableArray *)addImageArray; @end
二:在.m裡宣告屬性
#import "BannerView.h" @interface BannerView ()<UIScrollViewDelegate> @property (nonatomic , strong) UIScrollView *scrollView; @property (nonatomic , assign) CGFloat width; @property (nonatomic , assign) CGFloat height; @property (nonatomic , strong) NSMutableArray *dataArray; @property (nonatomic , strong) UIPageControl *pageControl; @property (nonatomic , strong) NSTimer *timer; @end
然後在下面實現init方法
@implementation BannerView //自定義init方法/構造方法 - (id)initWithFrame:(CGRect)frame addImageArray:(NSMutableArray *)addImageArray { if (self = [super initWithFrame:frame]) { //獲取self寬度 _width = self.frame.size.width; //獲取self高度 _height = self.frame.size.height; //改變圖片陣列 1 2 3 4 5 6 _dataArray = [NSMutableArray arrayWithArray:addImageArray]; //在陣列的最後一位新增上第一張圖片 1 2 3 4 5 6 1 [_dataArray addObject:addImageArray[0]]; //在第一個位置插入圖片6 | 6 1 2 3 4 5 6 1 [_dataArray insertObject:[addImageArray lastObject] atIndex:0]; //將scrollView新增到self上 [self addSubview:self.scrollView]; //新增page [self addSubview:self.pageControl]; //新增定時器 [self addTimer]; } return self; }
新增定時器
//新增定時器
- (void)addTimer
{
_timer = [NSTimer timerWithTimeInterval:2 target:self selector:@selector(change) userInfo:nil repeats:YES];
[[NSRunLoop currentRunLoop] addTimer:_timer forMode:NSRunLoopCommonModes];
}
定時器事件
//定時器方法
- (void)change
{
//獲取起始位置
CGFloat startX = _scrollView.contentOffset.x;
//獲取終點
CGFloat endX = startX + _width;
if (endX == (_dataArray.count - 1) * _width)
{
//動畫時長 animateWithDuration
[UIView animateWithDuration:0.25 animations:
^{
//往最後一位走
_scrollView.contentOffset = CGPointMake(endX, 0);
}
completion:^(BOOL finished)
{
//走向第二位
_scrollView.contentOffset = CGPointMake(_width, 0);
//走到對應的點
NSInteger tmpPage = _scrollView.contentOffset.x / _width;
_pageControl.currentPage = tmpPage - 1;
}];
}
else
{
[UIView animateWithDuration:0.25 animations:
^{
_scrollView.contentOffset = CGPointMake(endX, 0);
}];
//走到對應的點
NSInteger tmpPage = _scrollView.contentOffset.x / _width;
_pageControl.currentPage = tmpPage - 1;
}
}
初始化ScrollView
//初始化scrollView
- (UIScrollView *)scrollView
{
if (!_scrollView)
{
_scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
//滾動範圍
_scrollView.contentSize = CGSizeMake(_width * _dataArray.count, _height);
//起始頁
_scrollView.contentOffset = CGPointMake(_width, 0);
//新增分頁效果
_scrollView.pagingEnabled = YES;
//禁止彈簧效果
_scrollView.bounces = NO;
_scrollView.delegate = self;
//禁止水平滾動
_scrollView.showsHorizontalScrollIndicator = NO;
for (int i = 0; i < _dataArray.count; i++)
{
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(_width * i, 0, _width, _height)];
imageView.image = [UIImage imageNamed:_dataArray[i]];
//新增手勢
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapAction:)];
//將手勢新增到圖片上
[imageView addGestureRecognizer:tap];
//與使用者互動
imageView.userInteractionEnabled = YES;
[_scrollView addSubview:imageView];
}
}
return _scrollView;
}
手勢方法
//手勢方法
- (void)tapAction:(UITapGestureRecognizer *)recognizer
{
//如果代理響應該方法 , 就走該方法
if ([self.delegate respondsToSelector:@selector(selectImage:currentImage:)])
{
[self.delegate selectImage:self currentImage:self.pageControl.currentPage];
}
}
初始化pageController
//初始化pageControl
- (UIPageControl *)pageControl
{
if (!_pageControl)
{
_pageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(20, _height - 30, _width - 20 * 2, 30)];
//小圓點的數量
_pageControl.numberOfPages = _dataArray.count - 2;
_pageControl.currentPageIndicatorTintColor = [UIColor redColor];
//不讓使用者互動
_pageControl.userInteractionEnabled = NO;
}
return _pageControl;
}
代理方法
//代理方法 將要拖拽的時候把timer停止
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
if (_timer)
{
//timer停止在未來的一個時間
[_timer setFireDate:[NSDate distantFuture]];
}
}
//代理方法 已經結束減速
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
//恢復時間timer
if (_timer)
{
[_timer setFireDate:[NSDate dateWithTimeIntervalSinceNow:2]];
}
//獲取滑動結束的偏移量
CGPoint currentOffSet = scrollView.contentOffset;
//如果是在最後一頁的話 , 讓scrollView滾到第一頁
if (currentOffSet.x == (_dataArray.count - 1)* _width)
{
_scrollView.contentOffset = CGPointMake(_width, 0);
}
//如果是第一頁的時候 , 偏移量為0
if (currentOffSet.x == 0)
{
_scrollView.contentOffset = CGPointMake((_dataArray.count - 2) * _width, 0);
}
//獲取最新偏移量
CGPoint newOffSet = _scrollView.contentOffset;
//獲取偏移了多少個寬度
NSInteger tmpPage = newOffSet.x / _width;
//設定當前pageControl的當前點
_pageControl.currentPage = tmpPage - 1;
}
^*^封裝完畢
我們只需在要用無限輪播的類裡面,匯入標頭檔案,遵守bannerView代理 和新增元素屬性
在viewdidload初始化新增即可實現