ios圖檔輪播效果

代碼位址如下：

http://www.demodashi.com/demo/11959.html

ImageCarousel

簡單封裝的圖檔輪播器

記憶體過大由于我加載的圖檔分辨率較高(4k)

檔案目錄

使用

初始化自定義view，并提供title和圖檔數組，設定控制器代理

shufflingView *myView = [[shufflingView alloc]
                         initWithFrame:CGRectMake(, , [UIScreen mainScreen].bounds.size.width,
                                                  )];


    NSArray *picDataArray = @[ @"1", @"2", @"3", @"4", @"5" ];
    NSArray *titleDataArray = @[ @"1", @"2", @"3", @"4", @"5" ];

    myView.picDataArray = [picDataArray copy];

    myView.titleDataArray = [titleDataArray copy];

    myView.titleLabelTextColor =
    [UIColor colorWithRed:/ green: blue: alpha:];

    myView.isAutomaticScroll = YES;

    myView.automaticScrollDelay = ;

    myView.carouselViewStyle = ImageCarouselStyleBoth;

    myView.pageIndicatorTintColor = [UIColor colorWithRed:/ green:/ blue:/ alpha:];

    myView.pageControlCurrentColor =
    [UIColor colorWithRed:/ green:/ blue:/ alpha:];

    myView.delegate = self;

    myView.picDataArray = [picDataArray copy];

    [self.view addSubview:myView];
           

自定義view

typedef NS_ENUM(NSInteger, ImageCarouselStyleType) {
    ImageCarouselStyleNone,
    ImageCarouselStyleTitle,
    ImageCarouselStylePageControl,
    ImageCarouselStyleBoth
};
@protocol CarouselViewDelegate <NSObject>

@optional

- (void)didClick:(NSInteger)index;

@end

@interface shufflingView : UIView
{
    float _automaticScrollDelay;
    ImageCarouselStyleType _carouselViewStyle;
}
@property(nonatomic, strong) NSArray *picDataArray;
@property(nonatomic, strong) NSArray *titleDataArray;
@property(nonatomic, weak) UIFont *titleLabelTextFont;
@property(nonatomic, weak) UIColor *titleLabelTextColor;
@property(nonatomic, weak) UIColor *pageIndicatorTintColor;
@property(nonatomic, weak) UIColor *pageControlCurrentColor;

// 是否自動滾動
@property(nonatomic, assign) BOOL isAutomaticScroll;
// 滾動時間間隔
@property(nonatomic, assign) float automaticScrollDelay;
/// 枚舉
@property(nonatomic, assign) ImageCarouselStyleType carouselViewStyle;

@property(nonatomic, weak) id<CarouselViewDelegate> delegate;
           

采用一個scrollivew和三個imageview

// 預設滾動到中間imageview
    [_mainScrollView setContentOffset:CGPointMake(self.bounds.size.width, )
                             animated:NO];

    // 添加三個imageView
    _leftImageView = [[UIImageView alloc]initWithFrame:CGRectMake(, , KViewW, KViewH)];
    _rightImageView = [[UIImageView alloc]initWithFrame:CGRectMake(*KViewW, , KViewW, KViewH)];

    _centerImageView = [[UIImageView alloc]initWithFrame:CGRectMake(KViewW, , KViewW, KViewH)];
    _centerImageView.userInteractionEnabled = YES;
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]
                                   initWithTarget:self
                                   action:@selector(scrollViewClick:)];

    [_centerImageView addGestureRecognizer:tap];

    [self.mainScrollView addSubview:_leftImageView];
    [self.mainScrollView addSubview:_rightImageView];
    [self.mainScrollView addSubview:_centerImageView];
           

核心代碼

根據scrollview的偏移量來計算目前位于的imageView。然後重置左右兩個image的圖檔

#pragma mark - 無限滾動核心
- (void)reloadImageViews {
    // 擷取目前offset
    CGPoint scrollViewOffset = [_mainScrollView contentOffset];
    // 如果目前位于centerImageView
    if (scrollViewOffset.x ==  * _mainScrollView.bounds.size.width) {
        if (_currentImageIndex == kImageCount - ) {
            _currentImageIndex = ;
        }else {

            _currentImageIndex = (_currentImageIndex +) % kImageCount;
        }

    } else if (scrollViewOffset.x == ) {
        if (_currentImageIndex == ) {
            _currentImageIndex = kImageCount - ;
        }else {

            _currentImageIndex = (_currentImageIndex -) % kImageCount;
        }

    }

    _centerImageView.image =
    [UIImage imageNamed:_picDataArray[self.currentImageIndex]];

    // 重新設定左右圖檔
    _leftImageView.image =
    [UIImage imageNamed:_picDataArray[self.leftImageIndex]];

    _rightImageView.image =
    [UIImage imageNamed:_picDataArray[self.rightImageIndex]];

    _titleLabel.text = _titleDataArray[self.currentImageIndex];
    _pageControl.currentPage = self.currentImageIndex;

}
           

滾動過程中調整pageControl

// MARK: - 滾動過程中
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

    CGPoint scrollViewOffset = scrollView.contentOffset;

    if (scrollViewOffset.x >  * _mainScrollView.bounds.size.width) {

        _pageControl.currentPage = self.rightImageIndex;

        _titleLabel.text = _titleDataArray[self.rightImageIndex];

    } else if (scrollViewOffset.x <  * _mainScrollView.bounds.size.width) {

        _pageControl.currentPage = self.leftImageIndex;

        _titleLabel.text = _titleDataArray[self.leftImageIndex];
    }

    else {
        _pageControl.currentPage = self.currentImageIndex;

        _titleLabel.text = _titleDataArray[self.currentImageIndex];
    }
}
           

效果

ios圖檔輪播效果

代碼位址如下：

http://www.demodashi.com/demo/11959.html

注：本文著作權歸作者，由demo大師發表，拒絕轉載，轉載需要作者授權