IOS開發(fā)之UIScrollView實(shí)現(xiàn)圖片輪播器的無(wú)限滾動(dòng)
IOS開發(fā)之UIScrollView實(shí)現(xiàn)圖片輪播器的無(wú)限滾動(dòng)
簡(jiǎn)介
在現(xiàn)在的一些App中常常見(jiàn)到圖片輪播器,一般用于展示廣告、新聞等數(shù)據(jù),在iOS內(nèi)并沒(méi)有現(xiàn)成的控件直接實(shí)現(xiàn)這種功能,但是通過(guò)UIScrollView的允許分頁(yè)設(shè)置,可以實(shí)現(xiàn)滾動(dòng)輪播的功能。
輪播原理
UIScrollView對(duì)象有pagingEnable成員,如果設(shè)置為YES,那么每一個(gè)scrollView尺寸這么大的區(qū)域就會(huì)被當(dāng)作一頁(yè),在滾動(dòng)時(shí)會(huì)根據(jù)滾動(dòng)的比例自動(dòng)計(jì)算應(yīng)該切換到哪一頁(yè)。
無(wú)限滾動(dòng)原理
要實(shí)現(xiàn)無(wú)限滾動(dòng),需要額外的兩張圖片,假設(shè)我們的圖片有五張,存在images數(shù)組中,那么我們?cè)趯D片插入到scrollView中時(shí),在第一張圖片前面插入一個(gè)最后一張圖片作為輔助圖片,在最后一張后面插入一個(gè)第一張圖片作為輔助圖片。這樣,當(dāng)滾動(dòng)到第一張前面一張時(shí),在頁(yè)面切換結(jié)束后無(wú)動(dòng)畫的切換scrollView的偏移量為最后一張圖片(不包含最后一張后面的第一張那個(gè)輔助圖片),這樣就實(shí)現(xiàn)了由輔助圖片到真實(shí)圖片的過(guò)渡,之所以設(shè)置輔助圖片是為了在滾動(dòng)中看到那個(gè)真實(shí)圖片。同理,當(dāng)滾動(dòng)到最后一張的后面一張時(shí),我們吧scrollView的偏移量設(shè)置為第一張圖片即可。
具體的代碼實(shí)現(xiàn)
這個(gè)代碼是在開發(fā)一個(gè)項(xiàng)目中所寫的,已經(jīng)封裝稱一個(gè)View,只需要調(diào)用initWithFrame指定輪播器尺寸,然后通過(guò)設(shè)置images成員的值即可實(shí)現(xiàn)無(wú)限滾動(dòng)的輪播。
// .h
//
// ESPicPageView.h
// 享技
//
// Created by 11 on 11/30/15.
// Copyright © 2015 soulghost. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface ESPicPageView : UIView
@property (nonatomic, strong) NSArray *images;
@end
// --------------------------------------------
// .m
//
// ESPicPageView.m
// 享技
//
// Created by 11 on 11/30/15.
// Copyright © 2015 soulghost. All rights reserved.
//
#import "ESPicPageView.h"
#import "UIImageView+WebCache.h"
@interface ESPicPageView () <UIScrollViewDelegate>
@property (nonatomic, weak) UIScrollView *scrollView;
@property (nonatomic, weak) UIPageControl *pageControl;
@property (nonatomic, assign) CGFloat imgW;
@property (nonatomic, assign) CGFloat imgH;
@property (nonatomic, strong) NSTimer *timer;
@property (nonatomic, strong) NSArray *imageViews;
@property (nonatomic, assign) NSInteger imageCount;
@end
@implementation ESPicPageView
- (instancetype)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
self.backgroundColor = [UIColor blueColor];
UIScrollView *scrollView = [[UIScrollView alloc] init];
self.scrollView = scrollView;
self.scrollView.delegate = self;
self.scrollView.pagingEnabled = YES;
self.scrollView.showsHorizontalScrollIndicator = NO;
self.scrollView.backgroundColor = [UIColor whiteColor];
[self addSubview:scrollView];
self.imgW = frame.size.width;
self.imgH = frame.size.height;
[self setNeedsLayout];
UIPageControl *pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(frame.size.width - 50, frame.size.height - 10, 0, 0)];
self.pageControl = pageControl;
self.pageControl.numberOfPages = 1;
[self addSubview:pageControl];
self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];
[[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}
return self;
}
- (void)nextImage{
NSInteger page = self.pageControl.currentPage;
page = self.pageControl.currentPage + 1;
CGPoint offset = CGPointMake((1 + page) * self.imgW, 0);
[self.scrollView setContentOffset:offset animated:YES];
}
- (void)setupImageViews{
for (int i = 0; i < self.images.count + 2; i++) {
UIImageView *imageView = [[UIImageView alloc] init];
CGFloat imageX = i * self.imgW;
CGFloat imageY = 0;
CGFloat imageW = self.imgW;
CGFloat imageH = self.imgH;
imageView.frame = CGRectMake(imageX, imageY, imageW,imageH);
[self.scrollView insertSubview:imageView atIndex:0];
}
}
- (NSArray *)imageViews{
if (_imageViews == nil) {
NSMutableArray *arr = [NSMutableArray array];
for (int i = 0; i < self.images.count + 2; i++) {
UIImageView *imageView = [[UIImageView alloc] init];
CGFloat imageX = i * self.imgW;
CGFloat imageY = 0;
CGFloat imageW = self.imgW;
CGFloat imageH = self.imgH;
imageView.frame = CGRectMake(imageX, imageY, imageW,imageH);
[self.scrollView insertSubview:imageView atIndex:0];
[arr addObject:imageView];
}
_imageViews = arr;
}
return _imageViews;
}
- (void)setImages:(NSArray *)images{
_images = images;
self.imageCount = images.count;
self.pageControl.numberOfPages = self.imageCount;
[self addPics];
}
- (void)addPics{
for (int i = 0; i < self.images.count + 2; i++) {
UIImageView *imageView = self.imageViews[i];
if (i == 0) {
imageView.image = [self.images lastObject];
}else if(i == self.images.count + 1){
imageView.image = [self.images firstObject];
}else{
imageView.image = self.images[i - 1];
}
}
}
- (void)layoutSubviews{
[super layoutSubviews];
self.scrollView.frame = self.bounds;
self.scrollView.contentSize = CGSizeMake((self.imageCount + 2) * self.imgW, 0);
[self.scrollView setContentOffset:CGPointMake(self.imgW, 0) animated:NO];
}
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
[self.timer invalidate];
self.timer = nil;
}
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];
[[NSRunLoop currentRunLoop ] addTimer:self.timer forMode:NSRunLoopCommonModes];
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
if (scrollView.contentOffset.x == self.imgW * (self.imageCount + 1)) {
[self.scrollView setContentOffset:CGPointMake(self.imgW, 0) animated:NO];
}else if(scrollView.contentOffset.x == 0){
[self.scrollView setContentOffset:CGPointMake(self.imgW * (self.imageCount), 0) animated:NO];
}
self.pageControl.currentPage = (self.scrollView.contentOffset.x + self.imgW * 0.5f) / self.imgW - 1;
}
@end
以上就是使用UIScrollView實(shí)現(xiàn)圖片的輪播的功能,如有疑問(wèn)大家可以留言,也可以到本站社區(qū)留言討論,感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
- 一行iOS代碼實(shí)現(xiàn)圖片無(wú)限輪播器
- IOS圖片無(wú)限輪播器的實(shí)現(xiàn)原理
- iOS實(shí)現(xiàn)無(wú)限循環(huán)圖片輪播器的封裝
- IOS使用UICollectionView實(shí)現(xiàn)無(wú)限輪播效果
- iOS開發(fā)中使用UIScrollView實(shí)現(xiàn)圖片輪播和點(diǎn)擊加載
- IOS實(shí)現(xiàn)圖片輪播無(wú)限循環(huán)效果
- iOS實(shí)現(xiàn)帶有縮放效果的自動(dòng)輪播圖
- iOS實(shí)現(xiàn)圖片輪播效果
- iOS實(shí)現(xiàn)無(wú)限循環(huán)輪播圖效果
- iOS實(shí)現(xiàn)圖片輪播器
相關(guān)文章
window調(diào)用api列出當(dāng)前所有進(jìn)程示例
這篇文章主要介紹了window調(diào)用api列出當(dāng)前所有進(jìn)程示例,需要的朋友可以參考下2014-04-04
C++一個(gè)數(shù)組賦值給另一個(gè)數(shù)組方式
文章介紹了三種在C++中將一個(gè)數(shù)組賦值給另一個(gè)數(shù)組的方法:使用循環(huán)逐個(gè)元素賦值、使用標(biāo)準(zhǔn)庫(kù)函數(shù)std::copy或std::memcpy以及使用標(biāo)準(zhǔn)庫(kù)容器,每種方法都有其適用的場(chǎng)景和注意事項(xiàng)2025-02-02
C語(yǔ)言數(shù)據(jù)結(jié)構(gòu)中樹與森林專項(xiàng)詳解
這篇文章主要介紹了C語(yǔ)言數(shù)據(jù)結(jié)構(gòu)中樹與森林,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-11-11
C++ txt 文件讀取,并寫入結(jié)構(gòu)體中的操作
這篇文章主要介紹了C++ txt 文件讀取,并寫入結(jié)構(gòu)體中的操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-12-12
C語(yǔ)言超詳細(xì)分析多進(jìn)程的概念與使用
在一個(gè)項(xiàng)目中并發(fā)執(zhí)行任務(wù)時(shí)多數(shù)情況下都會(huì)選擇多線程,但有時(shí)候也會(huì)選擇多進(jìn)程,例如可以同時(shí)運(yùn)行n個(gè)記事本編輯不同文本,由一個(gè)命令跳轉(zhuǎn)到另外一個(gè)命令,或者使用不同進(jìn)程進(jìn)行協(xié)作2022-08-08
淺析C語(yǔ)言調(diào)試器GDB和LLDB的使用方法
這篇文章主要介紹了C語(yǔ)言調(diào)試器GDB和LLDB的使用方法,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
C語(yǔ)言簡(jiǎn)明講解操作符++和--的使用方法
++和--運(yùn)算符分別是+=1和-=1的簡(jiǎn)寫。設(shè)計(jì)這樣兩個(gè)運(yùn)算符的本意是?便程序員,但i++和++i使?不恰當(dāng)有時(shí)候會(huì)造成混淆,反倒令剛?cè)腴T的C程序員有點(diǎn)混亂2022-04-04

