小工具      在线工具  汉语词典  css  js  c++  java

swift3.0图像放大缩小动画效果

Swift学习 额外说明

收录于:97天前

一、内容说明

      跟我之前这篇类似,只不过那篇是OC版本,这篇是Swift版本 OC版本链接地址

目的:通过kingfisher请求5张图片并显示。然后使用图片缩放来显示和管理图片,并且可以滑动浏览多张图片。

效果图如下。如果想看动态渲染,请看上面链接中的OC版本渲染,与本文相同。

本demo,只加载本地图片的demo该演示的下载链接,需要加载网络图片的,需要下载翠鸟



2. 源码展示

0. 图片测试demo源码

import Foundation
import UIKit

class LJPhotoGroupViewController : TFBaseViewController{

    lazy var ljArray : [LJPhotoInfo] = [LJPhotoInfo]()
    let ljUrlArray = ["http://pica.nipic.com/2007-12-12/20071212235955316_2.jpg",
                      "http://d.lanrentuku.com/down/png/1706/10avatars-material-pngs/avatars-material-man-4.png",
                      "http://image.nationalgeographic.com.cn/2017/0703/20170703042329843.jpg",
                      "http://image.nationalgeographic.com.cn/2015/0121/20150121033625957.jpg",
                      "http://image.nationalgeographic.com.cn/2017/0702/20170702124619643.jpg"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.setTopNavBarTitle("图片浏览测试Demo")
        self.setTopNavBackButton()
        self.setUI()
    }
}

extension LJPhotoGroupViewController{
    func setUI(){
       
        for index in 0...4{
            
            //1.加载本地图片
            //let image = UIImage.init(named: "\(index + 1).jpg")
            let showImageView = UIImageView.init()
            //showImageView.image = image
            showImageView.tag = index
            showImageView.frame = CGRect(x: Int((AppWidth - 200)/2.0), y: 80 + Int(90 * index), width: 200, height: 80)
            showImageView.isUserInteractionEnabled = true
            view.addSubview(showImageView)
            
            //2.加载本地图片
            let url = URL(string:ljUrlArray[index])
            showImageView.kf.setImage(with: url)
            
            let gestrue = UITapGestureRecognizer.init(target: self, action: #selector(LJPhotoGroupViewController.showClicked(_:)))
            showImageView.addGestureRecognizer(gestrue)
            
            //需要浏览的图片添加到数组
            let info = LJPhotoInfo.init()
            info.largeImageURLStr = ljUrlArray[index]
            info.thumbImageview = showImageView
            info.currentSelectIndex = index
            self.ljArray.append(info)
        }
    }
}

extension LJPhotoGroupViewController{
    
    func showClicked(_ sender : UITapGestureRecognizer){
        if self.ljArray.count > 0 {
            let index = sender.view?.tag
            let photoGroupView = LJPhotoGroupView.init(frame: CGRect(x: 0, y: 0, width: AppWidth, height: AppHeight))
            photoGroupView.setData(self.ljArray, selectedIndex: index!)
            photoGroupView.showPhotoView()
            
            CHDebugLog("-------\(String(describing: index))")
        }
    }
}


1.LJPhotoGroupView:图片浏览管理类,用于显示图片

import Foundation
import UIKit

class LJPhotoGroupView: UIView {
    
    let baseIndex = 1000
    
    var originFrame : CGRect? // 图片的源尺寸
    var currentIndex : NSInteger = 0 //当前选中的图片index
    var ljPhotoArray : [Any] = [Any]()//存储多组需要加载的图片原始信息
    
    lazy var ljScrollView : UIScrollView = {
        let view  = UIScrollView.init(frame: CGRect(x: 0, y: 0, width: AppWidth, height: AppHeight))
        view.delegate = self
        view.isPagingEnabled = true
        view.backgroundColor = UIColor.yellow
        return view
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.addSubview(self.ljScrollView)
    }

