节省内存的循环banner（一）

循环banner是指scrollview首尾相连，循环播放的效果，使用非常广泛。例如淘宝的广告栏等。

如果是简单的做法可以把所有要显示的图片全部放进一个数组里，创建相同个数的图片视图来显示图片。这样的话就很浪费内存。为了节省内存，可以用三个图片视图来显示多个图片。分别取名为left middle right

对于用户来说，永远显示的是middle的图片（例如img1），当用户左划时，left显示middle的图片的上一张图片img0，再趁用户不注意的时候将middle的图片改成img0同时设置scrollview的offset值。

考虑到pagecontrol不能加在scrollview上面，只能加在scrollview的superview上，所以如果要封装这个banner视图的话，就需要一个容器视图来显示全部的scrollview、pagecontrol、imageview。

首先，创建一个类继承于uiview。

我们希望外部使用这个类的时候操作尽可能的简便，直接用一个类方法就能创建一个banner视图。并且外部通过这个类方法的参数来告诉bannerview类他要显示的图片和frame。

1 @interface BannerView : UIView
2 
3 //给外部一个类方法 1.由外部决定在scrollview上显示的图片 2.显示的尺寸
4 +(BannerView *)bannerWithImages:(NSArray *)images frame:(CGRect)frame;
5 
6 
7 @end

在内部，要保存一下需要显示的图片数组

#define kWidth (self.frame.size.width)
#define kHeight (self.frame.size.height)
@interface BannerView()
@property (nonatomic ,strong)NSArray *images;
@end


+(BannerView *)bannerWithImages:(NSArray *)images frame:(CGRect)frame{
    //创建对象
    BannerView *bannerV = [[BannerView alloc]initWithFrame:frame];
    bannerV.backgroundColor = [UIColor grayColor];
    //保存外部传过来的数组
    bannerV.images = images;
    
    return bannerV;
}

接下来在bannerview里面来布局界面。

1.在xib或者storyboard里面创建的界面要在-(void)awakefromnib方法里面来写布局界面的代码。

2.用代码创建的就在-(instancetype)initWithFrame:(CGRect)frame方法里面写代码。

创建一个scrollview，这个视图后面还要使用，因此定义为属性变量。

 1 @property (nonatomic ,strong)UIScrollView *scrollview;
 2 
 3 
 4 //在init方法里面布局界面
 5 -(instancetype)initWithFrame:(CGRect)frame{
 6     if (self = [super initWithFrame:frame]) {
 7         //scrollview 的frame跟bannerview的一样
 8         self.scrollview = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, kWidth, kHeight)];
 9         //设置scrollview的属性
10         _scrollview.bounces = NO;
11         _scrollview.showsHorizontalScrollIndicator = NO;
12         //这里contentsize 应为三个视图的总size
13         _scrollview.contentSize = CGSizeMake(kWidth*3, kHeight);
14         _scrollview.pagingEnabled = YES;
15     
16         [self addSubview:_scrollview];
17     }
18     return self;
19 }

接下来创建三个图片视图，当作循环的容器。

//创建三个图片视图
@property (nonatomic ,strong)UIImageView *left;

@property (nonatomic ,strong)UIImageView *middle;

@property (nonatomic ,strong)UIImageView *right;

还要设置这三个图片视图在scrollview上的偏移值。每创建一个imageview都要写的代码，就将它提出去成为一个方法。

1 //创建一个方法设置imageview的位置
2 -(UIImageView *)imageViewWithOffset:(CGFloat)offsetx{
3     UIImageView *imgview = [[UIImageView alloc]initWithFrame:CGRectMake(offsetx, 0, kWidth, kHeight)];
4     
5     //设置图片视图的图片填充方式
6     imgview.contentMode = UIViewContentModeScaleAspectFit;
7     [self addSubview:imgview];
8     return imgview;
9 }

在initwithframe方法里面创建三个图片视图

1 //创建三个图片视图 根据视图所在位置把他们加到scrollview上去
2         self.left = [self imageViewWithOffset:0];
3         self.middle = [self imageViewWithOffset:kWidth];
4         self.right = [self imageViewWithOffset:2*kWidth];

节省内存的循环banner（一）

猜你喜欢