Code Monkey home page Code Monkey logo

ksphotobrowser's Introduction

KSPhotoBrowser

License MIT  CocoaPods  CocoaPods  Support 

A beautiful photo browser with interactive dismissal animation.

Rotation~ Blur~ Scale~ Corner~ Orientation~ Index~

Features

  • 4 different interactive dismissal animations (Rotation, Scale, Slide)
  • 3 different background styles (Blur Photo, Blur, Black)
  • 2 different loading styles (Determinate, Indeterminate)
  • 2 different pager styles (Dot, Text)
  • Support bounce animation
  • Optimized for image which has a very large height
  • Can display one or more images by providing either image urls or UIImage objects
  • Custom image downloader library support
  • Smooth animation with corner radius
  • Support both portrait and landscape device orientation
  • Support video browse

Usage

Display images from urls

NSArray *urls = @[@"https://ww4.sinaimg.cn/bmiddle/a15bd3a5jw1f12r9ku6wjj20u00mhn22.jpg",
                  @"https://ww2.sinaimg.cn/bmiddle/a15bd3a5jw1f01hkxyjhej20u00jzacj.jpg"];
NSMutableArray *items = @[].mutableCopy;
for (int i = 0; i < urls.count; i++) {
    // Get the large image url
    NSString *url = [urls[i] stringByReplacingOccurrencesOfString:@"bmiddle" withString:@"large"];
    UIImageView *imageView = _imageViews[i];
    KSPhotoItem *item = [KSPhotoItem itemWithSourceView:imageView imageUrl:[NSURL URLWithString:url]];
    [items addObject:item];
}
KSPhotoBrowser *browser = [KSPhotoBrowser browserWithPhotoItems:items selectedIndex:0];
[browser showFromViewController:self];

Display images from UIImage objects

NSArray *names = @[@"a.jpg", @"b.jpg"];
NSMutableArray *items = @[].mutableCopy;
for (int i = 0; i < names.count; i++) {
    UIImageView *imageView = _imageViews[i];
    KSPhotoItem *item = [KSPhotoItem itemWithSourceView:imageView image:[UIImage imageNamed:names[i]]];
    [items addObject:item];
}
KSPhotoBrowser *browser = [KSPhotoBrowser browserWithPhotoItems:items selectedIndex:0];
[browser showFromViewController:self];

Installation

Cocoapods

  1. Update cocoapods to the latest version.
  2. Add pod 'KSPhotoBrowser' to your Podfile.
  3. Run pod install or pod update.
  4. Import KSPhotoBrowser.h.

Manually

  1. Download all the files of KSPhotoBrowser and add source files to your project.
  2. Manually install SDWebImage to your project.
  3. Import KSPhotoBrowser.h.

Custom Image Downloader

It use SDWebImage as default image downloader, you can also use your custom image downloader like YYWebImage, Kingfisher and so on.

To use a custom image downloader, you need to create a class and make it conforms to KSImageManagerProtocol and implement those methods inside that protocol.

For convenience, I have already created KSYYImageManager to support YYWebImage as an example in the demo, you can also use it directly.

Finally, just use the code below to set your class to KSPhotoBrowser before you use the browser to show images.

[KSPhotoBrowser setImageManagerClass:KSYYImageManager.class]

Requirements

This library requires iOS 8.0+ and Xcode 8.0+.

License

KSPhotoBrowser is provided under the MIT license. See LICENSE file for details.

ksphotobrowser's People

Contributors

skx926 avatar spnkr avatar tinlinz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ksphotobrowser's Issues

源UIImageView有圆角的问题

当源UIImageView有圆角时,消失动画就会造成回去时,先方、后圆。

有几个解决办法:
1.在KSPhotoBrowser增加圆角属性,消失动画之前,检查这个属性再处理消失动画。
2.在KSPhotoBrowserDelegate增加代理方法,消失之前,调用这个方法。
3.在KSPhotoItem增加圆角属性,消失动画之前,检查这个属性再处理消失动画。

在ipad上直接崩溃

