enjoysr / espicturebrowser Goto Github PK

View Code? Open in Web Editor NEW

340.0 7.0 56.0 30.26 MB

一个集成简单交互效果不错的图片浏览器😄

License: MIT License

Ruby 1.84% Objective-C 98.16%

espicturebrowser's Introduction

ESPictureBrowser

类似于<即刻>应用的图片浏览器效果

支持 iOS 8 及以上

效果图

集成方式

cocoapod

pod 'ESPictureBrowser'

使用方式

初始化并显示

/**
 显示图片浏览器

 @param fromView            用户点击的视图
 @param picturesCount       图片的张数
 @param currentPictureIndex 当前用户点击的图片索引
 */
- (void)showFromView:(UIView *)fromView picturesCount:(NSInteger)picturesCount currentPictureIndex:(NSInteger)currentPictureIndex

实现代理方法

/**
 获取对应索引的视图
 
 @param pictureBrowser 图片浏览器
 @param index          索引
 
 @return 视图
 */
- (UIView *)pictureView:(ESPictureBrowser *)pictureBrowser viewForIndex:(NSInteger)index {
    ...
}

/**
 获取对应索引的图片大小
 
 @param pictureBrowser 图片浏览器
 @param index          索引
 
 @return 图片大小
 */
- (CGSize)pictureView:(ESPictureBrowser *)pictureBrowser imageSizeForIndex:(NSInteger)index {
    ...
}

/**
 获取对应索引默认图片，可以是占位图片，可以是缩略图
 
 @param pictureBrowser 图片浏览器
 @param index          索引
 
 @return 图片
 */
- (UIImage *)pictureView:(ESPictureBrowser *)pictureBrowser defaultImageForIndex:(NSInteger)index {
    ...
}

/**
 获取对应索引的高质量图片地址字符串
 
 @param pictureBrowser 图片浏览器
 @param index          索引
 
 @return 图片的 url 字符串
 */
- (NSString *)pictureView:(ESPictureBrowser *)pictureBrowser highQualityUrlStringForIndex:(NSInteger)index {
    ...
}

其他配置

/**
 图片之间的间距，默认： 20
 */
@property (nonatomic, assign) CGFloat betweenImagesSpacing;

/**
 页数文字中心点，默认：居中，中心 y 距离底部 20
 */
@property (nonatomic, assign) CGPoint pageTextCenter;

/**
 页数文字字体，默认：系统字体，16号
 */
@property (nonatomic, strong) UIFont *pageTextFont;

/**
 页数文字颜色，默认：白色
 */
@property (nonatomic, strong) UIColor *pageTextColor;

/**
 长按图片要执行的事件，将长按的索引回调
 */
@property (nonatomic, copy) void(^longPressBlock)(NSInteger);

具体见上面 Demo

其他

不存在<即刻 v2.7.0>中的图片放大之后，拖动消失的 Bug，具体 bug 见效果图：

TODO

加载图片进度效果（已搞定）

License

MIT

espicturebrowser's People

Contributors

Stargazers

Watchers

espicturebrowser's Issues

关于 - (CGSize)pictureView:(ESPictureBrowser *)pictureBrowser imageSizeForIndex:(NSInteger)index

此方法在大多数情况下可用，但当加载的是网络图片时无法预知大小导致不能正确显示。个人建议加载完后再根据图片大小自行设置。

浏览图片时隐藏状态栏

浏览图片的时候隐藏状态栏效果更好。有一些图片是手机截屏，浏览时和状态栏重合的，看着很不舒服

我创建了一个基于SDWebImage的版本,不知道作者是否允许?

https://github.com/shenguanjiejie/ESPictureBrowser-SDWebImage

您好！第一次点击小图弹出正常，点击图片dismiss之后再次点击小图，小图也会出现在屏幕上，点击大图使其dismiss没有了动画效果。
代码如下：
`_taskImgThumbnail = [[UIImageView alloc] init];
//先截取原图正方形图片，再转化为200宽缩略图，转化为50的话图片模糊
_taskImgThumbnail.image = [self thumbnailWithImage:[self thumbnailCenterImage:[UIImage imageNamed:@"IMG_0065"] centerInSize:CGSizeMake([UIImage imageNamed:@"IMG_0065"].size.width, [UIImage imageNamed:@"IMG_0065"].size.width)] size:CGSizeMake(200,200)];
[self.view addSubview:_taskImgThumbnail];
[_taskImgThumbnail mas_makeConstraints:^(MASConstraintMaker make) {
make.centerX.equalTo(taskImgTip);
make.top.equalTo(taskImgTip.bottom).offset(7WIDTHRATE);
make.size.equalTo(CGSizeMake(50WIDTHRATE, 50WIDTHRATE));
}];

_tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(taskImgTapEvent:)];
_tap.delegate = self;
_taskImgThumbnail.userInteractionEnabled = YES;
[_taskImgThumbnail addGestureRecognizer:_tap];

_picBrowser = [[ESPictureBrowser alloc] init];
_picBrowser.delegate = self;

#pragma mark -- 点击手势触发的事件

(void)taskImgTapEvent:(UITapGestureRecognizer *)pan{
NSLog(@"dianji");
[_picBrowser showFromView:_taskImgThumbnail picturesCount:1 currentPictureIndex:0];
}

#pragma mark - 图片查看

(UIView *)pictureView:(ESPictureBrowser )pictureBrowser viewForIndex:(NSInteger)index {
return _taskImgThumbnail;
}
/
(CGSize)pictureView:(ESPictureBrowser )pictureBrowser imageSizeForIndex:(NSInteger)index {
return CGSizeMake(DEVICEWIDTH, DEVICEHEIGHT);
}/
(UIImage *)pictureView:(ESPictureBrowser *)pictureBrowser defaultImageForIndex:(NSInteger)index {
return [UIImage imageNamed:@"pic01"];
}
(NSString *)pictureView:(ESPictureBrowser *)pictureBrowser highQualityUrlStringForIndex:(NSInteger)index {
return @"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490603248787&di=34c3c9dbbfc54f7f004977c5ae716b3e&imgtype=0&src=http%3A%2F%2Fbbs.crsky.com%2F1236983883%2FMon_1208%2F25_187069_d3846bd52f4f0fa.jpg";
}`

初始界面

第一次点击小图弹出

第二次点击小图弹出

滑动dismiss时

滑动dismiss后再弹出