SDCycleScrollView簡單實用

需求如下:


屏幕快照 2018-09-10 下午6.40.59.png

簡單來說就是幾張圖片輪播滾動。
原理:采用UICollectionView的重用機(jī)制和循環(huán)滾動的方式實現(xiàn)圖片的輪播滾動孙技。
可以實現(xiàn)的需求方式有:
1娄徊、本地加載:可以創(chuàng)建不帶標(biāo)題的圖片輪播器
2、網(wǎng)絡(luò)加載:創(chuàng)建帶標(biāo)題的圖片輪播器(支持自定義分頁控件圖標(biāo)顏色的修改)
3冗酿、網(wǎng)絡(luò)加載:創(chuàng)建自定義圖片的pageControlDot的圖片輪播器
{currentPageDotImage,pageDotImage}

需要在項目中: pod 'SDCycleScrollView'
在使用的地方:#import "SDCycleScrollView.h"

注意事項

由于該庫中圖片處理采用了SDWebImage所以需要導(dǎo)入第三方庫SDWebImage
首先我們先看下代碼結(jié)構(gòu):


屏幕快照 2018-09-12 下午3.25.10.png

SDCycleScrollView實現(xiàn)的代碼都放在SDCycleScrollView.m中。
項目中如果想使用并初始化SDCycleScrollView络断,可以使用如下方式:

/** 初始輪播圖(推薦使用) */
+ (instancetype)cycleScrollViewWithFrame:(CGRect)frame delegate:(id<SDCycleScrollViewDelegate>)delegate placeholderImage:(UIImage *)placeholderImage;

+ (instancetype)cycleScrollViewWithFrame:(CGRect)frame imageURLStringsGroup:(NSArray *)imageURLStringsGroup;


/** 本地圖片輪播初始化方式 */
+ (instancetype)cycleScrollViewWithFrame:(CGRect)frame imageNamesGroup:(NSArray *)imageNamesGroup;

/** 本地圖片輪播初始化方式2,infiniteLoop:是否無限循環(huán) */
+ (instancetype)cycleScrollViewWithFrame:(CGRect)frame shouldInfiniteLoop:(BOOL)infiniteLoop imageNamesGroup:(NSArray *)imageNamesGroup;

結(jié)合本次需求裁替,我采用了推薦使用的方式進(jìn)行初始化

    UIView *infoView = [[UIView alloc] init];
    infoView.backgroundColor = [UIColor whiteColor];
    [scrollView addSubview:infoView];
    
    NSArray *imagesURLStrings = [self.model.resources_list valueForKey:@"resource_url"];
    SDCycleScrollView *cycleScrollView = [SDCycleScrollView cycleScrollViewWithFrame:CGRectMake(24, 14, kSCREEN_WIDTH - 48    , (kSCREEN_WIDTH - 48) / 327 * 160) delegate:self placeholderImage:[UIImage imageNamed:@"placeholder"]];
    cycleScrollView.pageControlAliment = SDCycleScrollViewPageContolAlimentCenter;
    cycleScrollView.currentPageDotColor = [UIColor whiteColor];
    cycleScrollView.imageURLStringsGroup = imagesURLStrings;
    cycleScrollView.autoScrollTimeInterval = 5;
    cycleScrollView.currentPageDotColor = [UIColor ZHBlueColor];
    cycleScrollView.pageDotColor = [UIColor whiteColor];
    cycleScrollView.layer.masksToBounds = YES;
    cycleScrollView.layer.cornerRadius = 4;
    [infoView addSubview:cycleScrollView];

我看到源代碼中實現(xiàn)自動輪播滾動代碼是這樣子滴
通過創(chuàng)建一個Timer,開啟后加到runloop中,目的是防止滑動工程中出現(xiàn)的卡頓現(xiàn)象貌笨。

- (void)setupTimer
{
    [self invalidateTimer]; // 創(chuàng)建定時器前先停止定時器弱判,不然會出現(xiàn)僵尸定時器,導(dǎo)致輪播頻率錯誤锥惋。
    
    NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:self.autoScrollTimeInterval target:self selector:@selector(automaticScroll) userInfo:nil repeats:YES];
    _timer = timer;
    [[NSRunLoop mainRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];
}

無線循環(huán)中添加timer的目的是要獲取到當(dāng)前的index昌腰,以及滾動到當(dāng)前的index,作者是這樣實現(xiàn)的:

    _totalItemsCount = self.infiniteLoop ? self.imagePathsGroup.count * 100 : self.imagePathsGroup.count;

然后作者創(chuàng)建了count * 100的這樣的一個collectionView,每次都是從中間位置開始輪播膀跌。當(dāng)currentIndex >= _totalItemsCount的時候就會將contentOffset設(shè)置到_totalItemsCount *0.5的位置

- (void)scrollToIndex:(int)targetIndex
{
    if (targetIndex >= _totalItemsCount) {
        if (self.infiniteLoop) {
            targetIndex = _totalItemsCount * 0.5;
            [_mainView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:targetIndex inSection:0] atScrollPosition:UICollectionViewScrollPositionNone animated:NO];
        }
        return;
    }
    [_mainView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:targetIndex inSection:0] atScrollPosition:UICollectionViewScrollPositionNone animated:YES];
}

在layoutSubViews方法中作者也實現(xiàn)了類似的方法遭商,初始化的時候就從_totalItemsCount *0.5的位置開始輪播