Terminating app due to uncaught exception 'NSGenericException', reason: 'Your application has presented a UIAlertController (<UIAlertController: 0x12e846e00>) of style UIAlertControllerStyleActionSheet. The modalPresentationStyle of a UIAlertController with this style is UIModalPresentationPopover. You must provide location information for this popover through the alert controller's popoverPresentationController. You must provide either a sourceView and sourceRect or a barButtonItem. If this information is not known when you present the alert controller, you may provide it in the UIPopoverPresentationControllerDelegate method -prepareForPopoverPresentation.'

图片还原上移

[self.navigationController setNavigationBarHidden:YES animated:NO];
隐藏导航 图片返回 会上移再恢复

Swift 项目中使用会有问题,如下

尝试使用 Swift,发现会有问题,我看你在 Demo 中点击 cell 的时候做了一个 for 循环,我转换成 Swift 后,在

let cell = collectionView.cellForItem(at: IndexPath(row: i, section: 0)) as? JJRHouseCommentListPhotoCell

获取当前可见 cell 的时候,有可能返回为 nil(如该 cell 不在屏幕的时候),此时我如果构造 KSPhotoItem,就必须给 cell?.imageView 强制解包(因为你方法中不允许传递 nil),但是给 nil 解包就会报错。

let item = KSPhotoItem(sourceView: (cell?.imageView)!, imageUrl: url)

我也尝试,如果 cell 为空的话,我就不构造 KSPhotoItem,但是这样一来,预览图片的个数就对不上实际图片了,如何解决呢?

关于视图消失的问题

楼主你的demo是for循环创建的imageview。但是我的是用collectionview当我点击第一张图片,然后滑动滑动滑动到第三张,点击dismiss的时候视图会回到第一张,而不是第三张

Consider abstracting the download logic into a protocol

Hey there,

What do you think of abstracting the YYWebImage implementation to download an image into a protocol?

In my project, I'm using Kingfisher as my image downloader lib. I would like KSPhotoBrowser to use Kingfisher, because it manages the image cache for me. I don't want YYWebImage to redownload the image when I already have it cached previously.

A protocol which I can conform to would be perfect for me. KSPhotoBrowser could continue using YYWebImage by default, but if I provide my custom implementation, it should use that instead.

I understand you're using YYWebImage for the blur as well, which is perfectly fine for me. I just want to "plug in" my own image downloading/caching implementation for a better user experience.

What do you think?

KSPhotoBrowser swipe to next photo delegate

The demo app has a number of static views on screen. However my app displays profile images of a user which basically takes the top 40% of the screen. The images are inside of a paginated UIScrollView.

It would be great if I could listen to index changes, so that every time the user swipes left/right when the KSPhotoBrowser is displayed, I can update the scroll position of my paginated UIScrollView.

写的不错,但是我发现如果图片是长图的时候,通过手势拉动图片的退出图片浏览器动画会飞

我提供一组图片链接给你测试

NSArray *urls =  @[
  @"http://ww2.sinaimg.cn/thumbnail/642beb18gw1ep3629gfm0g206o050b2a.gif",
  @"http://ww4.sinaimg.cn/thumbnail/9e9cb0c9jw1ep7nlyu8waj20c80kptae.jpg",
  @"http://ww3.sinaimg.cn/thumbnail/8e88b0c1gw1e9lpr1xydcj20gy0o9q6s.jpg",
  @"http://ww2.sinaimg.cn/thumbnail/8e88b0c1gw1e9lpr2n1jjj20gy0o9tcc.jpg",
  @"http://ww4.sinaimg.cn/thumbnail/8e88b0c1gw1e9lpr4nndfj20gy0o9q6i.jpg",
  @"http://ww3.sinaimg.cn/thumbnail/8e88b0c1gw1e9lpr57tn9j20gy0obn0f.jpg",
  @"http://ww2.sinaimg.cn/thumbnail/677febf5gw1erma104rhyj20k03dz16y.jpg",
  @"http://ww4.sinaimg.cn/thumbnail/677febf5gw1erma1g5xd0j20k0esa7wj.jpg"
  ];

thumbnail 换成 bmiddle 就是高清图了

无法通过delegate方法的item取出image

感谢作者无私开源
但是使用时发现通过KSPhotoBrowserDelegate方法无法拿到通过url加装完毕后的image,KSPhotoItem的image属性未在图片加装完毕后赋值

第一次点进入的图片不会触发代理方法

谢开源

