循环 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.
- @interface BannerView : UIView
- // 给外部一个类方法 1. 由外部决定在 scrollview 上显示的图片 2. 显示的尺寸
- +(BannerView *)bannerWithImages:(NSArray *)images frame:(CGRect)frame;
- @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, 这个视图后面还要使用, 因此定义为属性变量.
- @property (nonatomic ,strong)UIScrollView *scrollview;
- // 在 init 方法里面布局界面
- -(instancetype)initWithFrame:(CGRect)frame{
- if (self = [super initWithFrame:frame]) {
- //scrollview 的 frame 跟 bannerview 的一样
- self.scrollview = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, kWidth, kHeight)];
- // 设置 scrollview 的属性
- _scrollview.bounces = NO;
- _scrollview.showsHorizontalScrollIndicator = NO;
- // 这里 contentsize 应为三个视图的总 size
- _scrollview.contentSize = CGSizeMake(kWidth*3, kHeight);
- _scrollview.pagingEnabled = YES;
- [self addSubview:_scrollview];
- }
- return self;
- }
接下来创建三个图片视图, 当作循环的容器.
- // 创建三个图片视图
- @property (nonatomic ,strong)UIImageView *left;
- @property (nonatomic ,strong)UIImageView *middle;
- @property (nonatomic ,strong)UIImageView *right;
还要设置这三个图片视图在 scrollview 上的偏移值. 每创建一个 imageview 都要写的代码, 就将它提出去成为一个方法.
- // 创建一个方法设置 imageview 的位置
- -(UIImageView *)imageViewWithOffset:(CGFloat)offsetx{
- UIImageView *imgview = [[UIImageView alloc]initWithFrame:CGRectMake(offsetx, 0, kWidth, kHeight)];
- // 设置图片视图的图片填充方式
- imgview.contentMode = UIViewContentModeScaleAspectFit;
- [self addSubview:imgview];
- return imgview;
- }
在 initwithframe 方法里面创建三个图片视图
- // 创建三个图片视图 根据视图所在位置把他们加到 scrollview 上去
- self.left = [self imageViewWithOffset:0];
- self.middle = [self imageViewWithOffset:kWidth];
- self.right = [self imageViewWithOffset:2*kWidth];
来源: http://www.bubuko.com/infodetail-3004967.html