拿走即用之傻瓜式图片轮播器

作者: 鹿丸眼中的云 | 来源:发表于2016-03-10 17:07 被阅读669次

用法 (作者离职,求一份工作)

  • 只需要一个urlString数组,即可从后端服务器获取图片,并实现图片轮播

先看看效果

优化版图片浏览器.gif

使用条件

  • 先导入SD_WebImage框架
  • 将WHCircleImageView、WHCirCleImageViewCell类导入项目(具体代码见下面)

代码

  • WHCircleImageView.h
#import <UIKit/UIKit.h>

@interface WHCircleImageView : UICollectionView


//提供一个接口
-(instancetype)initWithFrame:(CGRect)frame AndImageUrlArray:(NSArray *)ImageUrlArray view:(UIView *)view;
@end
  • WHCircleImageView.m

#import "WHCircleImageView.h"
#import "WHCirCleImageViewCell.h"
#import "UIImageView+WebCache.h"

//多少秒翻动一次图片
#define changeImageTime 1.5
//pageControl的中心点位置
#define pageControlPosition CGPointMake(CGRectGetMaxX(frame)/2, CGRectGetMaxY(frame)-20)

@interface WHCircleImageView ()<UICollectionViewDelegate,UICollectionViewDataSource>
//接受传来的ImageUrlArray
@property(nonatomic,strong)NSArray *ImageUrlArray;
//存储下载的图片
@property(nonatomic,strong)NSArray *imageViewArray;
// 当前显示图片的索引
@property (nonatomic, assign) NSInteger currentIndex;
//提供一个timer,让其自动循环播放
@property(nonatomic,strong)NSTimer *timer;
//全局属性图片滚动到的位置
@property (nonatomic,assign)NSInteger index;

@property (nonatomic,strong)UIPageControl * page;
@end

@implementation WHCircleImageView


-(instancetype)initWithFrame:(CGRect)frame AndImageUrlArray:(NSArray *)ImageUrlArray view:(UIView *)view{
    
    //创建流水布局
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    layout.itemSize = CGSizeMake(frame.size.width, frame.size.height);
    layout.minimumInteritemSpacing = 0;
    layout.minimumLineSpacing = 0;
    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    
    //创建collectionView
    self = [[WHCircleImageView alloc] initWithFrame:frame collectionViewLayout:layout];
    //注册cell
    [self registerClass:[WHCirCleImageViewCell class] forCellWithReuseIdentifier:@"circle"];
    
    self.pagingEnabled = YES;
    self.showsHorizontalScrollIndicator = NO;

    self.delegate =self;
    self.dataSource = self;

    [self addTimer];
    
    self.index = self.ImageUrlArray.count*30;
    
    NSIndexPath * indexPath = [NSIndexPath indexPathForItem:self.index inSection:0];
    
    //默认一开始滚动到第1000张图片的位置
    [self scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionNone animated:YES];

    self.ImageUrlArray = ImageUrlArray;
    
    //添加pageController
    UIPageControl * page = [self createPage];
    
    //根据图片张数获取page的宽高
    CGSize  pageSize = [page sizeForNumberOfPages:self.ImageUrlArray.count];
    page.frame = CGRectMake(0, 0, pageSize.width, pageSize.height);
    page.center = pageControlPosition;
    self.page = page;
   
    
    [view addSubview:self];
    [view addSubview:page];
    return self;
}

//计时器的方法 自动滚动图片
-(void)changeImage
{
    //调用计时器方法是 让图片索引++ 滚动图片
    self.index++;
    
    NSIndexPath *indexpath = [NSIndexPath indexPathForItem:self.index inSection:0];
    
    [self scrollToItemAtIndexPath:indexpath atScrollPosition:UICollectionViewScrollPositionNone animated:YES];
    
    self.page.currentPage = self.index%self.imageViewArray.count;
}

// MARK:数据源方法

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{

    return 30000;
}

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    
    WHCirCleImageViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"circle" forIndexPath:indexPath];
    
    //取出图片赋值给cell
    cell.UrlimageView = self.imageViewArray[indexPath.item%self.imageViewArray.count];
    
    return cell;
}
//当手指拖动图片时
-(void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView
{
    [self deleteTimer];
}

//滚动结束之后发送通知 让控制器接收通知 设置page的当前页数
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    NSInteger index = scrollView.contentOffset.x/scrollView.bounds.size.width;
    
    self.index = index;
    
    self.page.currentPage = self.index%self.imageViewArray.count;
    
    [self addTimer];
}
-(void)addTimer
{
    NSTimer * timer = [NSTimer scheduledTimerWithTimeInterval:changeImageTime target:self selector:@selector(changeImage) userInfo:nil repeats:YES];
    
    //添加到运行循环
    [[NSRunLoop currentRunLoop] addTimer:timer forMode:NSDefaultRunLoopMode];
    
    self.timer = timer;
}