第一次进入图片时不会触发代理方法,原因就是ViewWillAppear方法里没有调用configItemViews方法
暂时在ViewWillAppear方法中手动调用了代理方法,不知作者有没有更好的解决方法

顺便问一下,为什么不再用SD而改用YY

Support for device rotation

Thanks for this photo browser. It is very useful and saved me a lot of time.

Right now the browser only supports device orientation UIInterfaceOrientationMaskPortrait. I would like to be able to rotate the device and support all orientations. Are you planning to add support for device rotation?

这个图片浏览器是否还会更新呢?有一个内存的问题!

1、我从相机中调取本地图片加载到界面,然后使用那个浏览器去点击放大,使用这个KSPhotoBrowser。但是查看内存能涨30多M。然后加载网络图片,点击放大的时候,也是一样,能到40~50M。然后整个项目就达到了130多M,再点就更加高了。这个是不是一个问题?是否有优化的方法?
点击的放大的时候,我的代码是这样的:
UIImageView *imageV = (UIImageView *)tap.view;
NSMutableArray *items = @[].mutableCopy;
for (UIImageView *imagev in self.selectedImageArr) {
KSPhotoItem *item = [KSPhotoItem itemWithSourceView:imagev image:imagev.image];
[items addObject:item];
}

KSPhotoBrowser *browser = [KSPhotoBrowser browserWithPhotoItems:items selectedIndex:imageV.tag];
browser.delegate = self;
browser.dismissalStyle = KSPhotoBrowserInteractiveDismissalStyleScale;
browser.backgroundStyle = KSPhotoBrowserBackgroundStyleBlack;
browser.loadingStyle = KSPhotoBrowserImageLoadingStyleIndeterminate;
browser.pageindicatorStyle = KSPhotoBrowserPageIndicatorStyleText;
browser.bounces = NO;
[browser showFromViewController:_controller];

还请作者指点一二,不胜感激。

当然我也有查询过类似的问题,关于加载高清晰,高像素图片的内存暴涨的问题,如:(http://www.jianshu.com/p/1c9de8dea3ea)但是考虑到您是作者应该更加了解问题所在。盼不吝赐教

#BUG 手势拖动图片消失时图片transform动画BUG

你在手势中改变了ImageView的transform

CGAffineTransform rotation = CGAffineTransformMakeRotation(angle);
CGAffineTransform translation = CGAffineTransformMakeTranslation(0, point.y);
CGAffineTransform transform = CGAffineTransformConcat(rotation, translation);
photoView.imageView.transform = transform;

在你最新的release版本中修改了.

photoView.transform = CGAffineTransformIdentity;

这样设置将解决手势动画时的问题.

photoView.imageView.transform = CGAffineTransformIdentity;

源ImageView和KSPhotoView的问题

当源UIImageViewcontentModeKSPhotoViewcontentMode不一致的时候,就会造成回去动画的突兀。

我的办法是在KSPhotoItem增加一个属性,属性默认值是UIViewContentModeScaleAspectFill,消失动画时检查这个属性,如果不一致,就在动画中改变KSPhotoViewcontentMode

备注:这个问题的由来是超长图问题,长图在显示时,我是按照微博做法,只显示顶部部分长图。
当然,把KSPhotoItemsourceView置空也是个解决办法。

关于3DTouch

目前KSPhotoBrowser的调起方法是:

[KSPhotoBrowser showFromViewController:vc];

如果增加一个参数:是否需要开场动画,就能配合3DTouch使用了,比如

[KSPhotoBrowser showFromViewController:vc appearAnimation:YES];

真机上全屏图片无法拖拽返回

在真机上运行时,如果图片铺满整个屏幕,缩放模式返回的情况下,拖拽无法返回。我把scrollView的bounces关掉还是不行

能否增加一个“查看原图”的功能呢?

由于项目APP里面的图片可能比较大,比如10MB以上。这样的话,浏览的时候先加载的是缩略图,然后如果用户点击“查看原图”再去下载没有压缩的原图。类似于微信聊天里面的“查看原图(4.3M)”这样的功能。

Question about future updates

Hey Kyle thank you for great job!
Do you planning to add Photo name to your viewer?

And can you tell how to exclude YY... pods if Im using SDWebImage?

Big thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.