节省内存的循环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（一）

最新文章

热门文章