一、效果展示(無限循環)
效果展示.gif
二、原碼下載地址
SLAdsSliderView控件的原碼上傳在我的github上。
下載地址:https://github.com/SLconst/SLAdsSliderView
三、如何使用
1.快速創建
- (void)viewDidLoad {
// 創建廣告滾動的控件
SLAdsSliderView *adsSliderView = [[SLAdsSliderView alloc] init];
adsSliderView.frame = CGRectMake(0, 0, 375 , 200);
adsSliderView.images = @[
[UIImage imageNamed:@"image0"],
[UIImage imageNamed:@"image1"],
[UIImage imageNamed:@"image2"],
[UIImage imageNamed:@"image3"],
[UIImage imageNamed:@"image4"]
];
[self.view addSubview:adsSliderView];
}
// 設置代理(可以用代理方法監聽圖片的點擊)
adsSliderView.delegate = self;
2.設置圖片的滾動方向
// 設置圖片的滾動方向(默認是水平方向滾動)
adsSliderView.direction = SLAdsSliderViewDirectionVertical;
3.監聽是點擊了哪張圖片(代理協議:SLAdsSliderViewDelegate)
// 設置代理(可以用代理方法監聽圖片的點擊)
adsSliderView.delegate = self;
// 實現代理方法
-(void)adsSliderView:(SLAdsSliderView *)adsSliderView didSelectItemAtIndex:(NSInteger)index
{
NSLog(@"%ld",(long)index);
}
4.關于pageControl
1.如果是想設置pageControl的某些樣式,我提供了pageControl屬性的接口
adsSliderView.pageControl.×××
2.如果是想改變pageControl的frame,就繼承自我這個控件,在layoutSubviews中修改
- (void)layoutSubviews
{
[super layoutSubviews];
self.pageControl.frame = CGRectMake(0, 0, 100, 25);
}
四、如何實現無限滾動的思路
層級圖
監聽scrollview的滾動,每當滾動結束后,同時完成以下兩步:
1.重置scrollView.contentOffset.x 等于 scrollview控件的寬度。
2.更改三個imageview上顯示的圖片。
比如我設置了image0、image1、image2、image3、image4、image5、image6一共7張圖片。contentOffset如上圖。
左邊顯示:image1
中間顯示:image2
右邊顯示:image3
那么此時我們屏幕上顯示的是image2,當我們向右慢慢滾動時 -->, 右邊顯示的image3會慢慢出現在我們眼前。
向右滑動
當右邊顯示的image3即將完全顯示在眼前的時候,
立刻將scrollView.contentOffset.x置為scrollview的寬度,
并立馬改變三個圖片顯示的內容。
左邊顯示:image2
中間顯示:image3
右邊顯示:image4
那么這個時候顯示在我們眼前的就是image3的圖片。
如此往復執行下去,就實現了無限滾動的效果。