iOS 图片滚动播放

今天我给大家分享一个iOS中滚浏览图片的方法

首先我们看下要实现的效果

中间图片主要显示，左右两边图片作为次要显示，主图片正常显示。次要图片放小，带一定透明度显示

我们会使用一个第三方的类  

SBPageFlowView

这个类大家可以在源代码中看到（源代码下载地址见本文最下边）

我们首先在Xcode中新建一个项目

项目名称：TestPageFlow

首先我们将源代码中的类SBPageFlowVIew 拖动到项目目录中 在出现的对话框勾选 Copy Items if needed

完成后 项目结构如下图

然后我们只需要在需要添加图片试图的VIewController 中导入SBPageFlowView即可使用

这里我们就在项目默认生成的ViewController中添加图片视图

#import "SBPageFlowView.h"

接下来我们创建一个数组变量用来存储需要显示的图片

    NSArray *_imageArray;

我们在 VIewDidLoad中初始化上边声明的用于存储图片的数组以及 创建SBPageFlowVIew的对象添加到VIewController的视图上

首先我们给ViewController实现两个协议

@interface ViewController ()<SBPageFlowViewDataSource,SBPageFlowViewDelegate>

接下来我们创建视图

代码如下

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    SBPageFlowView *imageUserView;
    
    
    
    _imageArray = @[@"1.png",@"2.png",@"3.png",@"4.png",@"5.png"];
    
    imageUserView=[[SBPageFlowView alloc] initWithFrame:CGRectMake(0, 120, 320, 320)];
    imageUserView.delegate=self;
    imageUserView.dataSource=self;
    imageUserView.minimumPageAlpha=0.2;
    imageUserView.minimumPageScale=0.8;
    imageUserView.defaultImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"1.jpg"]];
    [imageUserView reloadData];

    [self.view addSubview:imageUserView];
}

数据方面大家记得找几张图片 放到项目中 图片的具体名字和我们数组定义时候的名字一致即可

  _imageArray = @[@"1.png",@"2.png",@"3.png",@"4.png",@"5.png"];

我们主要说下SBpageFlowView的几个属性

    imageUserView.delegate=self;

    imageUserView.dataSource=self;

以上两个是两个代理 分别用来控制数据以及视图 我们在下边说

    imageUserView.minimumPageAlpha=0.2;

用来控制左右两个次要图片的透明度 值越小 越透明  当为0时完全透明 为1时不透明

    imageUserView.minimumPageScale=0.8;

用来控制左右两个次要图片的大小 值越小 图片显示越小， 当为0时图片消失不现实  为1时按照默认大小显示

    imageUserView.defaultImageView = [[UIImageViewalloc] initWithImage:[UIImageimageNamed:@"1.jpg"]];

设置默认图片

    [imageUserView reloadData];

刷新数据

以上类容完成之后只是显示出来了，数据以及图片试图还需要看我们刚才没有说的两个代理方法

具体每个代理方法的所实现的类容我们见代码

我们先看下 dataSource 对应的代理方法

#pragma mark - PagedFlowView Datasource
//返回显示View的个数
- (NSInteger)numberOfPagesInFlowView:(SBPageFlowView *)flowView{
    return [_imageArray count];
}

//返回图片的默认大小
- (CGSize)sizeForPageInFlowView:(SBPageFlowView *)flowView;{
    return CGSizeMake(120, 120);
}

//返回给某列使用的View
- (UIView *)flowView:(SBPageFlowView *)flowView cellForPageAtIndex:(NSInteger)index{
    UIImageView *imageView = (UIImageView *)[flowView dequeueReusableCell];
    if (!imageView) {
        imageView = [[UIImageView alloc] init];
        imageView.layer.masksToBounds = YES;
    }
    
    imageView.image = [UIImage imageNamed:[_imageArray objectAtIndex:index]];
    return imageView;
}

再看下 delegate 对应的代理方法

#pragma mark - PagedFlowView Delegate

//设置每个位置的图片
- (void)didReloadData:(UIView *)cell cellForPageAtIndex:(NSInteger)index
{
    UIImageView *imageView = (UIImageView *)cell;
    imageView.image = [UIImage imageNamed:[_imageArray objectAtIndex:index]];
}
//返回当前滑动到的图片是第几个位置
- (void)didScrollToPage:(NSInteger)pageNumber inFlowView:(SBPageFlowView *)flowView {
    NSLog(@"Scrolled to page # %d", pageNumber);
//    _currentPage = pageNumber;
}
//设置当点击了正在显示的图片之后所响应的方法
- (void)didSelectItemAtIndex:(NSInteger)index inFlowView:(SBPageFlowView *)flowView
{
    NSLog(@"didSelectItemAtIndex: %d", index);
    
    UIAlertView  *alert = [[UIAlertView alloc] initWithTitle:@""
                                                     message:[NSString stringWithFormat:@"您当前选择的是第 %d 个图片",index]
                                                    delegate:self
                                           cancelButtonTitle:@"确定"
                                           otherButtonTitles: nil];
    [alert show];
    
}

完成以上方法之后基本上就能看到图片显示的效果了 

我们运行项目 看看 效果

好了，我们就简单说到这里 功能基本已经实现  如果大家想更深入的了解 第三方类 或者想有更好的实现欢迎加群，同时我们的源代码也会上传到群空间

源代码 名称：【51113图片滚动浏览】  

欢迎大家加入

苹果开发群 ：492222303  欢迎加入  欢迎讨论问题