if (_mainView.contentOffset.x == 0 &&  _totalItemsCount) {
        int targetIndex = 0;
        if (self.infiniteLoop) {
            targetIndex = _totalItemsCount * 0.5;
        }else{
            targetIndex = 0;
        }
        [_mainView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:targetIndex inSection:0] atScrollPosition:UICollectionViewScrollPositionNone animated:NO];
    }

并且作者還針對app置于后臺一會后再置于前臺,有可能會出現(xiàn)卡住的現(xiàn)象捅伤。作者在這里添加了一個解決方法:重新設(shè)置_totalItemsCount *0.5的位置開始輪播

#pragma mark - public actions

- (void)adjustWhenControllerViewWillAppera
{
    long targetIndex = [self currentIndex];
    if (targetIndex < _totalItemsCount) {
        [_mainView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:targetIndex inSection:0] atScrollPosition:UICollectionViewScrollPositionNone animated:NO];
    }
}

如果需要實現(xiàn)點擊劫流、滾動回調(diào)需要設(shè)置代理,完成相應(yīng)的delegate即可丛忆。

@protocol SDCycleScrollViewDelegate <NSObject>

@optional

/** 點擊圖片回調(diào) */
- (void)cycleScrollView:(SDCycleScrollView *)cycleScrollView didSelectItemAtIndex:(NSInteger)index;

/** 圖片滾動回調(diào) */
- (void)cycleScrollView:(SDCycleScrollView *)cycleScrollView didScrollToIndex:(NSInteger)index;
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末祠汇,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子熄诡,更是在濱河造成了極大的恐慌可很,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,348評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件凰浮,死亡現(xiàn)場離奇詭異我抠,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)袜茧,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,122評論 2 385
  • 文/潘曉璐 我一進(jìn)店門屿良,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人惫周,你說我怎么就攤上這事】嫡唬” “怎么了递递?”我有些...
    開封第一講書人閱讀 156,936評論 0 347
  • 文/不壞的土叔 我叫張陵喷橙,是天一觀的道長。 經(jīng)常有香客問我登舞,道長贰逾,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,427評論 1 283
  • 正文 為了忘掉前任菠秒,我火速辦了婚禮疙剑,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘践叠。我一直安慰自己言缤,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,467評論 6 385
  • 文/花漫 我一把揭開白布禁灼。 她就那樣靜靜地躺著管挟,像睡著了一般。 火紅的嫁衣襯著肌膚如雪弄捕。 梳的紋絲不亂的頭發(fā)上僻孝,一...
    開封第一講書人閱讀 49,785評論 1 290
  • 那天,我揣著相機(jī)與錄音守谓,去河邊找鬼穿铆。 笑死,一個胖子當(dāng)著我的面吹牛斋荞,可吹牛的內(nèi)容都是我干的荞雏。 我是一名探鬼主播,決...
    沈念sama閱讀 38,931評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼譬猫,長吁一口氣:“原來是場噩夢啊……” “哼讯檐!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起染服,我...
    開封第一講書人閱讀 37,696評論 0 266
  • 序言:老撾萬榮一對情侶失蹤别洪,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后柳刮,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體挖垛,經(jīng)...
    沈念sama閱讀 44,141評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,483評論 2 327
  • 正文 我和宋清朗相戀三年秉颗,在試婚紗的時候發(fā)現(xiàn)自己被綠了痢毒。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,625評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡蚕甥,死狀恐怖哪替,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情菇怀,我是刑警寧澤凭舶,帶...
    沈念sama閱讀 34,291評論 4 329
  • 正文 年R本政府宣布晌块,位于F島的核電站,受9級特大地震影響帅霜,放射性物質(zhì)發(fā)生泄漏匆背。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,892評論 3 312
  • 文/蒙蒙 一身冀、第九天 我趴在偏房一處隱蔽的房頂上張望钝尸。 院中可真熱鬧,春花似錦搂根、人聲如沸珍促。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽踢星。三九已至,卻和暖如春隙咸,著一層夾襖步出監(jiān)牢的瞬間沐悦,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工五督, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留藏否,地道東北人。 一個月前我還...
    沈念sama閱讀 46,324評論 2 360
  • 正文 我出身青樓充包,卻偏偏與公主長得像副签,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子基矮,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,492評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 1淆储、通過CocoaPods安裝項目名稱項目信息 AFNetworking網(wǎng)絡(luò)請求組件 FMDB本地數(shù)據(jù)庫組件 SD...
    陽明先生_X自主閱讀 15,969評論 3 119
  • 今天是日記星球第7期第16天本砰,時間過得太快了,一眨眼這一期又要結(jié)束了钢悲。今天我分享了“如何打造一款爆品点额?”今天的日記...
    小牛媽媽日記星球閱讀 627評論 0 2
  • 下午和安安坐公交車回家。車上莺琳,說到了秋天还棱。 我:現(xiàn)在是秋天了。 安安:真的是秋天了嗎惭等? 我:對啊珍手,秋天了。從二十四...
    是嬌嬌呀閱讀 219評論 0 0
  • 姓名:周玉霞 六項精進(jìn):327期學(xué)員 公司:溫州易道偉業(yè)企業(yè)管理咨詢有限公司 地點:溫州市鹿城區(qū)東龍路46號 【日...
    Anne玉閱讀 185評論 0 0
  • 整個春節(jié)都是糟心事 無法言說 無法言說 所有的郁悶 與力量的蓄積 都埋藏在 快門的一按一放間 讓文心蘭 替我訴說...
    3be868950df2閱讀 348評論 0 0