今天我给大家分享一个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 欢迎加入 欢迎讨论问题