iOS实现三屏复用循环广告[从服务器请求的广告]
循环广告我们在开发中已经是熟得不能再熟了,今天整理这篇scrollview三屏复用广告
原理使用scrollview里的三个imageview分别去加载不同的图片,用少量的资源来显示大量或不确定的广告数量,不然如果用普通方法实现广告,难道10个广告用12个scrollview的contentsize去做,岂不是太浪费资源了
代码如下,实现所有数量的循环广告,当广告只有一个时,仅采用单图显示,>=2个广告时,自动采用三屏复用
这里添加图片的方式是通过网络请求,更新服务器上的广告,如果仅使用本地广告,可以将.m文件里的全部图片的添加方式
如:
self.endImageView.image = self.imageArray[endImageCount];
修改为
self.endImageView.image = [UIImage imageNamed:self.imageArray[endImageCount]];
然后在使用该类时,直接将本地图片的名字用数组传过去就行了,如
cview.imageArray = [[NSMutableArray alloc]initWithObjects:@"图片1",@"图片2",@"图片3", nil];
或者不改则使用方法如
NSArray *imageArr = [[NSArray alloc]initWithObjects:@"banner_理财.jpg",@"banner_惠普",@"banner_炒股", nil];
for (int i=0; i<3; i++) {
UIImage *cirImage1 = [UIImage imageNamed:imageArr[i]];
[cirScrollView.imageArray addObject:cirImage1];
}
如果图片给的是地址那可以用imageWithURL这个方法来获取图片
下面讲从服务器获取的广告方式,请求服务器图片及解析这里就不讲了,仅从获取到的data数据后开始
先新建一个类继承UIView,
.h里
1 #import <UIKit/UIKit.h> 2 3 @interface CirculateScrollview : UIView 4 5 @property (nonatomic,strong)NSMutableArray *imageArray;//图片数组 6 @property (nonatomic,strong)UIScrollView *circulateScrollView;//广告 7 8 /* 9 三屏复用广告 10 适用范围:网络请求或固定本地的广告图片 11 适用所有数量广告,广告>=2时自动采用三屏复用技术 12 使用方法:例 13 在需要添加广告的控制器里面 14 15 CirculateScrollview *cview = [[CirculateScrollview alloc]initWithFrame:CGRectMake(0, 20, 320, 200)]; 16 for (int i=0; i<3; i++) { 17 UIImage *image = [UIImage imageNamed:@"旅行图1"];//传进图片名字方式 18 //UIImage *image = UIImage imageWithData:data];//传进data数据图片方式将服务器请求到的data数据图片转换成image形式再传输 19 [cview.imageArray addObject:image]; 20 } 21 [self.view addSubview:cview]; 22 23 */ 24 25 26 /* 27 图片转换NSData方法 28 测试可用 29 NSData * data = UIImageJPEGRepresentation(image, 1); 30 */ 31 32 @end
.m文件里
实现方法是这三个成员变量,用来读取传输过来的图片在数组中的位置,三屏复用里,我们显示的位置是scrollview的中间位置,左边广告是全部广告的最后一个,中间显示第一个,右边的显示第二个,然后根据左滑成员变量递增,当变量递增到超过广告总数时,重新赋值第一个广告,而右滑递减,递减至-1时,即不在数组范围时,重新赋值广告数组的最后一个
1 #import "CirculateScrollview.h" 2 3 #define ViewWidth self.frame.size.width 4 #define ViewHeight self.frame.size.height 5 #define AllImageCount self.imageArray.count-1 6 7 @interface CirculateScrollview()<UIScrollViewDelegate> 8 { 9 NSInteger endImageCount;//左边图片 10 NSInteger oneImageCount;//中间图片[当前看到的图片] 11 NSInteger secondImageCount;//右边图片 12 } 13 @property (nonatomic,strong)UIImageView *endImageView; 14 @property (nonatomic,strong)UIImageView *oneImageView; 15 @property (nonatomic,strong)UIImageView *secondImageView; 16 @property (nonatomic,strong)UIPageControl *pageCtl; 17 18 @end 19 20 @implementation CirculateScrollview 21 22 23 -(id)initWithFrame:(CGRect)frame 24 { 25 self = [super initWithFrame:frame]; 26 if (self) { 27 28 } 29 return self; 30 } 31 32 -(NSMutableArray *)imageArray 33 { 34 if (!_imageArray) { 35 _imageArray = [[NSMutableArray alloc]init]; 36 } 37 return _imageArray; 38 } 39 40 - (void)drawRect:(CGRect)rect { 41 self.circulateScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, ViewWidth, ViewHeight)]; 42 43 endImageCount = self.imageArray.count-1; 44 oneImageCount = 0; 45 secondImageCount = 1; 46 47 self.circulateScrollView.showsHorizontalScrollIndicator = NO; 48 self.circulateScrollView.pagingEnabled = YES; 49 self.circulateScrollView.delegate = self; 50 self.circulateScrollView.bounces = NO; 51 52 self.circulateScrollView.contentOffset = CGPointMake(ViewWidth, 0); 53 54 self.backgroundColor = [UIColor whiteColor]; 55 56 if (!self.imageArray.count) { 57 NSLog(@"图片数组为空"); 58 return; 59 } 60 61 62 //若广告数量少于2张则不采用三屏复用技术 63 if (self.imageArray.count<=1){ 64 self.circulateScrollView.contentSize = CGSizeMake(ViewWidth, ViewHeight); 65 66 self.endImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, ViewWidth, ViewHeight)]; 67 self.endImageView.image = self.imageArray[endImageCount]; 68 [self.circulateScrollView addSubview:self.endImageView]; 69 [self addSubview:self.circulateScrollView]; 70 71 }else{ 72 self.circulateScrollView.contentSize = CGSizeMake(ViewWidth*3, ViewHeight); 73 74 //左 75 self.endImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, ViewWidth, ViewHeight)]; 76 self.endImageView.image = self.imageArray[endImageCount]; 77 [self.circulateScrollView addSubview:self.endImageView]; 78 //中 79 self.oneImageView = [[UIImageView alloc]initWithFrame:CGRectMake(ViewWidth, 0, ViewWidth, ViewHeight)]; 80 self.oneImageView.image = self.imageArray[oneImageCount]; 81 [self.circulateScrollView addSubview:self.oneImageView]; 82 //右 83 self.secondImageView = [[UIImageView alloc]initWithFrame:CGRectMake(ViewWidth*2, 0, ViewWidth, ViewHeight)]; 84 self.secondImageView.image = self.imageArray[secondImageCount]; 85 [self.circulateScrollView addSubview:self.secondImageView]; 86 87 88 [self addSubview:self.circulateScrollView]; 89 [self pageNumControl]; 90 } 91 92 } 93 //添加页符 94 -(void)pageNumControl 95 { 96 self.pageCtl = [[UIPageControl alloc]initWithFrame:CGRectMake(0, ViewHeight-20, ViewWidth, 20)]; 97 self.pageCtl.backgroundColor = [UIColor lightGrayColor]; 98 self.pageCtl.currentPageIndicatorTintColor = [UIColor greenColor]; 99 self.pageCtl.pageIndicatorTintColor = [UIColor whiteColor]; 100 self.pageCtl.alpha = 0.7; 101 self.pageCtl.numberOfPages = AllImageCount+1; 102 [self addSubview:self.pageCtl]; 103 } 104 105 -(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView 106 { 107 if (scrollView.contentOffset.x == 0) { 108 endImageCount--; 109 oneImageCount--; 110 secondImageCount--; 111 if (endImageCount<0) { 112 endImageCount = AllImageCount; 113 }else if (oneImageCount<0){ 114 oneImageCount = AllImageCount; 115 } 116 //适配2张图片 117 if (secondImageCount<0){ 118 secondImageCount = AllImageCount; 119 } 120 //NSLog(@"endImageCount=%ld oneImageCount=%ld secondImageCount=%ld",endImageCount,oneImageCount,secondImageCount); 121 122 }else if(scrollView.contentOffset.x == ViewWidth*2){ 123 endImageCount++; 124 oneImageCount++; 125 secondImageCount++; 126 if (endImageCount>AllImageCount) { 127 endImageCount = 0; 128 }else if (oneImageCount>AllImageCount){ 129 oneImageCount = 0; 130 } 131 //适配2张图片 132 if (secondImageCount>AllImageCount){ 133 secondImageCount = 0; 134 } 135 } 136 //重新加载显示当前位置的图片 137 scrollView.contentOffset = CGPointMake(ViewWidth, 0); 138 self.endImageView.image = self.imageArray[endImageCount]; 139 self.oneImageView.image = self.imageArray[oneImageCount]; 140 self.secondImageView.image = self.imageArray[secondImageCount]; 141 self.pageCtl.currentPage = oneImageCount; 142 } 143 144 @end