轮播图相信我们经常遇到，我们一般是通过创建 多张view去并排放到contentview上，但当图片数量多的时候就会出现内存消耗过大的问题
我们现在来讲另一种方法，很简单也就四五十行代码的事
通过三倍宽/高实现scrollview的无限复用，什么原理呢？这里是把在view上放三张图，我们需要展示的永远是中间那张view，只是当视图滚动结束时候不断的更换三张view对应数据源（为什么不在滚动的时候切换呢？这个可以自己思考一下）
效果如下
轮播滚动
首先创建一个view（reScrollView）和xib
xib约束
reScrollView.h
@interface reScrollView : UIView
- (instancetype)initWithFrame:(CGRect)frame andOwner:(UIViewController *)owner;
@property (nonatomic,strong) NSArray *picArray;
@property (nonatomic,strong) NSArray *infoArray;
@end
reScrollView.m
#import "reScrollView.h"
@interface reScrollView ()
@property (weak, nonatomic) IBOutlet UIImageView *leftImageView;
@property (weak, nonatomic) IBOutlet UIImageView *middleImageVIew;
@property (weak, nonatomic) IBOutlet UIImageView *rightImageView;
@property (weak, nonatomic) IBOutlet UILabel *infoLabel;
@property (nonatomic,assign) NSInteger currentPage;
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@end
- (instancetype)initWithFrame:(CGRect)frame andOwner:(UIViewController *)owner{
//可以不把owner传进来，这个很长时间了，后来没有改
if ((self = [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass([self class]) owner:owner options:nil] lastObject])){
owner.automaticallyAdjustsScrollViewInsets = NO;
[self setFrame:frame];
self.currentPage = 0;
}
return self;
}
- (void)layoutSubviews{
[super layoutSubviews];
[self setContOffSet];
//三张图的取值，第一张需要注意放数据源的最后一个，为什么呢?因为比如第一张时我们向右滑应该显示哪一张呢,应该最后一张吧
self.leftImageView.image = [UIImage imageNamed:[self.picArray objectAtIndex:self.picArray.count-1]];
self.middleImageVIew.image = [UIImage imageNamed:[self.picArray objectAtIndex:0]];
self.rightImageView.image = [UIImage imageNamed:[self.picArray objectAtIndex:1]];
self.infoLabel.text = self.infoArray[0];
}
#define CURRENT_INDEX scrollView.contentOffset.x/CGRectGetWidth(scrollView.bounds)
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
if(CURRENT_INDEX>1)
self.currentPage = self.currentPage == self.picArray.count-1?0:self.currentPage+1;
if(CURRENT_INDEX<1)
self.currentPage = self.currentPage == 0?self.picArray.count-1:self.currentPage-1;
NSInteger leftIndex = self.currentPage == 0?self.picArray.count-1:self.currentPage-1;
NSInteger rightIndex = self.currentPage == self.picArray.count -1?0:self.currentPage+1;
//滚动结束后我们要把偏移量归位
[self setContOffSet];
//并重新配置三张view的资源
self.leftImageView.image = [UIImage imageNamed:self.picArray[leftIndex]];
self.middleImageVIew.image = [UIImage imageNamed:self.picArray[self.currentPage]];
self.rightImageView.image = [UIImage imageNamed:self.picArray[rightIndex]];
self.infoLabel.text = self.infoArray[self.currentPage];
}
- (void)setContOffSet{
CGFloat contentSetX = CGRectGetWidth(self.scrollView.bounds);
[self.scrollView setContentOffset:CGPointMake(contentSetX, 0) animated:NO];
}
调用
#import "ResuableViewController.h"
#import "reScrollView.h"
#import "Masonry.h"
@interface ResuableViewController ()
@property (nonatomic,strong)reScrollView *resuableScroll;
@end
@implementation ResuableViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor purpleColor];
self.edgesForExtendedLayout = UIRectEdgeAll;
self.title = @"瑞雪照丰年";
[self setUpView];
}
- (void)setUpView{
self.resuableScroll = [[reScrollView alloc]initWithFrame:CGRectZero andOwner:self];
self.resuableScroll.picArray = @[@"image1.jpg",@"image2.jpg",@"image3.jpg",@"image4.jpg",];
self.resuableScroll.infoArray = @[@"今年过年好天气",@"瑞雪兆丰年",@"头可断,血可流,wifi不能断",@"加把劲儿"];
[self.view addSubview:self.resuableScroll];
[self setConstraint];
}
- (void)setConstraint{
[self.resuableScroll mas_makeConstraints:^(MASConstraintMaker *make) {
make.leading.equalTo(self.view.mas_leading);
make.top.equalTo(self.view.mas_top);
make.trailing.equalTo(self.view.mas_trailing);
make.bottom.equalTo(self.view.mas_bottom);
}];
}
@end
[Demo奥格瑞玛传送门]https://github.com/joy-make/scrollview.git
网友评论