圖片輪播UIScrollView
相信大家都有的共識就是,絕大數(shù)類型的APP里都會有圖片輪播桐臊,特別是電商類的APP里更是用得多伤提,今天我就利用UIScrollView實(shí)現(xiàn)個簡單的圖片全屏輪播
廢話不說肿男,上代碼:
1.首先在拓展里定義需要用到的宏和變量
#define CJFScreenWidth ([UIScreen mainScreen].bounds.size.width)
#define CJFScreenHeight ([UIScreen mainScreen].bounds.size.height)
@property (nonatomic, strong) UIScrollView *scrollView;
@property (nonatomic, strong) UIPageControl *pageCtrl;
@property (nonatomic, strong) UIView *CJFView;
2舶沛、然后逐步實(shí)現(xiàn)如下方法
第一步:
#pragma mark 1如庭、創(chuàng)建輪播視圖scrollView
-(void)layoutScrollView {
// 創(chuàng)建scrollView
self.scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, CJFScreenWidth, CJFScreenHeight)];
// 設(shè)置scrollView的可滾動區(qū)域
self.scrollView.contentSize = CGSizeMake(8*CJFScreenWidth, 0);
// 設(shè)置scrollView的背景顏色
self.scrollView.backgroundColor = [UIColor brownColor];
// 設(shè)置scrollView滾動條的顯示
self.scrollView.showsHorizontalScrollIndicator = NO;
// 設(shè)置委托代理并遵守<UIScrollViewDelegate>
self.scrollView.delegate = self;
// 設(shè)置scrollView的分頁效果
self.scrollView.pagingEnabled = YES;
// 添加到父視圖
[self.view addSubview:self.scrollView];
}
第二步:
#pragma mark 2餐胀、添加圖片到scrollView
-(void)layoutImageView {
for (int i = 0; i < 8; i++) {
// 創(chuàng)建圖片名字符串
NSString *imgN = [NSString stringWithFormat:@"%dpic.jpg", (i+1)];
// 加載圖片
UIImage *img = [UIImage imageNamed:imgN];
// 創(chuàng)建圖片視圖
UIImageView *imgV = [[UIImageView alloc]initWithImage:img];
// 設(shè)置圖片視圖的frame
imgV.frame = CGRectMake(0, 0, CJFScreenWidth, CJFScreenHeight);
// 創(chuàng)建子scrollView
UIScrollView *subScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(i*CJFScreenWidth, 0, CJFScreenWidth, CJFScreenHeight)];
// 把imgV添加到子scrollView中
[subScrollView addSubview:imgV];
// 設(shè)置委托(代理)
subScrollView.delegate = self;
// 設(shè)置scrollView的可縮小比例
subScrollView.minimumZoomScale = 0.5;
subScrollView.maximumZoomScale = 2;
// 設(shè)置隱藏橫向和豎向的滾動條
subScrollView.showsVerticalScrollIndicator = NO;
subScrollView.showsHorizontalScrollIndicator = NO;
// 添加到父視圖
[self.scrollView addSubview:subScrollView];
}
}
第三步:
#pragma mark 3、添加分頁控件pageControl
-(void)layoutPageControl {
// 創(chuàng)建分頁控件
self.pageCtrl = [[UIPageControl alloc]initWithFrame:CGRectMake(10, CJFScreenHeight-40, CJFScreenWidth-20, 30)];
// 設(shè)置分頁控件的總頁數(shù)
self.pageCtrl.numberOfPages = 8;
// 添加到父視圖
[self.view addSubview:self.pageCtrl];
// 實(shí)現(xiàn)pageCtrl的響應(yīng)方法
[self.pageCtrl addTarget:self action:@selector(pageCtrlChangeAction:) forControlEvents:UIControlEventValueChanged];
}
第四步:
#pragma mark 4、實(shí)現(xiàn)scrollView的scrollViewDidScroll:方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
// 設(shè)置分頁控件與scrollView相對應(yīng)的currentPage
// 利用scrollView的當(dāng)前偏移量計算
self.pageCtrl.currentPage =
(int)self.scrollView.contentOffset.x / CJFScreenWidth;
}
第五步:
#pragma mark 5、實(shí)現(xiàn)pageCtrl的pageCtrlChangeAction:方法
-(void)pageCtrlChangeAction: (id)sender {
// 設(shè)置scrollView的偏移量
self.scrollView.contentOffset =
CGPointMake(self.pageCtrl.currentPage * CJFScreenWidth, 0);
}
第六步:
#pragma mark 6舞痰、實(shí)現(xiàn)縮放的響應(yīng)方法
- (UIView *)viewForZoomingInScrollView:(UIScrollView )scrollView {
// 告訴代理响牛,當(dāng)前響應(yīng)縮放操作的是哪一個子視圖
return [scrollView.subviews objectAtIndex:0];
}
第七步:
#pragma mark 7矢赁、添加定時器并實(shí)現(xiàn)響應(yīng)方法
-(void)timerAction: (id)sender {
// 利用靜態(tài)變量來控制圖片的循環(huán)
static int i = 0;
if (i == 8) {
i = 0;
}
// 利用scrollView的偏移量實(shí)現(xiàn)輪播圖片的播放
self.scrollView.contentOffset = CGPointMake(iCJFScreenWidth, 0);
i++;
}
3瘫寝、編譯運(yùn)行(當(dāng)然這里用到的圖片需要提前放到項(xiàng)目目錄里)。