    func setData(_ photoArray : Array<Any>, selectedIndex : NSInteger) {
        self.ljScrollView.contentSize = CGSize(width: floor(AppWidth) * CGFloat(photoArray.count), height: AppHeight)
        self.currentIndex = selectedIndex
        self.ljPhotoArray = photoArray
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

extension LJPhotoGroupView {

// MARK: -- 图片cell复用
    func dequeueReusableCell() -> LJPhotoView {
        
        var cell = self.viewWithTag(baseIndex + self.currentIndex) as? LJPhotoView
        
        if ljPhotoArray.count > currentIndex {
            let info = ljPhotoArray[currentIndex] as? LJPhotoInfo
            let tempImageView = info?.thumbImageview

            if cell != nil{
                self.originFrame = tempImageView?.convert((tempImageView?.bounds)!, to: self)
                return cell!
            }
            
            cell = LJPhotoView.init(frame: CGRect(x: floor(AppWidth)*CGFloat(currentIndex), y: 0, width: AppWidth, height: AppHeight))
            self.originFrame = tempImageView?.convert((tempImageView?.bounds)!, to: self)
        }
        return cell!
    }
  
// MARK: -- 展示图片
    func showPhotoView(){
        
        UIApplication.shared.keyWindow?.rootViewController?.view.addSubview(self)
        self.backgroundColor = UIColor.black
    
        let cell1 = self.dequeueReusableCell()
        cell1.tag = self.baseIndex + self.currentIndex
        
        var ljTempImage : UIImage?
        if ljPhotoArray.count > currentIndex {
            let info = ljPhotoArray[currentIndex] as? LJPhotoInfo
            ljTempImage = info?.thumbImageview?.image
        }
        
        ljTempImage = (ljTempImage != nil) ? ljTempImage : UIImage.init(named: "pic_broadcast_gray_square")
        
        let tfImageView  = UIImageView.init(image: ljTempImage)
        tfImageView.frame = self.originFrame ?? CGRect.zero
        tfImageView.clipsToBounds = true
        tfImageView.backgroundColor = UIColor.red
        tfImageView.contentMode = .scaleAspectFit
        self.addSubview(tfImageView)
        
        //添加页面消失的手势
        let tap = UITapGestureRecognizer.init(target: self, action: #selector(hideImageView))
        self.addGestureRecognizer(tap)
        
        UIView.animate(withDuration: 0.25, animations: {
            let y : CGFloat? = (AppHeight - (ljTempImage?.size.height)! * AppWidth / (ljTempImage?.size.width)!)/2.0
            let height : CGFloat? = (ljTempImage?.size.height)! * AppWidth / (ljTempImage?.size.width)!
            tfImageView.frame = CGRect(x: 0, y: y!, width: AppWidth, height: height!)
        }) { (finish) in
            //根据选中第几张图片直接展示出来
            let cell = self.dequeueReusableCell()
            cell.tag = self.baseIndex + self.currentIndex
            cell.backgroundColor = UIColor.gray
            
            if self.ljPhotoArray.count > self.currentIndex{
                cell.setCurrentImageview(self.ljPhotoArray[self.currentIndex] as! LJPhotoInfo)
            }
            let x : CGFloat = CGFloat(self.currentIndex) * floor(AppWidth);
            self.ljScrollView.setContentOffset(CGPoint.init(x: x, y: 0), animated: false)
            self.ljScrollView.addSubview(cell)
            
            
            tfImageView.removeFromSuperview()
        }
    }
    
// MARK: -- 移除图片
    func hideImageView(){
        let cell = self.viewWithTag(baseIndex + currentIndex) as? LJPhotoView
        UIView.animate(withDuration: 0.25, animations: {
            cell?.ljImageView.frame = self.originFrame!
        }) { (finish) in
            self.backgroundColor = UIColor.white
            self.removeFromSuperview()
        }
    }
}

extension LJPhotoGroupView : UIScrollViewDelegate{
   
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        //滑动时,会调用多次
    }
    
    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
     //滑动完毕时,只会调用一次
        let page = self.ljScrollView.contentOffset.x / self.frame.size.width;
        self.currentIndex = NSInteger(page);
        print("scrollViewDidEndDecelerating当前页数----\(page)")
        
        let cell = self.dequeueReusableCell()
        cell.tag = self.baseIndex + Int(page)
        if self.ljPhotoArray.count > self.currentIndex{
            cell.setCurrentImageview(self.ljPhotoArray[self.currentIndex] as! LJPhotoInfo)
        }
        self.ljScrollView.addSubview(cell)
    }
}


2. 丽津图片资料:图片信息的model

import Foundation
import UIKit

class LJPhotoInfo: NSObject {
    
    var currentSelectIndex : Int?
    var largeImageURLStr : String?
    var thumbImageview : UIImageView?
    
    override init() {
        super.init()
    }
}


3.LJPhotoView:图片浏览管理类使用的cell(图片展示)

import Foundation
import UIKit

class LJPhotoView: UIScrollView {
    
    var ljInfo : LJPhotoInfo?
    