-(void)deleteTimer
{
    [self.timer invalidate];
    
    self.timer = nil;
}

//创建pageControl
-(UIPageControl *)createPage
{
    //初始化方法
    UIPageControl * page = [[UIPageControl alloc]init];
    
    page.currentPage = 0;
    
    page.numberOfPages = self.ImageUrlArray.count;
    
    page.currentPageIndicatorTintColor = [UIColor orangeColor];
    
    page.pageIndicatorTintColor = [UIColor cyanColor];
    
    return page;
    
}

//当手指拖动图片时
//懒加载
-(NSArray *)imageViewArray{
    
    NSMutableArray *tempArray = [NSMutableArray arrayWithCapacity:self.ImageUrlArray.count];
    for (int i = 0; i < [_ImageUrlArray count]; i++) {
        NSString *imageUrl = self.ImageUrlArray[i];
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:self.frame];
        UIImage *image = [UIImage imageNamed:@"new_feature_finish_button_highlighted"];
        [imageView sd_setImageWithURL:[NSURL URLWithString:imageUrl] placeholderImage:image];
        [tempArray addObject:imageView];
    }
    
    return tempArray;
}
@end
  • WHCirCleImageViewCell.h
#import <UIKit/UIKit.h>

@interface WHCirCleImageViewCell : UICollectionViewCell
//接受外部的图片
@property(nonatomic,strong)UIImageView *UrlimageView;
@end
  • WHCirCleImageViewCell.m
#import "WHCirCleImageViewCell.h"

@interface WHCirCleImageViewCell ()

@property(nonatomic,strong)UIImageView *imageView;

@end

@implementation WHCirCleImageViewCell

-(void)setUrlimageView:(UIImageView *)UrlimageView{

    _UrlimageView = UrlimageView;
    self.imageView = UrlimageView;
    [self.contentView addSubview:UrlimageView];

}
@end
  • Controller中掉用
#import "ViewController.h"
#import "WHCircleImageView.h"

#define Application_Frame       [[UIScreen mainScreen] bounds]

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    NSArray *testArr = @[@"http://img4.duitang.com/uploads/item/201303/17/20130317090104_jF8iH.jpeg",@"http://imgsrc.baidu.com/forum/pic/item/0e2442a7d933c895d8064c31d11373f08202007b.jpg",@"http://d.3987.com/Qhyrz_130520/004.jpg"];

    WHCircleImageView *circleImageView = [[WHCircleImageView alloc] initWithFrame:CGRectMake(0, 0, Application_Frame.size.width, 250) AndImageUrlArray:testArr view:self.view];
#pragma 不要再掉用下面方法了,在上面的方法内部已经将circleImageView添加到self.view上过了
//    [self.view addSubview:circleImageView];
}
@end

相关文章

  • 拿走即用之傻瓜式图片轮播器

    用法 (作者离职,求一份工作) 只需要一个urlString数组,即可从后端服务器获取图片,并实现图片轮播 先看看...

  • 沉浸式渐变图片轮播器

    沉浸式渐变图片轮播器 沉浸式渐变图片轮播器

  • 个人博客—轮播器

    个人博客—轮播器 轮播器自动轮播,每张图片淡入淡出 控制按钮和图片描述跟随图片轮播 鼠标悬停图片上方则停止轮播,滑...

  • 无限图片轮播器 --- Objective-C

    KNBannerView 无限循环轮播器:本地图片,网络图片(图片缓存) 一.功能描述及要点 1.无限图片轮播器,...

  • iOS,图片轮播器 SwpBanner

    iOS,图片轮播器 SwpBanner SwpBanner 图片轮播器, 在 App 开发中常用的一组控件, 苹果...

  • 常用三方 SDCycleScrollView轮播图

    iOS图片、文字轮播器Git/SDCycleScrollView 滚动轮播图片、文字、可使用本地图片或加载网络图片...

  • 广告

    广告轮播: // // ViewController.m // 10-图片轮播器 // // Created by...

  • 无限循环图片、文字轮播器 SDCycleScrollView

    无限循环图片、文字轮播器。

  • 图片轮播器

    前言 图片轮播是一个非常常见的效果,项目中经常遇到。虽然不是很复杂,但实现起来代码也不少,写过几次后就想一劳永逸,...

  • 图片轮播器

    简介图片轮播器这个概念,想必大家都不陌生。它活跃在各式各样的手机App中。 利用UIScrollView实现无限滚...

网友评论

    本文标题:拿走即用之傻瓜式图片轮播器

    本文链接:https://www.haomeiwen.com/subject/ipptlttx.html