iOS實(shí)現(xiàn)自動循環(huán)播放的banner實(shí)例詳解
前言
對于banner輪播圖,相信大家都會經(jīng)常用到。自動循環(huán)播放的banner是很常見的UI組件。如何實(shí)現(xiàn)呢?下面就來給大家詳細(xì)介紹下,話不多說了,下面來一起學(xué)習(xí)學(xué)習(xí)吧。
1.實(shí)現(xiàn)思路
1.橫向滾動的banner。
- UIScrollViw+UIImageView.
- UICollectionView+UICollectionViewCell.
- 前者需要自己做重用UIImageView,后者可以直接重用UICollectionViewCell。如果前者沒有做重用,多占用內(nèi)存。
2.自動循環(huán)播放banner。
- 可以使用計時器觸發(fā)循環(huán)播放.
- 拖動或手動滑動banner時,停止自動循環(huán)播放banner。手勢停止后,開啟自動循環(huán)播放banner。
3.特殊banner位的處理。
- 處于第1個或最后1個時,為保證橫向自動滑動效果流暢性,不跳動,需要特殊處理下。
- 在生成banner時,第1個前面插入最后1個banner。最后1個banner后面插入第1個banner。當(dāng)滑動到最后1個banner時,重置于第2個banner位。
2.本文采用第二種:UICollectionView+UICollectionViewCell
關(guān)鍵代碼實(shí)現(xiàn)
2.1生成banner的特殊處理
- (void)setBannerList:(NSArray<KBannerItem *> *)bannerList {
if (bannerList.count > 1) {
NSMutableArray *itemList = [NSMutableArray arrayWithArray:bannerList];
[itemList insertObject:bannerList.lastObject atIndex:0];
[itemList addObject:bannerList.firstObject];
_bannerList = itemList;
}else{
_bannerList = bannerList;
}
if (self.bannerList.count > 1) {
self.bannerPageControl.numberOfPages = self.bannerList.count - 2;
}else{
self.bannerPageControl.numberOfPages = 0;
}
self.noBannerImageView.hidden = self.bannerList.count > 0;
self.bannerPageControl.currentPage = 0;
[self.collectionView reloadData];
self.collectionView.contentOffset = CGPointMake(CGRectGetWidth(self.collectionView.frame), 0);
}
2.2 banner自動循環(huán)播放觸發(fā)的事件
- (void)handleBannerChangeEvent:(id)sender {
if (_bannerPageControl.numberOfPages <= 1) {
return;
}
NSInteger page = _bannerPageControl.currentPage + 1;
[self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForRow:page + 1 inSection:0] atScrollPosition:UICollectionViewScrollPositionRight animated:YES];
}
2.3開啟自動播放或關(guān)閉自動播放bannner。
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
self.countTimer.isOpen = NO;
}
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView
willDecelerate:(BOOL)decelerate {
self.countTimer.isOpen = YES;
}
2.4.滑動時的特殊處理。
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
if (_bannerList.count <=1) {
return;
}
CGFloat width = CGRectGetWidth(scrollView.frame);
NSInteger currentPage = scrollView.contentOffset.x / width;
if (currentPage == 0) {
if (scrollView.contentOffset.x < 0) {
[self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForRow:_bannerList.count - 2 inSection:0] atScrollPosition:UICollectionViewScrollPositionRight animated:NO];
self.bannerPageControl.currentPage = _bannerList.count - 2;
}else{
[self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForRow:1 inSection:0] atScrollPosition:UICollectionViewScrollPositionRight animated:NO];
self.bannerPageControl.currentPage = 0;
}
}else if (currentPage == _bannerList.count - 1) {
self.bannerPageControl.currentPage = 0;
[self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForRow:1 inSection:0] atScrollPosition:UICollectionViewScrollPositionRight animated:NO];
}else{
self.bannerPageControl.currentPage = currentPage - 1;
}
}
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
iOS頁面跳轉(zhuǎn)及數(shù)據(jù)傳遞(三種)
本文主要介紹了iOS頁面跳轉(zhuǎn)的三種方法及數(shù)據(jù)傳遞的方法。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
iOS中的應(yīng)用啟動原理以及嵌套模型開發(fā)示例詳解
這篇文章主要介紹了iOS中的應(yīng)用啟動原理以及嵌套模型開發(fā)示例詳解,代碼基于傳統(tǒng)的Objective-C,需要的朋友可以參考下2015-12-12
iOS緩存文件大小顯示功能和一鍵清理功能的實(shí)現(xiàn)方法
緩存占用了系統(tǒng)的大量空間,如何實(shí)時動態(tài)的顯示緩存的大小,使用戶清晰的了解緩存的積累情況,有效的進(jìn)行一鍵清理呢?下面小編通過本文給大家介紹iOS緩存文件大小顯示功能和一鍵清理功能的實(shí)現(xiàn)方法,一起看看吧2016-10-10
解決ios微信下vue項(xiàng)目組件切換并自動播放音頻問題
最近在做一個英語答題項(xiàng)目,項(xiàng)目需求是通過答題取的成績 , 答題的題型是分為,聽音選圖,看圖選詞和填空題.下面小編給大家?guī)砹薸os微信下vue項(xiàng)目組件切換并自動播放音頻的解決方案,需要的朋友參考下吧2018-01-01
IOS Xcode調(diào)試常用命令和斷點(diǎn)整理
這篇文章主要介紹了IOS Xcode調(diào)試常用命令和斷點(diǎn)整理的相關(guān)資料,這里對IOS Xcode調(diào)試常用命令進(jìn)行了總結(jié),需要的朋友可以參考下2016-12-12
IOS開發(fā) 支持https請求以及ssl證書配置詳解
這篇文章主要介紹了IOS開發(fā) 支持https請求以及ssl證書配置詳解的相關(guān)資料,需要的朋友可以參考下2017-02-02
iOS中的UITextView文字輸入光標(biāo)使用技巧小結(jié)
UITextView在用戶體驗(yàn)方面有著十分明顯的作用,包括鍵盤的呼出及文字的選擇等,接下來就來整理給出一份iOS中的UITextView文字輸入光標(biāo)使用技巧小結(jié),需要的朋友可以參考下2016-05-05