    lazy var ljImageView : UIImageView = {
            let view = UIImageView()
            view.clipsToBounds = true
            view.contentMode = .scaleAspectFit
            return view
        }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.zoomScale = 1.0
        self.addSubview(self.ljImageView)
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

extension LJPhotoView{
    func setCurrentImageview(_ info : LJPhotoInfo){
        self.ljInfo = info
        if self.ljInfo?.thumbImageview?.image == nil{
           self.ljInfo?.thumbImageview?.image = UIImage.init(named: "pic_broadcast_gray_square")
        }
        
        //无url,则通过thumbImageview获取Image展示
        //self.ljImageview.image = info.thumbImageview.image;
        let y : CGFloat? = (AppHeight - (info.thumbImageview?.image?.size.height)! * AppWidth / (info.thumbImageview?.image?.size.width)!) * 0.5;
        self.ljImageView.frame = CGRect(x: 0, y: y!, width: AppWidth, height: AppWidth*(info.thumbImageview?.image?.size.height)!/(info.thumbImageview?.image?.size.width)!)
        self.ljImageView.image = self.ljInfo?.thumbImageview?.image
        
        if info.largeImageURLStr != "" {
            let url = URL(string:info.largeImageURLStr!)
            self.ljImageView.kf.setImage(with: url)
        }
    }
}


. . .

相关推荐

额外说明

Web 自动化神器 TestCafe(二)—元素定位篇

前言 前段时间写了一篇关于web自动化测试框架TestCafe的安装和入门文档,很多小伙伴表示对这个框架比较感兴趣,后续有时间会陆续写几篇关于TestCasfe使用的文章。 WEB 自动化神器 TestCafe(一) —安装和入门篇https://mp.

额外说明

VS2015新建MFC项目

万事开头难,学东西,特别是技术性的,只要起个头就有可能一路走下去了。 文件 —> 新建 —> 项目 或直接选择开始下面的:新建项目 新建项目 设置窗口属性 在这里可以直接点完成,下面的设置在工程建完后还可以设置。 如需要修改主窗口的类名,可以在这里修改。

额外说明

【PAT乙级】1003 我要通过!

目录 一、题目 二、我的AC代码 一、题目 1003 我要通过! (20分)   “答案正确”是自动判题系统给出的最令人欢喜的回复。本题属于 PAT 的“答案正确”大派送 —— 只要读入的字符串满足下列条件,系统就输出“答案正确”,否则输出“答案错误”。

额外说明

Java基础之集合框架(编辑中)

集合框架 集合类存在的意义 存储对象使用数组,存储对象使用集合(集合中也只能保存对象) 集合和数组的不同 数组虽然也可以存储对象,但长度是固定的;集合长度是可变的。 数组中可以存储基本数据类型,集合只能存储对象。(可以是不同类型的) 集合框架的由来 不断

额外说明

commons-math3-3.6.1-org.apache.commons.math3.analysis.differentiation-包下的接口-中英对照文档及源码赏析

commons-math3-3.6.1-org.apache.commons.math3.analysis.differentiation-包下的接口-中英对照文档及源码赏析 摘要:中英对照文档、源码赏析、org.apache.commons.math3

额外说明

leetcode 160: 两个链表的交集

A、B的长度不一样,可以结合两条链表,改写成: A: a1 a2 c1 c2 c3 b1 b2 b3 c1 c2 c3 B: b1 b2 b3 c1 c2 c3 a1 a2 c1 c2 c3 这样就能抵消链表长度上的差异,找到相交点c1。 代码: 再看另

额外说明

JVM(Java虚拟机)

描述: 虚拟机是一种虚拟的,逻辑上实现计算机一些功能的,抽象化的计算机。 Java虚拟机(Java Virtual Machine 简称JVM)是运行所有Java程序的抽象计算机,是Java语言的运行环境,Java虚拟机屏蔽了与具体操作系统平台相关的信息

额外说明

Mybatis查树的两种写法

Mybatis查树必须会,它有两种写法: 1、联表查询。只访问一次数据库。 2、递归查询。访问多次数据库。 1、联表查询(推荐) 表结构: create table common_region ( region_id int(11), pr_regi

额外说明

(CVPR2023)Bi-directional Distribution Alignment for Transductive Zero-Shot Learning

模型图 分类器的训练和测试 如下图所示,训练分类器阶段,直接取了模型的原始图片特征V作为输入,不是VHA拼接然后作为输入。 由上图和下图的test_seen_feature可以看出,在测试阶段,才让特征进行VHA融合处理。

额外说明

【软考 系统架构设计师】计算机网络① TCP/IP协议族

>>回到总目录<< 为了不辜负已经订阅了专栏的同学们的信任,所以本专栏不会有任何的优惠活动。 另外,当订阅人数每次达到 2 n ( n > 2 ) 2^n(n>2) 2

ads via 小工具