swift使用SDPhotoBriwser浏览图片教程

场景:我们在使用app的时候,特别是显示多张图片的时候,都会点击图片并进行浏览,比如QQ、微信,好友发表的动态,我们都会点击进去查看原图。现在很多app都支持图片浏览功能,这样更加方便用户体验,那么我们在项目开发过程中,怎么对图片点击进行预览,下面介绍一下在swift项目开发中使用SDPhotoBrowser进行图片浏览。

SDPhotoBrowser地址:https://github.com/gsdios/SDPhotoBrowser

下面直接代码进行说明

//
//  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:[StoreImageModel]) {
        self.storeImages.removeAllObjects()
        self.storeImages.addObjects(from: images)
        for view  in (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[index]
            let imageView:UIImageView = contentView?.subviews[0]as! UIImageView
            return imageView.image
        }
        else
        {
            let imageView:UIImageView = self.mainScrollView?.subviews[index]as! UIImageView
            return imageView.image
        }
    }
    //设置要显示图片资源的地址
    func photoBrowser(_ browser: SDPhotoBrowser!, highQualityImageURLFor index: Int) -> URL! {
        let model = self.storeImages[index] as! StoreImageModel
        let url = URL(string: model.storeBigImg!)
        return url
    }
}

运行结果:以上图片资源的地址就不提供了,是公司的资源,百度随便找几张图片就可以了

以上就是swift使用SDPhotoBriwser浏览图片教程的详细内容,更多关于使用SDPhotoBriwser浏览图片的资料请关注我们其它相关文章!

(0)

