IOS實現banner循環輪播

2019-11-14 18:27:35

字體：大中小

來源：轉載

供稿：網友

　　在項目中把banner圖片UIImageView一張一張的放入UIScrollView中，通過設置UIScrollView的pagingEnabled屬性為YES，則可以做到當用戶滑動banner時圖片一張一張的顯示，但當用戶想從第一張圖到最后一張圖，或者從最后一張圖到第一張圖的時候就會卡住，簡單點的做法就是判斷用戶swipe的方向，然后讓UIScrollView自動滑動到最后一張或者第一張，這樣做在動畫中又顯得不夠自然，一下是解決辦法

　　假設banner圖片有3張，在banner的UIScrollView中用以下的方式進行排列

第三張

第一張

第二張

第三張

第一張

UIScrollView默認滾動到第二張圖片的位置，當用戶滑動到第一張時，則UIScrollView自動滾動到第4張去，同理當用戶滑動到最后一張時，UIScrollView自動滾動到第二張去，這些滾動都設置動畫效果為NO

代碼如下

h文件

#import <UIKit/UIKit.h>@interface ViewController : UIViewController@PRoperty (weak, nonatomic) IBOutlet UIScrollView *mainScroll;@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;@end

m文件

#import "ViewController.h"@interface ViewController ()<UIScrollViewDelegate>{    CGFloat w;    NSMutableArray *imgArr;    NSMutableArray *pageArr;}@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];    w = self.view.frame.size.width;    //page的個數    pageArr = [NSMutableArray array];    for (int i = 1; i <= 3; i++) {        [pageArr addObject:[NSString stringWithFormat:@"%d.jpg",i]];    }    //重新獲取imgView的個數，將顯示的第最后一張圖片放在第一張，而在最后一張放置顯示的第一張圖片    imgArr = [NSMutableArray array];    [imgArr addObject:pageArr[pageArr.count - 1]];    for (NSString *imgSrc in pageArr) {        [imgArr addObject:imgSrc];    }    [imgArr addObject:pageArr[0]];    self.mainScroll.contentSize = CGSizeMake(w*imgArr.count, 0);    //開始塞入圖片    for (int i = 0; i < imgArr.count; i++) {        NSString *imgSrc = imgArr[i];        UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(i*w, 0, w, self.mainScroll.frame.size.height)];        [imgView setImage:[UIImage imageNamed:imgSrc]];        [self.mainScroll addSubview:imgView];    }    self.pageControl.numberOfPages = pageArr.count;    self.mainScroll.bounces = NO;    self.mainScroll.pagingEnabled = YES;    self.mainScroll.showsHorizontalScrollIndicator = NO;    self.mainScroll.showsVerticalScrollIndicator = NO;    self.mainScroll.delegate = self;    //自動將scrollView移動顯示的第一張圖片處    [self.mainScroll setContentOffset:CGPointMake(w, 0) animated:NO];}- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {    CGFloat offsetX = scrollView.contentOffset.x;    int index = offsetX/w;    if (index == 0) {        [self.mainScroll setContentOffset:CGPointMake(w*(imgArr.count-2), 0) animated:NO];        self.pageControl.currentPage = pageArr.count - 1;    }else if (index == imgArr.count -1){        [self.mainScroll setContentOffset:CGPointMake(w, 0) animated:NO];        self.pageControl.currentPage = 0;    }else{        self.pageControl.currentPage = index - 1;    }    }@end