swift使用SDPhotoBriwser浏览图片教程
<p>场景：我们在使用app的时候，特别是显示多张图片的时候，都会点击图片并进行浏览，比如QQ、微信，好友发表的动态，我们都会点击进去查看原图。现在很多app都支持图片浏览功能，这样更加方便用户体验，那么我们在项目开发过程中，怎么对图片点击进行预览，下面介绍一下在swift项目开发中使用SDPhotoBrowser进行图片浏览。</p><p>SDPhotoBrowser地址：https://github.com/gsdios/SDPhotoBrowser</p>
<p>下面直接代码进行说明</p>
<div class="jb51code">
<pre class="brush:plain;">
//
//ShopStoreTableHeaderView.swift
//SmartMilk
//
//Created by lin jiang on 2017/7/11.
//Copyright © 2017年 greengao. All rights reserved.
//
import UIKit
//添加SDPhotoBrowserDelegate代理
class ShopStoreTableHeaderView: UIView,UIScrollViewDelegate,SDPhotoBrowserDelegate {
var storeImages:NSMutableArray = NSMutableArray()
var mainScrollView:UIScrollView?
var mainPageControl:UIPageControl?
var mainTimer:Timer?
var isMiddleShow:Bool = false
override init(frame: CGRect) {
super.init(frame: frame)
setScrollViewUI()
setPageControlUI()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func setScrollViewUI(){
self.mainScrollView = UIScrollView(frame: CGRect(x: 0, y: 0, width: self.width, height: self.height))
// 添加到父视图
self.addSubview(self.mainScrollView!)
// 背景颜色
// arc4random()
self.mainScrollView?.backgroundColor = UIColor.white
// 自适应父视图
// self.mainScrollView.autoresizingMask = UIViewAutoresizing.FlexibleHeight
// 其他属性
self.mainScrollView?.isScrollEnabled = true // 上下滚动
self.mainScrollView?.scrollsToTop = true // 点击状态栏时，可以滚动回顶端
self.mainScrollView?.bounces = true // 在最顶端或最底端时，仍然可以滚动，且释放后有动画返回效果
mainScrollView?.isPagingEnabled = true // 分页显示效果
mainScrollView?.showsHorizontalScrollIndicator = false // 显示水平滚动条
mainScrollView?.showsVerticalScrollIndicator = true // 显示垂直滚动条
mainScrollView?.indicatorStyle = UIScrollViewIndicatorStyle.white // 滑动条的样式
// 设置内容大小
// self.mainScrollView?.contentSize = CGSize(width: originX, height: scrollViewHeight)
// 代理
self.mainScrollView?.delegate = self
}
func setPageControlUI(){
self.mainPageControl = UIPageControl(frame: CGRect(x: (self.width - 150.0) / 2, y: ((self.mainScrollView?.bounds)!.height - 20.0 - 10.0), width: 150.0, height: 20.0))
// 添加到父视图
self.addSubview(self.mainPageControl!)
// 背景颜色
self.mainPageControl?.backgroundColor = UIColor.clear
// 其他属性设置
self.mainPageControl?.numberOfPages = 0 // 总页数
self.mainPageControl?.currentPage = 0 // 当前页数，默认为0，即第一个，实际数量是0~n-1
self.mainPageControl?.pageIndicatorTintColor = UIColor.lightGray // 非当前页颜色
self.mainPageControl?.currentPageIndicatorTintColor = UIColor.red // 当前页颜色
}
func setMainScrollViewPageControl(images:) {
self.storeImages.removeAllObjects()
self.storeImages.addObjects(from: images)
for viewin (self.mainScrollView?.subviews)! {
view.removeFromSuperview()
}
var originX:CGFloat = 0.0
for model in images
{
let imageView = UIImageView(frame: CGRect(x:originX, y:0.0, width:SCREEN_WIDTH, height:self.height))
let url = URL(string: model.storeSmallImg!)
let image = UIImage(named: "default_icon")
// weak var weakSelf = self
imageView.sd_setImage(with: url, placeholderImage: image, options: .retryFailed, completed: { (image, error, cacheType, URL) in
})
//添加UI Image View的点击事情
let tap = UITapGestureRecognizer(target: self, action: #selector(onClickedImageEvent(gest:)))
imageView.isUserInteractionEnabled = true
imageView.addGestureRecognizer(tap)
//主要是显示区分显示大点的图和小点的图
if isMiddleShow == true{
let contentView = UIView(frame: CGRect(x:originX, y:0.0, width:self.width, height:self.height))
let imagexx = (SCREEN_WIDTH - self.height)/2
imageView.frame = CGRect(x:imagexx, y:0.0, width:self.height, height:self.height)
contentView.addSubview(imageView)
self.mainScrollView?.addSubview(contentView)
originX = (contentView.frame.minX + contentView.frame.width)
}
else
{
self.mainScrollView?.addSubview(imageView)
originX = (imageView.frame.minX + imageView.frame.width)
}
}
self.mainScrollView?.contentSize = CGSize(width: originX, height: self.height)
self.mainPageControl?.numberOfPages = images.count // 总页数
self.mainPageControl?.currentPage = 0 // 当前页数，默认为0，即第一个，实际数量是0~n-1
}
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
MQLog(message:"6 scrollViewDidEndDecelerating")
let width = scrollView.frame.width
let offsetX = scrollView.contentOffset.x
let index = offsetX / width
MQLog(message:"当前页是：\(index)")
self.mainPageControl?.currentPage = Int(index)
}
func addTimer()
{
self.mainTimer = Timer.scheduledTimer(timeInterval: 2.0, target: self, selector: #selector(autoShow), userInfo: nil, repeats: true)
}
func removerTimer()
{
if self.mainTimer != nil
{
self.mainTimer?.invalidate()
self.mainTimer = nil
}
}
func autoShow()
{
var page:Int = (self.mainPageControl?.currentPage)!
let total = (self.mainPageControl?.numberOfPages)! - 1
if total == page
{
page = 0
}
else
{
page += 1
}
// 设置偏移量
let offsetX = CGFloat(page) * (self.mainScrollView?.frame)!.width
self.mainScrollView?.setContentOffset(CGPoint(x:offsetX, y:0.0), animated: true)
self.mainPageControl?.currentPage = page
}
func onClickedImageEvent(gest:UITapGestureRecognizer) {
let browser = SDPhotoBrowser()
//显示图片UIImageView的父控件
browser.sourceImagesContainerView =self.mainScrollView
//显示图片的总数量
browser.imageCount = self.storeImages.count
if self.storeImages.count > (self.mainPageControl?.currentPage)! {
browser.currentImageIndex = (self.mainPageControl?.currentPage)!
}
else
{
//要显示的当前图片下标位置
browser.currentImageIndex = 0
}
browser.delegate = self
browser.show()
}
/**************************************************************/
//返回当前UIImageView显示的图片
func photoBrowser(_ browser: SDPhotoBrowser!, placeholderImageFor index: Int) -> UIImage! {
if self.isMiddleShow{
let contentView = self.mainScrollView?.subviews
let imageView:UIImageView = contentView?.subviewsas! UIImageView
return imageView.image
}
else
{
let imageView:UIImageView = self.mainScrollView?.subviewsas! UIImageView
return imageView.image
}
}
//设置要显示图片资源的地址
func photoBrowser(_ browser: SDPhotoBrowser!, highQualityImageURLFor index: Int) -> URL! {
let model = self.storeImages as! StoreImageModel
let url = URL(string: model.storeBigImg!)
return url
}
}</pre>
</div>
<p>运行结果：以上图片资源的地址就不提供了，是公司的资源，百度随便找几张图片就可以了</p>
<p style="text-align: center"><img alt="" src="https://img.jbzj.com/file_images/article/202110/2021102811470140.png" /></p>
<p style="text-align: center"><img alt="" src="https://img.jbzj.com/file_images/article/202110/2021102811470141.png" /></p>
<p>以上就是swift使用SDPhotoBriwser浏览图片教程的详细内容，更多关于使用SDPhotoBriwser浏览图片的资料请关注琼殿技术社区其它相关文章！</p>
<div class="art_xg">
<b>您可能感兴趣的文章:</b><ul><li>swift3.0实现图片放大缩小动画效果</li><li>Swift中图片资源使用流程的优化方法详解</li><li>Swift图像处理之优化照片</li><li>SwiftUI图片缩放、拼图等处理教程</li><li>swift3.0网络图片缓存原理简析</li></ul>
</div>
</div>
<!--endmain-->
頁:
[1]