相关推荐

  • Swift中图片资源使用流程的优化方法详解

    前言 去年发布的Xcode9支持在代码编辑中直接插入图片,类似如下效果 但用了一段时间以后还是不太喜欢,换回了原来的方法. 本篇中许多实现细节已经在 iOS中多语言本地化流程的优化中写过,没再重复,若有疑问建议先阅读该文章. 传统的方法 // iOS let closeImage = UIImage(named: "close") // macOS let closeImage = NSImage(named: NSImage.Name("close")) 是不是看

  • swift3.0网络图片缓存原理简析

    一. 缓存原理 图片缓存原理原理是,如内存没图片,去磁盘找,若磁盘也没有,则根据url去下载,然后缓存到内存和磁盘中,简单易用 缓存的目录结构如下图: //存储图片的文件夹 var ljFilePath:String =NSHomeDirectory() +"/Documents/"+"LJImageCache/" 二. 图片名称处理 为了确保缓存下来的图片的唯一性,所以此处采用图片的url+md5=唯一标识符,来存储图片,如上图图片的名称. 创建一个Sting+M

  • SwiftUI图片缩放、拼图等处理教程

    目录 前言 1.图片缩放 2.图片拼图 3.图片操作方法 4.示例代码 5.结尾 前言 采用SwiftUI Core Graphics技术,与C#的GDI+绘图类似,具体概念不多说,毕竟我也是新手,本文主要展示效果图及代码,本文示例代码需要请拉到文末自取. 1.图片缩放 完全填充,变形压缩 将图像居中缩放截取 等比缩放 上面三个效果,放一起比较好对比,如下 原图 - 完全填充,变形压缩 - 居中缩放截取 - 等比缩放 第1张为原图 第2张为完全填充,变形压缩 第3张为图像居中缩放截取 第4张为等

  • swift3.0实现图片放大缩小动画效果

    一. 内容说明 跟我之前这篇类似,只不过那篇是OC版本,这篇是Swift版本 OC版本链接地址 目的:通过kingfisher请求5张图片,展示出来.然后利用图片放大缩小管理类展示图片,多张图片可以滑动浏览 效果图如下,想看动态的效果图,请看上面链接中的OC版本效果图,跟这篇是一样的. 本demo,只加载本地图片的demo下载链接 ,需要加载网络图片的,需要下载Kingfisher 二.源码展示 0. 图片测试demo源码 import Foundation import UIKit class

  • Swift图像处理之优化照片

    Core Image能通过分析图片的各个属性,人脸的区域等进行自动优化图片.我们只需要调用autoAdjustmentFiltersWithOptions这个API方法获取各个自动增强滤镜来优化图片即可.不管是人物照片还是风景照均可增强效果. (以前另外还有个叫autoAdjustmentFilters的方法,现已废除.) 1.具体使用的滤镜如下: (1)CIRedEyeCorrection:修复因相机的闪光灯导致的各种红眼 (2)CIFaceBalance:调整肤色 (3)CIVibrance

  • swift使用SDPhotoBriwser浏览图片教程

    场景:我们在使用app的时候,特别是显示多张图片的时候,都会点击图片并进行浏览,比如QQ.微信,好友发表的动态,我们都会点击进去查看原图.现在很多app都支持图片浏览功能,这样更加方便用户体验,那么我们在项目开发过程中,怎么对图片点击进行预览,下面介绍一下在swift项目开发中使用SDPhotoBrowser进行图片浏览. SDPhotoBrowser地址:https://github.com/gsdios/SDPhotoBrowser 下面直接代码进行说明 // // ShopStoreTab

  • Swift缩放并填充图片功能的实现

    摘要 直接操作图片来实现它的缩放或者填充多余空间,首选 UIGraphicsBeginImageContext 函数来实现,它就相当于一个画布,你甚至可以用它来涂鸦. 最近有一个需求,就是将图片先等比例缩放到指定大小,然后将空余出来空间填充为黑色,返回指定大小的图片. 这种直接操作图片的需求,就要考虑使用 UIGraphicsBeginImageContext 函数实现.它可以理解为一个画布,我们只需要把图片放在画布的对应位置,把画布的多余地方全部涂成黑色就完成. 实现 先看代码,然后再分析:

  • js实现在同一窗口浏览图片

    在同一窗口浏览图片的方法有很多,本例要为大家介绍的是使用js获取img的src属性后进行替换,有此需要的朋友可以参考下 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type&q

  • Android仿微信发朋友圈浏览图片效果

    先看一下效果吧: 下面就来说一下具体怎么实现的: 实现思路 1.首先我们要获取数据源,数据源就是我们的每条说说(包括姓名.标题.图片数组) 2.自定义适配器(ListView嵌套着GridView) 3.图片点击浏览图片(Fragment+ViewPager) 具体实现 1.初始化数据源,设置适配器,看一下代码: public class MyActivity extends Activity { /*图片显示列表*/ private ListView listView; /*图片URL数组*/

  • 冰点还原网络版.有图片教程

    冰点网络还原5.5企业版,图片教程 点击这里下载冰点网络还原5.5企业版 screen.width-500)this.style.width=screen.width-500;" border=0>此主题相关图片如下:screen.width-500)this.style.width=screen.width-500;" border=0> screen.width-500)this.style.width=screen.width-500;" border=0&

  • R.swift的使用与安装教程

    为什么使用R.swift R.swift可以获取强类型.自动完成的资源,如图像.字体和段落完全类型化.更少的强制转换和猜测方法将返回什么编译时检查,运行时不再有导致应用程序崩溃的错误字符串自动完成,再也不用怀疑图片名字是不是复制错了. R.swift的安装步骤 (这里主要讲使用cocoapods的方式安装) 在你的podfile文件中添加R.swift pod 'R.swift' 终端执行pod install命令 添加相关配置 点击添加 按照如下图方式,将该文件放到compile source

  • 易语言修改自己软件版权图片教程

    第一个步骤打开易语言找到程序 找到后点击程序.找到配置 点击配置,会进入如图编辑模式 这里随便填写你想要的版权信息.编译后点击文件查看属性就是自己的版权啦

  • Android仿淘宝商品浏览界面图片滚动效果

    用手机淘宝浏览商品详情时,商品图片是放在后面的,在第一个ScrollView滚动到最底下时会有提示,继续拖动才能浏览图片.仿照这个效果写一个出来并不难,只要定义一个Layout管理两个ScrollView就行了,当第一个ScrollView滑到底部时,再次向上滑动进入第二个ScrollView.效果如下: 需要注意的地方是: 1.如果是手动滑到底部需要再次按下才能继续往下滑,自动滚动到底部则不需要 2.在由上一个ScrollView滑动到下一个ScrollView的过程中多只手指相继拖动也不会导

  • Android实现点击WebView界面中图片滑动浏览与保存图片功能

    一.实现需求 最近在公司的项目中遇到需求如下: 1.点击 WebView 页面的图片实现开启查看图片模式,即可以显示点击的图片,然后滑动显示下一张图片. 3.长按 WebView 页面图片弹出对话框可以选择保存长按的图片到本地相册. 拿到这个需求笔者第一反应是没做过 WebView 相关的交互,甚至分不清这个需求是否需要服务端配合完成 Java 与 JavaScript 的互相调用,一脸茫然. 遇到这种情况笔者的解决思路一般分两个方向: 1.找一个比较出名的客户端有类似功能的,然后 Google

  • Android UI控件之Gallery实现拖动式图片浏览效果

    我们知道现在智能手机上都有这样一种功能,就是你在浏览图片的时候.不是硬性的点击按钮而是可以实现手指的拖动,划开效果.使用户具有更好的交互体验,不过这种效果是如何实现的呢? 在Android中是通过Gallery来实现拖动效果的. 通过Gallery可以实现各种各样的效果,此篇文章只是简要谈谈他的用法,至于后续的一些效果 有机会的时候做一个整理. 首先看看其简单实现吧!本次实例是通过选取图片实现类似设置背景的功能! 不过需要说明的是:图片不宜过大,否则容易内存溢出,android对大图片的支持不好

随机推荐