Git Product home page Git Product logo

hzphotobrowser's Introduction

HZPhotoBrowser

简介

一个类似于新浪微博图片浏览器的框架。

  • 支持显示和隐藏动画。
  • 支持双击缩放,手势放大缩小。
  • 支持横竖屏切换。
  • 支持手势拉动退出,效果类似微博。
  • 支持长图展示。 *支持展示GIF
  • 提供两种展示模式。
  • 适配 iphone X

功能展示

竖屏

image


image

横屏

image


创建图片浏览器

方式1

  • 直接传url数组,然后展示出来。调用方式简单,无需其他控件支持。
  • 具体代码参照 HZRootViewController.m -> - (IBAction)style2:(id)sender方法
HZPhotoBrowser *browser = [[HZPhotoBrowser alloc] init];
browser.isFullWidthForLandScape = YES;
browser.isNeedLandscape = YES;
browser.currentImageIndex = 3;
browser.imageArray = @[
@"http://ww2.sinaimg.cn/bmiddle/9ecab84ejw1emgd5nd6eaj20c80c8q4a.jpg",
@"http://ww2.sinaimg.cn/bmiddle/642beb18gw1ep3629gfm0g206o050b2a.gif",
@"http://ww4.sinaimg.cn/bmiddle/9e9cb0c9jw1ep7nlyu8waj20c80kptae.jpg",
@"http://ww3.sinaimg.cn/bmiddle/8e88b0c1gw1e9lpr1xydcj20gy0o9q6s.jpg",
@"http://ww2.sinaimg.cn/bmiddle/8e88b0c1gw1e9lpr2n1jjj20gy0o9tcc.jpg",
@"http://ww4.sinaimg.cn/bmiddle/8e88b0c1gw1e9lpr4nndfj20gy0o9q6i.jpg",
@"http://ww3.sinaimg.cn/bmiddle/8e88b0c1gw1e9lpr57tn9j20gy0obn0f.jpg",
@"http://ww2.sinaimg.cn/bmiddle/677febf5gw1erma104rhyj20k03dz16y.jpg",
@"http://ww4.sinaimg.cn/bmiddle/677febf5gw1erma1g5xd0j20k0esa7wj.jpg"
];
[browser show];

方式2

步骤
1.自定义九图控件,在九图控件的item点击事件里面调起图片浏览器。具体代码参照HZPhotoGroup类。
关键代码
//启动图片浏览器
HZPhotoBrowser *browser = [[HZPhotoBrowser alloc] init];
browser.isFullWidthForLandScape = YES;
browser.isNeedLandscape = YES;
browser.sourceImagesContainerView = self; // 原图的父控件
browser.currentImageIndex = (int)button.tag;
browser.imageCount = self.urlArray.count; // 图片总数
browser.delegate = self;
[browser show];
//实现photobrowser代理方法
// 返回临时占位图片(即原来的小图)
- (UIImage *)photoBrowser:(HZPhotoBrowser *)browser placeholderImageForIndex:(NSInteger)index
{
return [self.subviews[index] currentImage];
}

// 返回高质量图片的url
- (NSURL *)photoBrowser:(HZPhotoBrowser *)browser highQualityImageURLForIndex:(NSInteger)index
{
NSString *urlStr = [self.urlArray[index] stringByReplacingOccurrencesOfString:@"thumbnail" withString:@"bmiddle"];
return [NSURL URLWithString:urlStr];
}
2.将九图控件添加到tableview的cell上。cell的代码参照HZTableViewCell类。
3.cell添加到tableview上面。

tips

要想实现上面的方式2,不可能像上面介绍的方式1一样,初始化一下图片浏览器,然后传入图片url数组,调起图片浏览器就完了。必须自定义九图控件。

关于九图控件的布局,和里面item使用的view的类型,各人根据自己的需求自己定义。

项目中使用 SDWebImage 4.0.0及以上版本加载网络图片。使用FLAnimatedImageView加载GIF。

GIF展示使用 FLAnimatedImageView。

hzphotobrowser's People

Contributors

chennyhuang 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

hzphotobrowser's Issues

用scollerview会崩溃

就是一个demo 在scollerview 上加一些照片
UIImageView * view = sender.view;
HZPhotoBrowser *browserVc = [[HZPhotoBrowser alloc] init];
browserVc.sourceImagesContainerView = ScrollView;
browserVc.imageCount = _srcStringArray.count;
browserVc.currentImageIndex = view.tag;
// 代理
browserVc.delegate = self;
// 展示图片浏览器
[browserVc show];

会崩溃 不太懂啊

缩略图大小的设置

博主,我最近在用你的图片浏览进行做了一个功能。如果我想和微信做一样的样式,比如图片数组只有一个图片的时候我这个时候想让图片的大小成我设置的大小,这个时候我该如何去做,我看了一下你的图片是button设置的image,如果我换成backgroundImage则点击变大图查看的时候就会奔溃。能告诉我一下该如何去修改吗?

保存图片失败,找不到原因

Error Domain=ALAssetsLibraryErrorDomain Code=-1 "Unknown error" UserInfo={NSLocalizedDescription=Unknown error, NSUnderlyingError=0x281af9110 {Error Domain=ALAssetsLibraryErrorDomain Code=-1 "Unknown error" UserInfo={NSLocalizedDescription=Unknown error, NSUnderlyingError=0x281ac1110 {Error Domain=ALAssetsLibraryErrorDomain Code=-1 "Unknown error" UserInfo={NSLocalizedDescription=Unknown error, NSUnderlyingError=0x281a3d740 {Error Domain=com.apple.photos.error Code=46104 "(null)"}}}}}}

访问相册权限和保存图片权限都有加

sourecView是UICollectionview

由于UICollectionview的重用机制,UICollectionview的subviews可能多于cell的数量,subviews(重用池)内有一个隐藏的cell,导致获取到的index不准确,使隐藏动画图片缩放时不准确。

优化意见

像这种框架,最好是数组中存模型(主要字段图片标题、远程链接、本地图片),而不是传简单的字符串数组

点击奔溃

如果你指定的父视图里面的subviews 不仅仅包含 图片 而且 包括 其他视图 比如 UILabel,UIbutton,UIimageView 啊,然后你用这个去取 UIView *sourceView = self.sourceImagesContainerView.subviews[self.currentImageIndex]; 得到的sourceView 就不能保证是点击的图片,有可能取出来的是UIlabel什么的然后就挂了

问题请教

我如果用方式二来展示图片,业务场景是在TableViewCell上增加了一个UIScrollView来展示左右滑动的图片,这时候讲这个UIScrollView作为 browser.sourceImagesContainerView,但是当我右滑动到最后一张时候点击放大再点击缩小,这时候UIScrollView的contentOffset变为了(0,0)这是怎么回事呢?

崩溃

点击保存按钮崩溃,请解决下哦

图片显示最大化问题

当图片的宽(w):高(h)<屏幕的k:h时,是否可以按照屏幕的高度确定图片的初始显示缩放比例,不然在横屏状态下图片放大模式,不会完全看到

横屏问题

横屏时点击图片放大,放大后的图片是最大化只能看到部分图片;
然后缩小时,图片缩小飞回去的位置有偏差;竖屏没问题

你好, 我想请教个问题

微信网页的图片浏览点击图片后拖拽能回到原来的位置不是中心,这个怎么做的, 该框架能封装类似实现吗

一点问题

convertToRect 有时候得不到想要的结果。建议在viewDidLoad里事先把所有sourceView的rect计算出来。

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.